How to Remove Duplicate X-Axis Labels in Stacked Charts Using JavaScript?

When using a stacking column chart with the isIndexed property set to true, you may encounter repeated X-axis labels. This happens because each data point is rendered based on its index in the dataSource, rather than grouping by unique X-values. As a result, the Javascript Chart displays duplicate labels for the same X-value.

To resolve this, you can use the axisLabelRender event provided by the chart library. This event allows you to intercept and customize how axis labels are displayed before they are rendered on the chart.

In the following code example, the axisLabelRender function checks if the label belongs to the primary X-axis. It then splits the label text by commas, trims any extra whitespace, and removes duplicates using a Set. Finally, it joins the unique labels back into a single string and assigns it to args.text, ensuring that only distinct labels are shown on the axis.

Code Example

axisLabelRender(args) {
     if (args.axis.name === 'primaryXAxis') {
       const labels = args.text.split(',').map((label) => label.trim()); // Split and trim the labels

       const uniqueLabels = Array.from(new Set(labels)); // Convert to Set to remove duplicates and then convert back to Array

       args.text = uniqueLabels.join(', '); // Join the unique labels back into a string with commas
     }
   }, 

This approach ensures that even when isIndexed is enabled, the X-axis remains clean and readable without repeated labels.

Output

Sample

You can see a working sample here: StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to remove duplicate X-axis labels in stacked charts in JavaScript.

You can refer to our JavaScript Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our JavaScript components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our JavaScript Chart and other JavaScript components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!