xAxis labels are not truncated and cut off

[yubinjodev]

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/
According to documentation, it says the following

labels are then truncated if it overflows the region

However, they are not in this case. As you can see, the xAxis label for the first value is cut off. I have tried setting the parent element to overflow-x: visible, to at least show the values even if it is not truncated, which does not work again.

How do I make the values truncate or at least overflow the xAxis labels?

[yubinjodev]

Here's my options

const options: ApexOptions = {
   colors,
   series: filterData,
   chart: {
     type: 'line',
   },
   dataLabels: {
     enabled: true,
   },

   xaxis: {
     categories: xAxis,
     labels: {
       show: true,
       showDuplicates: false,
     },
   },
   yaxis: filterData.map(() => {
     return { show: false }
   }),
   tooltip: {
     fixed: {
       enabled: true,
       position: 'topLeft',
       offsetY: 30,
       offsetX: 60,
     },
   },
 }

I have also tried the following, but it still cuts off the values

xaxis: {
      categories: xAxis.map((label) => label.replace(/-/g, '/').split(' ')),
      labels: {
        show: true,
        rotate: 0,
        showDuplicates: false,
      },
    },