Implementing a Chart.js line chart in your Angular application

Chart.js is an open source library for building great looking charts with Javascript. Here's how you can easily use it to display data in your Angular application.

Install the library

First, you'll need to install the Chart.js library:

npm install chart.js --save

Next, import the module in your Component:

import { Chart } from 'chart.js';

Prepare your data

To render your chart, each dataset should be an array of numbers, or an array of objects formatted like the below, where x and y refer to the axes of the chart:

[{
  x: 1,
  y: 10
}, {
  x: 2,
  y: 20
}]

You can substitute the x or y properties with t if you're using the time scale.
Use the Array.map() method to structure your data for Chart.js.

You can also specify labels for the x axis - this must also be an array.

The template

In your Component's template, add a canvas element with a reference variable of your choice. Inside the canvas element, bind to the variable chart. We'll create the variable in the next step.

<canvas #lineChart>{{ chart }}</canvas>

Configuring the chart

Back in your Component, import ViewChild from angular core and add the reference to your canvas element as a private member. Then, add a public variable chart - this will be assigned to a Chart.js instance and will be binded to our template:

import { Component, OnInit, ViewChild } from '@angular/core';

  @Component({
    ...
  })

  export class myComponent implements OnInit {
    @ViewChild('lineChart') private chartRef;
    chart: any;
    ...
  }

Now that you have your data prepared, and a reference to your canvas element, let's add the basic Chart.js configuration for a line chart:

this.chart = new Chart(this.chartRef.nativeElement, {
  type: 'line',
  data: {
    labels: labels, // your labels array
    datasets: [
      {
        data: dataPoints, // your data array
        borderColor: '#00AEFF',
        fill: false
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true
      }],
      yAxes: [{
        display: true
      }],
    }
  }
});

Notice that the data.datasets option takes an array - you can have many datasets displaying on the same line chart.

The chart will now display on your page. If you want to fit your chart into a container, you can set the maintainAspectRatio option to false. See the Chart.js documentation for more configuration options!

Comments

[Lidia Davidson]

this is just a tiny bit of info

[lardman]

a quick note for all of the other angular newbies out there, you need to add static: true to the element ref in typescript for angular 8+. This is the first time I've needed to use static: true :)