Bug in clipping behaviour of right-most x-Axis annotation

[philipp-hillebrecht]

Description

In the provided example, we have an area chart with multiple data series and annotations on y- and x-Axis.
One of the x-Axis annotations should be placed at the last x-value of the chart.

Unfortunately, this annotation will not be present at all screensizes even if the chart has enough space to display it.
After doing some research, in the apexcharts code, the problem seems to be the following:

In the file XAxisAnnotations.js the function addXaxisAnnotation is reponsible for placing the annotations in the chart.
The placement itself is bound to a condition which is clipX1 in the provided example. This condition is being evaluated in src/modules/annotations/Helpers.js by the function getX1X2:

In this if condition, the value of clipped is being set to true while the bug described below occurs. When console logging xP and w.globals.gridWidth here, you will see that the only difference between these two numbers is at the 13. decimal place caused by JavaScript not being able to process large floats precisely.

{ xP: 883.7333335876466, globals: 883.7333335876465 }

After adding .toFixed(10) to both of the numbers inside the condition, the bug seems to be fixed.
Since in our use-case we are required to always show the third annotation in our UI, we would be very happy if the calculation of these numbers could become more reliable.

Also, I found this issue which might be related to the cause/fix: issue #4734

Steps to Reproduce

The reproduction link is an area chart containing multiple series and a total of 3 x-Axis annotations.

1. Open the playground linked below
2. Depending on your screen size, you might or might not have the third annotation missing
3. Use the resize function in the middle between the code section and the UI to slowly resize the chart
4. After waiting for the chart to re-render and adapt to the new screensize, check if the third annotation at x=2075 has been clipped or unclipped
5. If the visibility of the x=2075 annotation has not changed, go back to step 3 and repeat

Expected Behavior

The last x-Axis annotation is always present if there is enough space.

Actual Behavior

The last x-Axis annotation is only visible every ~2px and then invisible again for another ~3px.

Screenshots

906px container width:

905px container width:

Reproduction Link

Vue SFC Playground