react-apexcharts
react-apexcharts copied to clipboard
Unexpected behavior when zooming in timeseries
Dear devs,
I think I've found an issue with zooming on charts where type = 'datetime'. If the chart has 2 entries in series data, then zooming on any part of rendered chart works as expected - if user zooms into part of graph that has no data, then x axis scale is zoomed in as expected. Now if the series data has more than 2 entries, unexpected things happen when user zooms in between data points.
Please check out this example of the issue I created in codepen - https://codepen.io/m33lis/pen/ExwPvax . When you click the button labelled '2 events' and then try to zoom in the chart between or after or before the events, all is good. Now if you click on '3 events' button and try to zoom in on 15:00 - 19:00, the chart disappears and you get an error in console:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')
at t2.value (apexcharts.common.js:1153)
at t2.value (apexcharts.common.js:1180)
at t2.value (apexcharts.common.js:1277)
at t2.value (apexcharts.common.js:1227)
at t2.value (apexcharts.common.js:1562)
at t2.value (apexcharts.common.js:1550)
at t2.value (apexcharts.common.js:5612)
at t2.value (apexcharts.common.js:7570)
at t2.create (apexcharts.common.js:148)
at apexcharts.common.js:7635
Have I configured the chart wrong? Is this somehow expected behavior? How could I work around this issue? Any and all help is appreciated.
I'm getting the same issue - cannot ready property x of undefined when trying to zoom the x axis by clicking and highlighting a portion. The whole chart disappears. If I fill in a couple manual and hard coded values for series it sometimes works. Using hooks/functional component in React. Any solutions? @m33lis