Chart.js Angular Tutorial

Chart.js Angular Code Example

In this tutorial, we'll explore how to use Chart.js with Angular to create dynamic and interactive charts. Chart.js is a popular open-source library for building charts, and when combined with Angular, it allows for the creation of customizable charts within an Angular application.

Step 1: Setting Up Your Angular Project

First, create a new Angular project by running:

ng new chartjs-angular-example


Navigate to the project directory:

cd chartjs-angular-example


Step 2: Install Chart.js and Angular ng2-charts

To use Chart.js in our Angular project, we also need to install ng2-charts, a library that provides Angular directives for Chart.js. Run the following command:

npm install chart.js ng2-charts


Step 3: Import NgChartsModule

Next, import NgChartsModule from ng2-charts into your app module (app.module.ts). This step is crucial for making Chart.js components available in your Angular application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   NgChartsModule // Add this line
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }


Step 4: Add Chart to Your Component

Now, let's add a chart to one of your components. Open the app.component.html file and add the following code to include a canvas element where the chart will be rendered.

<div style="display: block">
 <canvas baseChart
   [data]="lineChartData"
   [labels]="lineChartLabels"
   [options]="lineChartOptions"
   [colors]="lineChartColors"
   [legend]="lineChartLegend"
   [chartType]="lineChartType">
 </canvas>
</div>


In your component's TypeScript file (app.component.ts), add the chart configuration:

import { Component } from '@angular/core';
import { ChartData, ChartType } from 'chart.js';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 public lineChartData: ChartData<'line'> = {
   datasets: [
     {
       data: [65, 59, 80, 81, 56, 55, 40],
       label: 'Series A',
       fill: false,
     }
   ],
 };
 public lineChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 public lineChartOptions = {
   responsive: true,
 };
 public lineChartColors = [
   {
     borderColor: 'black',
     backgroundColor: 'rgba(255,255,0,0.28)',
   },
 ];
 public lineChartLegend = true;
 public lineChartType: ChartType = 'line';
}


Step 5: Run Your Application

Finally, start your Angular application to see the Chart.js chart in action:

ng serve


Open your browser and go to http://localhost:4200 to view your chart.

This simple example demonstrates how to integrate Chart.js in an Angular application to create a line chart. You can easily switch chart types and customize the charts to fit your data visualization needs by altering the chart configuration in your Angular component.