We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Prevent columns from stacking when underlying data is duplicated


I have the following data:

I am plotting dimensionShort (x-axis) against performance (y-axis) with a Column chart. I have also made dimension the tool-tip. The output I see is:

Because dimensionShort has 2 nodes for "Sydney" the nodes automatically stack one on top of the other. Is there a way to prevent this so in the above I would have 2 columns for Sydney:

  • 1 column showing 30 with x-axis Sydney and tool-tip Sydney Rocks
  • 1 column showing 75 with x-axis (again) Sydney and tool-tip Sydney Harbour

The reason I need this is the algorithm that spits out the data I am plotting sometimes spits out (legitimate) duplicate dimensionShort nodes.  I know I could plot dimension instead to resolve the issue above, but this field is often really long and ugly to plot. I also know that I could add a number to the DimensionShort, i.e. Sydney1 and Sydney2, but again I am trying to avoid this.

Is there any other way.

Sample project attached.


Attachment: index_3be3067d.zip

1 Reply

DG Durga Gopalakrishnan Syncfusion Team October 12, 2022 06:46 AM

Hi DitchFord,

We suggest you to enable isIndexed for primaryXAxis to achieve your required scenario. Please check with the below sample and online demo link.

var chart = new ej.charts.Chart({

       primaryXAxis: {

        isIndexed: true




Sample : https://stackblitz.com/edit/ed6hdu

Online Demo : https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/chart/indexed-axis.html

Kindly revert us if you have any concerns.


Durga Gopalakrishnan.

Live Chat Icon For mobile
Up arrow icon