How to render chart without decimal and duplicate axis labels in Angular Line Chart?
Description
This article explains how to render an Angular Line Charts without decimal values and duplicate labels on the Y-axis. This helps create cleaner, more readable charts, especially when dealing with integer-based data.
Solution
To eliminate decimal values and prevent duplicate axis labels, use the axisRangeCalculated event. This event allows you to programmatically adjust the axis interval, ensuring whole number labels are rendered when necessary.
Implementation
The following code snippet demonstrates how to apply this in an Angular Line Chart. The logic checks whether the calculated interval is a decimal and, if so, overrides it with an integer value.
app.component.ts
public axisRangeCalculated(args: IAxisRangeCalculatedEventArgs): void {
if (args.axis.name === 'primaryYAxis') {
if (args.interval % 1 !== 0) {
args.interval = 1;
}
}
}
app.component.html
<ejs-chart (axisRangeCalculated)='axisRangeCalculated($event)'>
</ejs-chart>
Output
The Y-axis of the chart will now show only whole numbers and avoid duplicate labels caused by decimal intervals.
