gilbertobotaro / ng2-chartjs2

Chart.js directives for Angular 2

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.

Note: This is work in progress, watch this repo to stay up to date.

Installation

You must manually include Chart.js library into your build or index.html

npm i --save-dev ng2-chartjs2

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 {ChartComponent, Chart} from 'ng2-chartjs2';

@Component({
  selector: 'my-app',
  template: '<chart [labels]="labels" [data]="data" type="bar"></chart>',
  directives: [ChartComponent]
})
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

TODO

• Get the charts working
• Define interfaces and enums
  • Main options (missing a few)
  • Chart types
  • Title Configuration
  • Legend Configuration
  • Legend Label Configuration
  • Tooltip Configuration
  • Hover Configuration
  • Animation Configuration
  • Element Configuration
  • Line Configuration
  • Rectangle Configuration
  • Animation
• Provide more options and control via component inputs
  • Labels
  • Data
  • Type
• Route chart events through component outputs