@deron
To implement Chart.js in Angular 2, you can follow the steps given below:
- Install Chart.js package using npm:
npm install chart.js --save
- Install typings for Chart.js:
npm install --save @types/chart.js
- Import the necessary modules in your Angular application:
Open the app.module.ts file and add the following imports:
import { ChartsModule } from 'ng2-charts';
import 'chart.js';
- Add ChartsModule to the imports array in @NgModule decorator:
imports: [
// other imports
ChartsModule
],
- Create a component to display the chart:
ng generate component chart
- In the component's HTML template, add the chart element:
- In the component's TypeScript file (chart.component.ts), define the chart data and options:
import { Component } from '@angular/core';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
public lineChart = {
type: 'line',
legend: true,
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
data: [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
],
options: {
responsive: true
}
};
}
- Finally, add the component to the main application template (app.component.html):
- Run the application:
ng serve
Now, you should be able to see the chart rendered in your Angular 2 application. Make sure to adjust the chart data and options according to your requirements.