How to Integrate Chart.js Using Angular 12 with Data from a REST API (2021)

Chart.js is a popular JavaScript library used for creating beautiful and interactive charts and graphs. In this article, we will learn how to integrate Chart.js into an Angular 12 application and retrieve data from a REST API to populate the charts.

Getting Started

Before we start, make sure you have the following installed:

• Node.js (version 14 or above)
• Angular CLI (version 12 or above)

Now, let’s create a new Angular application:

$ ng new chart-app

Once the application is created, navigate to its root directory:

$ cd chart-app

Next, we need to install Chart.js and its Angular wrapper:

$ npm install chart.js ng2-charts

Creating the Chart Component

Now, let’s generate a new component to display our chart:

$ ng generate component chart

Open the newly generated component file chart.component.ts and import the necessary dependencies:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';

Define the necessary variables and constructor:

@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

public lineChartData: ChartDataSets[] = [];
public lineChartLabels: Label[] = [];
public lineChartOptions: ChartOptions = { responsive: true };
public lineChartColors: Color[] = [];
public lineChartLegend = true;
public lineChartPlugins = [];
public lineChartType = 'line';

constructor(private http: HttpClient) { }

ngOnInit() { }

}

Now, let’s make use of the Angular HttpClient to make a GET request to our REST API in the ngOnInit method:

ngOnInit() {
this.http.get('http://api.example.com/data').subscribe((response: any) => {
this.lineChartData = response.data;
this.lineChartLabels = response.labels;
});
}

Please note that you should replace http://api.example.com/data with the actual URL of your REST API.

Adding the Chart to the Template

Now, let’s open the template file chart.component.html and add the Chart.js canvas element:

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

Styling the Chart

Finally, let’s add some styling to our chart by opening the styles file chart.component.css:

:host {
display: block;
width: 600px;
margin: 0 auto;
}

Running the Application

Now, we can run our Angular 12 application and see the chart populated with data from the REST API:

$ ng serve -o

A new browser window should open automatically, and you should see your chart displayed.

Conclusion

In this article, we have learned how to integrate Chart.js into an Angular 12 application and retrieve data from a REST API to populate the charts. By following these steps, you can create dynamic and interactive charts to visualize data in your Angular applications.