angular-froalacharts
Simple and lightweight official Angular component for FroalaCharts. angular-froalacharts
enables you to add JavaScript charts in your Angular application without any hassle.
- Github Repo: https://github.com/froala/angular-froalacharts
- Documentation: https://froala.com/charts/docs/frameworks/angular/
- Support: support@froala.com
- FroalaCharts
- Official Website: https://www.froala.com/
- Official NPM Package: https://www.npmjs.com/package/froalacharts
- Issues: https://github.com/froala/angular-froalacharts/issues
Table of Contents
Getting Started
Requirements
- Node.js, NPM/Yarn installed globally in your OS.
- You've an Angular Application.
- FroalaCharts installed in your project, as detailed below:
Installation
To install angular-froalacharts
library, run:
$ npm install angular-froalacharts --save
To install froalacharts
library:
$ npm install froalacharts --save
Quick Start
Here is a basic sample that shows how to create a chart using angular-froalacharts
:
Add this in your Angular AppModule
:
;; ; // Import angular-froalacharts; // Import FroalaCharts library and chart modules;; ; // Pass the froalacharts library and chart modulesFroalaChartsModule.fcRootFroalaCharts, FroalaTheme;
Once the library is imported, you can use its components, directives in your Angular application:
In your Angular AppComponent:
; @ dataSource: Object; title: string; { thistitle = 'Angular FroalaCharts Sample'; thisdataSource = chart: caption: 'Countries With Most Oil Reserves [2017-18]' subCaption: 'In MMbbl = One Million barrels' xAxisName: 'Country' yAxisName: 'Reserves (MMbbl)' numberSuffix: 'K' theme: 'froala' data: label: 'Venezuela' value: '290' label: 'Saudi' value: '260' label: 'Canada' value: '180' label: 'Iran' value: '140' label: 'Russia' value: '115' label: 'UAE' value: '100' label: 'US' value: '30' label: 'China' value: '30' ; }
<!-- You can now use froalacharts component in app.component.html --> {{title}}
For Contributors
- Clone the repository and install dependencies
$ git clone https://github.com/froala/angular-froalacharts.git
$ cd angular-component
$ npm i
$ npm start
Licensing
The FroalaCharts Angular component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a separate license.