Angular: Load API data & tooltips in chart.js

Published: 2020-05-27 12:50:32

Most of the time UI developers have to represent data in a visually appealing way, in an easily inferred way and most importantly in an ELI5 manner. We often go for charts and graphs to do that as it serves all the requirements. Thankfully, we don't have to build a canvas from scratch and there are many libraries in JavaScript world to do that job for us. One such popular, open-source library is d3.js, but it comes with very high learning curve. Another lesser known, open-source and simple library is chart.js and the Angular wrapper for chart.js is ng2-charts.

A chart or graph is as good as an empty canvas if there is no data and we cannot keep adding static data the through front end. Almost all the time our data will come from a webservice through an API and in this article, I am going to explain how to effectively fetch data from a remote source into charts. We are going to create a pie chart for this example.

To simulate a remote API, let's create a fake data source and load it asynchronously using JavaScript's setTimeout method with a delay of 100ms. Call this in a function that returns a Promise, to make things easier while fetching the data. Declare a variable public allChartData: Array<IChartData>to store our fake data. This is important, as we would use its length as a flag in *ngIf directive of Angular to control rendering of our component. We will call thus created promise in ngOnInit method to load all the data.

While at it, why not load multiple charts in a single go. We will do just that. Let's use *ngFor directive of Angular to loop through the data and load multiple charts in one go. Now that we are ready with all the essentials, let's proceed to building charts.

Building a chart or more specifically a pie chart is plain simple. We just have to pass baseChart as a directive and chart options to HTML canvas element. These options include datasets, labels, chartType and options among many others. While first two are lists, last one is a JSON object.
datasets option is an array of objects, of which data and label are properties. data is of type SingleDataSet, an array of numbers and we will map our count to it. While we can generally ignore label of datasets, we will use that to store our tooltips, which are visible on hover. labels is of type Label, which is a string or an array of strings and we will have to map labels with a string we want to display as labels. We can set chartType to 'Pie Chart' in this case.

Now we are left with setting only options. While options have many properties, we are concerned about title and tooltips for this example. We can set title with display as true and text as a string we want to display as chart heading. While tooltips have many properties, we are interested in only callbacks property. As the name suggests, these are call-back functions that take tooltip object and a data object as arguments. Data is an object with datasets and labels that we have set previously. For title call-back, we can return any string that we want to set as tooltip header. For label call-back though we want to access label of datasets that we previously set and get them by index property of tooltip argument. Ex. return data['datasets'][0] ['label'] [tooltip['index']].
That's all. With all the above settings, we have our charts ready. I have created a Stack Blitz repo of the above example. Full code can be accessed from SB. Hope it would be of some help.



Remote API data in chart.js