Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

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

Post Editor

We will explore to use charts in angular with high level of customizations using ng2-charts.

3 min read
post

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

We will explore to use charts in angular with high level of customizations using ng2-charts.

post
post
3 min read
3 min read

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.

Discuss with community

Share

About the author

default
Shameer Ahmad

A Tech-savvy with a curious mind and a creative mindset. Aspired to become a Data Engineer. Currently working as FullStack Developer using Angular and Spring boot as Techstack

author_image

About the author

Shameer Ahmad

A Tech-savvy with a curious mind and a creative mindset. Aspired to become a Data Engineer. Currently working as FullStack Developer using Angular and Spring boot as Techstack

About the author

default
Shameer Ahmad

A Tech-savvy with a curious mind and a creative mindset. Aspired to become a Data Engineer. Currently working as FullStack Developer using Angular and Spring boot as Techstack

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
AngularpostAngular and SOLID principles

20 January 2021

6 min read

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.