Annotations overflow onto y-axis

[jenniarg21]

Description

I created a timeline chart with a date range slider however I found a bug. My timeline chart has annotations and goal lines. I'm using the zoomX() method on the range slider to adjust the zoom bounds. Whenever the annotations and/or goal lines are outside of the starting zoomX() minimum value, they will overflow and overlap the y-axis labels (if it passes the width of the y-axis labels, it will not show as is intended). I tested this out in a line chart and it work as intended; my assumption is that this only occurs when the x-axis is of type 'datetime'.

Steps to Reproduce

1. Add an annotation or goal on a timeline chart.
2. Use the zoomX() method to zoom in to the chart so that the annotation/goal line is no longer within the minimum bounds of the zoom.

Expected Behavior

Annotations and goals should not be visible when they are over the minimum zoom x-axis value.

Actual Behavior

Annotations and goals are visible and overlap the y-axis labels.

Screenshots

Reproduction Link

Here's a codepen with simplified code showing the bug:
https://codepen.io/jenniarg21/pen/mdMLpjX

[mrdannyjohnson]

Hey @jenniarg21, I'm experiencing the same issue, with point annotations visible outside the bounds of the chart. Did you manage to resolve it?

[jenniarg21]

Hey @mrdannyjohnson, unfortunately not 😕 If you find any resolutions, please do share!

[jenniarg21]

I looked into SVG masking but that didn't work out completely--SVG is new to me, but what crashed the code was when the graph was refreshed.

Anyone have any luck in a solution for this?