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

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"
  ]
}

[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.