How to install and use Chart.js in an Angular application

Today, I was required to display a simple pie chart in an Angular application as part of a proof of concept page I’m building. Because I used Chart.js as part of a previous non-Angular project, it was the obvious choice since I’m already familiar with it and made the assumption that it would be simple to install and use Chart.js in an Angular application.

Expecting a quick implementation, I installed a well-known third-party Chart.js Angular library and started using the provided examples. Unfortunately, I soon ran into a multitude of problems. Being frustrated that the library did not work out of the box, I gave the GitHub support page a quick scan and realized that I was in for an unknown troubleshooting period. I did not have the time and didn’t want to troubleshoot, especially when the chart is a non-important feature of the page, and it was clear that the problems were tricky to resolve when running newer versions of Angular. So I chose to install and use Chart.js in Angular without using a third-party library. In this tutorial, I will show you how to install and use Chart.js in an Angular application without using a third-party library.

How to install and use Chart.js in an Angular application

Below I outline the steps to quickly get the Chart.js library working in your Angular application without installing a third-party library.

Install the Chart.js library

As a first step, install the npm Chart.js package.

npm install chart.js

Create a HTML canvas

Next, we will need a Canvas that the Chart.js library will use to draw the chart. In your HTML, add the following markup.

<canvas #pieChart></canvas>

Import the Chart.js objects

In your component, import the Chart.js objects we are using to generate the chart. These objects include the ArcElement, Chart, ChartConfiguration, Legend, and PieController.

import { ArcElement, Chart, ChartConfiguration, Legend, PieController  } from 'chart.js';

Get a reference to the HTML canvas

Use the ViewChild decorator to get an instance of the HTML canvas by adding the following code to your component.

@ViewChild('pieChart') PieChart: ElementRef<HTMLCanvasElement>;

Declare the rendering context

Declare the rendering context to construct the chart by adding the following code.

public context: CanvasRenderingContext2D;

Regsiter the Chart.js objects

To use Chart.js in Angular, we must register the objects we are going to use. In the ngOnInit lifecycle hook of your component, register the PieController, ArcElement, and Legend by adding the following code.

Chart.register(PieController, ArcElement, Legend);

Initialize the chart data

Initialize the chart data by adding the following code to the ngAfterViewInit lifecycle hook of your component.

const data = {
  datasets: [
    {    
      data: [5, 15, 40, 40],
      backgroundColor: [
        "rgb(234,179,8)",
        "rgb(132,204,22)",
        "rgb(3,105,161)",
        "rgb(244,63,94)"
      ],
      hoverOffset: 4
    },
  ],
  labels: ["Lions", "Tigers", "Sheep", "Goats"]
};

Configure the chart

Configure the chart by adding the following code to the ngAfterViewInit lifecycle hook of your component.

const configuration: ChartConfiguration = {
  type: "pie",
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: true,
      }
    }
  }
};

Construct the chart

Construct the chart by adding the following code to the ngAfterViewInit lifecycle hook of your component.

this.context = this.PieChart.nativeElement.getContext('2d');
var chartBar = new Chart(this.context, configuration);

If you feel in any way that this post was helpful, please consider buying me a coffee to help me create more blog posts, videos, and tutorials.

If you want to keep up to date with my latest posts, check out the list of posts on the home page and make sure that you follow icode4coffee on Facebook, Twitter and LinkedIn.