angular2-chartjs

Chart.js component for Angular2

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular2-chartjs
95210.5.16 years ago8 years agoMinified + gzip package size for angular2-chartjs in KB

Readme

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

FAQ

How to call Chart.js methods - #7, #2

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 (emn178@gmail.com)