angular2-chartjs

Chart.js component for Angular2+

Installation

You can install angular2-chartjs by using npm.

npm install angular2-chartjs

Usage

Add ChartModule to your module, eg.

import { ChartModule } from 'angular2-chartjs';

@NgModule({
  imports: [ ChartModule ]
  // ...
})
export class AppModule {
}

And you can use selector chart in your template.

JavaScript

type = 'line';
data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};
options = {
  responsive: true,
  maintainAspectRatio: false
};

HTML

<chart [type]="type" [data]="data" [options]="options"></chart>

Options

[type]

string, required Chart type.

[data]

object, required To display data, the chart must be passed a data object that contains all of the information needed by the chart. See.

[options]

object, optional To create a chart with configuration options, simply pass an object containing your configuration to the constructor. See.

Events

(clickCanvas)

Event Return click event.

(clickDataset)

Array Return the clicked dataset array.

(clickElement)

Array Return the clicked element in array.

(clickElements)

Array Return the clicked elements in array.

Members

chart

Chart Chart instance. You can call Chart.js methods via this member.

Example:

chartComponent.chart.destroy();

SystemJs

Add following settings

{
  map: {
    'angular2-chartjs': 'npm:angular2-chartjs',
    'chart.js': 'npm:chart.js/dist/Chart.bundle.js'
  },
  packages: {
    'angular2-chartjs': {
      main: './dist/index.js',
      defaultExtension: 'js'
    }
  }
}