Column chart with datetime on x axis breaks annotation positioning on y axis

[onetdev]

Description

Annotation starts from the middle of the first column and stops at the middle of last. This doesn't seem to affect other xaxis types.

Steps to Reproduce

1. Have a chart that uses the following configs:

var options = {
  xaxis: {
    type: "datetime",
  },
  annotations: {
    yaxis: [
      {
        y: 0,
        y2: 100,
        borderColor: "red",
        strokeDashArray: 0,
      }
    ],
  },
  ....
};

Expected Behavior

The annotation to start from the left edge of the grid and finish on the right edge

Actual Behavior

Annotation starts from the middle of the first column and stops at the middle of last.

Screenshots

The issue with datetime type

This is how numeric looks:

Reproduction Link

https://codepen.io/onetdev/pen/xxNOvZr

[junedchhipa]

There is a difference in how the bars are drawn in a category x-axis vs datetime x-axis. Due to that difference, the position of the annotations changes based on that.

[xysun]

is there anyway to fix this? the problem i'm having now is if you now add zoom in a column chart with datetime xaxis, the zoom result is always off by the offset.

[JorindeUsMedia]

I have the same issue: (see screenshot below) Does anybody know a workaround to fix it? I tried to set the offsetX of the annotation to a negative value but since the amount of bars differ for each graph (can be between 2 and 50) this does not work.

x-axis is set to category. for me it seems to break by setting tickPlacement: 'on', instead of 'between'. When I use 'between' it does work correctly but I can't to that because I need 'on' because I need the zoom functionality. (https://apexcharts.com/docs/zooming-in-category-x-axis/)