Problem with Rendering Vertical Annotation Line

[Jp-Aubry]

Hello!

I'm trying to draw vertical and horizontal lines on a chart using the Chart.js annotation plugin. While lines 1 and 2 are rendered correctly, line 3 does not align properly on the x-axis.

The issue is that the xMin and xMax values for line 3 (expected at 14) appear offset, rendering at an incorrect position (e.g., 9 instead of 14). However, the y position aligns correctly on the y-axis. This seems to be related to a scaling issue on the x-axis.

Here is the configuration I'm using:

What I Expect:

Line 3 should appear vertically at x = 14 and span from y = 0 to y = 2.

What Happens:

Line 3 is rendered with a horizontal offset, appearing at approximately x = 9 instead of x = 14.

Additional Information:

The chart displays other elements (e.g., scales, data points) correctly, so this appears specific to the annotation. I suspect a mismatch between the scale configuration and the annotation plugin.

Any insights or guidance would be greatly appreciated!

[stockiNail]

@Jp-Aubry i used your config to create a codepen: https://codepen.io/stockinail/pen/KwPwyKq

As you can see the line 3 is correctly drawn.

I think your issue could be related to the chart type and data you are using. When you are using a bar or line chart, the x axis is a category axis by default, that means that when in the plugin you are using a number as x/y Min/Max you are saying to the plugin to use the index of the labels (strings) array of the scale and not the value.

Could you provide the chart type and options and (if possible) the data you are using?

Let me know.

[Jp-Aubry]

Hello, thanks for your reply!

I am using line chart. I have addedtype: linear to the definition of the x axis and everything works fine!

[stockiNail]

Glad to read it!