Annotations are not getting full width and the XAxis values get cut when the columnWidth is less

[noobDev31]

I have two issues on my codesandbox -

https://codesandbox.io/s/react-apexcharts-bar-chart-forked-76pvlt?file=/src/index.js

a) The XAxis as you can see I am not getting the last value(May 2022) and for various screen sizes it happens - The value is getting cut somehow and I am getting the value when I change the column width to 22% it works only then(Attached screenshot)

I tried with chart: { width: "100% } as well still doesn't work.

b)The annotations(parallel to the XAxis) line is not having a full width for the average as you can see in the screenshots.

@junedchhipa / @brianlagunas can you please have a look at it

[anguimru]

I'm currently experiencing the same issue. The only workaround that i've found is changing the annotations offsetX and width

annotations: {
   yaxis: [
     {
       y: 33.9,
       offsetX: -20,
       width: '115%',
       borderColor: '#000',
     },
     {
       y: 33.1,
       offsetX: -20,
       width: '115%',
       borderColor: '#000',
     }]
}

There is any alternative to this?