Chart.js component for Angular2+
You can install angular2-chartjs by using npm.
npm install angular2-chartjs
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>string, required
Chart type.
object, required
To display data, the chart must be passed a data object that contains all of the information needed by the chart. See.
object, optional
To create a chart with configuration options, simply pass an object containing your configuration to the constructor. See.
Chart
Chart instance. You can call Chart.js methods via this member.
Example:
chartComponent.chart.destroy();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'
}
}
}How to call Chart.js methods - #7, #2
The project is released under the MIT license.
The project's website is located at https://github.com/emn178/angular2-chartjs
Author: Chen, Yi-Cyuan (emn178@gmail.com)