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
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.

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more
JavaScriptpostthrowError is not throw error

22 December 2020

3 min read

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more