X Axis labels not being rotated so they overlap with each other

[rpelorosso]

I have a stacked bar chart with 3 columns. The labels for each column are large, so I'd expect them to be automatically rotated (or trimmed), but this is not happening, and so the labels overlap. Note that if I add a 4th column then the labels are rotated.

I've created a codepen where the overlap happens.

I've set the following options for the labels:

rotate: -45,
rotateAlways: false,
trim: true

Am I missing any configuration, or is this supposed to be rotating the labels as it is?

thank you!

[junedchhipa]

xaxis: {
  labels: {
    show: true,
    rotate: -45,
    rotateAlways: true,
    minHeight: 100,
    maxHeight: 180,
    style: {
      colors: "red"
    }
  },
  categories: [
    "This is a large label",
    "And Another large one",
    "Just in case one more"
  ]
}

[rpelorosso]

Thank you @junedchhipa , so there's no way to have the chart rotate the labels automatically if an overlap is going to occur? (and leave them unrotated if not)

[junedchhipa]

Well no, the labels should rotate automatically. I missed checking that, reopening issue.

[ericlcolvin]

I am running into this issue with stacked bar charts while grid.show: false
After a quick glance in the code I believe this is because xAxis.xAxisLabelCorrections is only called if w.config.grid.show is set to true. The variable elgrid.xAxisTickWidth is passed to xAxisLabelCorrections, but I don't see where that parameter is used in the method.

Line:

apexcharts.js/src/modules/axes/Grid.js

Line 90 in 59d3e89

xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)

Again, a quick glance, and I can live the grid being drawn; but this might cause some confusion for some.

[ashokkumarsundar-ag]

I am having the same label overlap issue in bar chart. Here is the code pen url:

https://codepen.io/ashok999333/pen/mdVwxqL

[Teukros]

I am having the same label overlap issue in bar chart. Here is the code pen url:

https://codepen.io/ashok999333/pen/mdVwxqL

Same story, I have to set rotateAlways: true to avoid this. Not sure why it's marked as "Closed", seems to me it's still an obvious bug.

[saurabhnemade]

This is still the issue. when screen size is more it does not respect rotateAlways property and even drops some labels.

Edit:
I seriously gotta use types here. I had a typo in xaxis as xAxis causing this behaviour.