angular2-chartjs

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.

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'
    }
  }
}

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/angular2-chartjs
Author: Chen, Yi-Cyuan ([e-mail])

Changelog

v0.1.5 / 2016-10-24

Added

• exposed chart instance.