Chart.js 2.0 Component for Angular 2
This is an Angular 2 component to display charts. This component uses Chart.js 2.0. It works well with responsive sites, so it should work properly with all Angular2 apps, as well as Ionic 2 apps.
Installation
You must manually include Chart.js library into your build or index.html
Then install ng2-chartjs2 via NPM
npm i --save-dev ng2-chartjs2
Then import ChartModule into your main App Module:
@MyAppModule({
...
imports: [
...
ChartModule
]
...
})
Example Usage
You can either pass options
attribute with your own custom options (see Chart.js Docs) or pass individual options like labels
, data
, and type
.
;
Reference
This repo will only document things related to the Angular 2 Component. To understand how Chart.js works you need to visit their docs
Chart.js Doc Section | Represented by interface |
---|---|
Options / Common Chart Configuration | Chart.Options |
Title Configuration | Chart.TitleConfiguration |
Legend Configuration | Chart.LegendConfiguration |
Legend Item Interface | Chart.LegendItem |
Tooltip Configuration | Chart.TooltipConfiguration |
Tooltip Callbacks | Chart.TooltipCallbacks |
Tooltip Item Interface | Chart.TooltipItem |
Hover Configuration | Chart.HoverConfiguration |
Animation Configuration | Chart.AnimationConfiguration |
Animation Interface | Chart.Animation |
Element Configuration | |
Data Point (for any type) | Chart.Dataset |