ApexCharts xaxis labels not rotating

I have a Vue 3 and Nuxt 3 application where I have "apexcharts": "^3.41.0" and "vue3-apexcharts": "^1.4.1" versions.

I am creating a line chart where some x-axis data labels are rotating correctly, whereas for some other charts the data labels do not rotate at all.

My chart options are as below:

const chartOptions: ApexOptions = {
  xaxis: {
    categories: ['one item', 'second long item here', 'this is the longest item in the list'],
    title: {
      text: "Items",
    },
    labels: {
      trim: true,
      rotate: -60,
    },
  },
}

Please see below an example of x-axis data labels that are rotated correctly:

Below is the chart where the x-axis data labels are not rotating properly; moreover, some labels are completely not being displayed:

NOTE: Please note that the above images belong to TWO different charts.

What I tried?

I tried to the set the max-width of the chart to 1280px, but this also does not seem to work.

QUESTION: Am I missing any chart settings to make the rotating of x-axis labels consistent across all charts?

rotateAlways: true

As the doc explain: Whether to rotate the labels always or to rotate only when the texts don’t fit the available width.

Demo