Customization with NG2-Charts — an easy way to visualize data

Chart.js is one of the most used visualization libraries in the open-source ecosystem. It not only works well with Vanilla JavaScript, but it also provides an extension to the most popular frameworks such as React, Angular, and Vue. If you want to dig deeper into what you can achieve through chart.js click here. Today we will discuss the level of customizability the “options” parameter in chart.js provides.

Although we can directly use chart.js in Angular, it is advised that we use through the plugin chart.js community provides namely, NG2-CHARTS. This library enables us to utilize chart.js from our native TypeScript code in Angular.

To setup ng2-charts you can visit this link:

Now let’s get to the fun part:

In Angular using ng2-charts the options parameter is declared something like this:

pieChartOptions: ChartOptions = {
 responsive: true,
 legend: { position: "top" },
 plugins: {
  datalabels: {
   formatter: (value, ctx) => {
    const label = ctx.chart.data.labels[ctx.dataIndex];
    return label;
   },
  },
 },
};

The current code allows the label to be shown on the portions which represent the label.

Consider you would like to change that with percentages of each portion of the labels occupy like this:

For that we will make changes in the formatted function in plugins part in data labels:

ChartOptions: ChartOptions = {
 responsive: true,
 tooltips: {
  enabled: true,
  callbacks: {
   label: function (tooltipItem, data) {
    let label = data.labels[tooltipItem.index];
    let count = data
                .datasets[tooltipItem.datasetIndex]
                .data[tooltipItem.index];
    return label + "Reads Count : " + count;
   },
  },
 },
 plugins: {
  datalabels: {
   color: "white",
   formatter: (value, ctx) => {
    var perc = ((value * 100) / totalCount).toFixed(0) + "%";
    return perc;
   },
  },
 },
};

Now let’s consider you would like to create a bar or line chart and would like to x-axis and y-axis label showing what they are like this:

For that you would need to add scaleLabel key in both Axes as shown below:

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};

Now consider you like to add linear time series data in the which shows all data points but not all labels below, but you can view the data point when you hover the data point. Not only that but you would the label to adjust as more and more data points are added. The below chart unit is set to weeks therefore it only shows the label for weekends.

To do that you can add data as Date objects and the chart options will preprocess the data accordingly

ChartOptions: any = {
 responsive: true,
 showLine: true,
scales: {
  xAxes: [
   {
    barPercentage: 0.9,
    categoryPercentage: 0.55,
    type: "time",
    distribution: "linear",
    time: {
     unit: "week",
    },
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
  yAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
 },
};

It is important to note that the type in x-axes should be time and appropriate unit for time should be given such as day, week, and month, etc.

This is just the tip of the iceberg and chart.js provides extensive customizability to its users. It also provides setting minimum and maximum data level step size, gridline hiding, and much more. You can look into detailed samples and documentation here.