apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.03k stars 1.28k forks source link

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

Open onetdev opened 1 month ago

onetdev commented 1 month ago

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

image

This is how numeric looks:

image

Reproduction Link

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

junedchhipa commented 1 month ago

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.