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;
   },
  },
 },
};

#angular #ng2-charts #chartjs