Integrating Chart.js with Angular 7+

Hi, in this article we will discuss about how to integrate Chart.js library with Angular 7+. Also, we will discuss, some common issues that you will get during integration. So, cm’on let’s start.

Chart.js is a popular open-source library for visualizing data. It allows you to create different types of charts from datasets such as bar charts, pie, line, donut, scatters, and many more.

Chart.js Official website — https://www.chartjs.org/

Prerequisite for Integrating Chart.js

• Basic understanding of HTML and CSS
• Basic familiarity with JavaScript(OOPS, Arrays)

Installation

npm install chart.js --save

Or you can use cdn

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js

Integration

Now, first of all, you need to add the path of chart.js in angular.json file

node_modules/chart.js/dist/Chart.js,
node_modules/chartjs-plugin-annotation/chartjs-plugin-annotation.js(If you are customizing annotation, then install this plugin)

The cool thing about chart.js is that they have multiple extensions, which you can use according to your need. Just like I have added ‘chartjs-plugin-annotation’, for showing horizontal or vertical lines on the graph apart from the datapoints.

Here are the list of popular extensions of chart.js-

Popular Extensions

Now, import chart js in app.module.ts

Now, create a component in which we will integrate chart.js, naming it as ‘GraphComponent’

graph.component.html

graph.component.ts

graph.component.css

Now, if you want to use any extension of chartjs, then you have import that extension in the ts file of GraphComponent, like -

import ‘chartjs-plugin-annotation’;

Changes in graph.component.html

<p-chart type=”line” [data]=”graphData” height=”57vh” [options]=”option”></p-chart>

In the above line,

-> ‘type’ is something which defines the type of the graph which we want to visualise on our web page. We have multiple options here, like —

• Line Chart
• Bar Chart
• Radar Chart
• Doughnut and Pie Charts
• Polar Area Chart
• Bubble Chart
• Scatter Chart
• Area Chart
• Mixed Chart Types

-> In ‘data’, we are inserting the required datasets for drawing the graph.

-> In ‘options’, we are manipulating all the look and feel of the graph like the range of x and y-axis, color of the lines, color of the annotations, etc.

Changes in graph.component.ts

We will declare two global variables which we are using in html file.

i.e, graphData and option

NOTE : In ‘graphData’, we will insert the required datasets. ‘graphData’ should be of object type. In this variable, chart.js is expecting y-axis values in predefined array i.e, labels of Array type, and for x-axis is datasets of Array type.

This is the overall structure of chart.js for drawing any graph —

data: [

graphData : {

labels: [],

datasets: [],

},

],

label: ‘’,

strokeColor: ‘#58595b’,

pointColor: ‘rgba(0,0,0,1)’,

pointStrokeColor: ‘#58595b’,

pointBackgroundColor: ‘#fff’,

pointRadius: 6,

pointHoverRadius: 6,

tension: 0,

fill: false,

borderColor: ‘#58595b’,

borderWidth: 2,

zIndex: 999

So now, lets talk about the look and feel of the graph which we will handle inside ‘option’ variable.

In chart.js, we have multiple properties to enhance the look and feel of it. Like -

• scales : In scales, we have two properties i.e, xAxes(Array of Objects) and yAxes(Array of Objects). Inside these properties, you can play according to your need, like I have shared some commonly used properties.

For xAxes —

display: true, // for show and hide

ticks: {

fontColor: ‘#939598’, // for the color of the tick.

maxRotation: 0, // by using this property, you can stop the rotation of the x-axis labels while we moving from bigger window to smaller window

callback: function (value, index) {} // Inside this callback, you can manipulate or update its values according to your need.

}

For yAxes -

display: true,

ticks: {

fontColor: ‘#939598’,

beginAtZero: true, // If you want to start the range of y-axis from zero

max: 100, // maximum range of y-axid

stepSize: 10, // difference between each datapoint

callback: function (value) {} // you can use this function for manipulating and updating its values

}

• responsive : true | false
• legend: {display: true | false}
• backgroundColor: ‘#58595b’,
• titleFontSize: 36,
• bodyFontColor: ‘white’,
• bodyFontSize: 14,
• titleAlign: ‘center’,
• bodyAlign: ‘center’,
• xPadding: 25,
• yPadding: 10,
• displayColors: false
• tooltips: Properties of tooltips are -

enabled: true, // for showing or hiding

custom: function (tooltipModel) {}, // want to update its value or css

callbacks: {

title: function (tooltipItem) {}, // want to update its title, during runtime

label: function (tooltipItem) {} // want to update its label during runtime

}

• Last but not the least, ‘annotation(Object)’. As you already know, this is an extra extension that we have used for drawing horizontal or vertical lines. We can use it —

type: ‘box’, // we also have line type

xScaleID: ‘x-axis-0’,

yScaleID: ‘y-axis-0’,

xMin: ‘’,

xMax: ‘’,

yMin: ‘’,

yMax: ‘’,

borderColor: ‘’,

borderWidth: 6

That’s it from my side.

Please share your feedback or doubts if you have any.

Thank you for reading.