How to format Y-axis labels with a thousand separator in Angular Stock Chart?

Description

This article explains how to format Y-axis labels with a thousand separator in an Angular Stock Chart using the axisLabelRender event. This formatting helps improve readability for large numeric values.

Solution

To add a thousand separator to Y-axis labels, use the axisLabelRender event provided by the Syncfusion Angular Stock Chart component. This event allows you to intercept and format axis label text dynamically.

Implementation

Below is a sample implementation showing how to customize the Y-axis labels using the toLocaleString() method.

app.component.html

<ejs-chart (axisLabelRender)='axisLabelRender($event)'>
</ejs-chart>

app.component.ts

   public axisLabelRender(args): void {
       if(args.axis.name === "primaryYAxis"){
       args.text = parseFloat(args.text).toLocaleString();
      }
   };

Output

The Y-axis values in the chart will now appear with a thousand separator.
For example: 1000 becomes 1,000, 1000000 becomes 1,000,000.

Live Demo

View Sample in Stackblitz