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:

@NgModule({
...
  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.

import { Chart } from 'ng2-chartjs2';

@Component({
  selector: 'my-app',
  template: '<chart [labels]="labels" [data]="data" type="bar"></chart>'
})
export class AppComponent {
  labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
  data: Chart.Dataset[] = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }
  ];
}

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