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!
Top comments (2)
this is just a tiny bit of info
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 :)