search

apexcharts / apexcharts.js

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

Annotations overflow onto y-axis #2757

Closed jenniarg21 closed 8 months ago

jenniarg21 commented 3 years ago

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

image

Reproduction Link

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

mrdannyjohnson commented 2 years ago

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 commented 2 years ago

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

jenniarg21 commented 2 years ago

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?