How to Allow Only Integer Values in the Y-Axis Labels in Angular Chart?

This article explains how to display only integer values on the y-axis labels in an Angular Chart. You can achieve this by using the axisLabelRender event to cancel labels that contain decimal values.

Implementation Steps

• Use the axisLabelRender event, which fires for each axis label.
• Check if the label belongs to the primary y-axis.
• If the label value is not an integer, set args.cancel = true to hide it.

Code Example

app.component.html

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

app.component.ts

public axisLabelRender(args): void {
   if (args.axis.name === 'primaryYAxis') {
     if (Number(args.text) % 1 !== 0) {
       // Decimal value detected, cancel rendering
       args.cancel = true;
     }
   }
 } 

Output

Live Sample

StackBlitz Sample