apexcharts / apexcharts.js

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

Zoom is broken if x-axis range is set #4423

Open technyon opened 2 months ago

technyon commented 2 months ago

Description

For a line chart, if the x-axis range is set, zoom only moves the view but doesn't zoom in.

Steps to Reproduce

Expected Behavior

The zoom works as expected

Actual Behavior

The chart just shifts it's position, but doesn't zoom in

Screenshots

See codepen below for a demo

Reproduction Link

Click

rosco54 commented 2 months ago

Could you elaborate on what you expect the behaviour to be? For example,, xaxis.range is an option used in charts where series data updates dynamically, so do you expect:

  1. the zoom to freeze all chart movement until you restore to the initial zoom or pan?
  2. the zoom to change the xaxis.range value as the series data continues to update and the chart continues scrolling?
  3. a different behaviour to either of these?

My intuition suggests (1) is normal but can also see a use for (2) if the zoom range includes the last data point.

technyon commented 2 months ago

Hi,

Yes sorry it should have been more clear. I do indeed set the range because my chart is updating continuously. I'd go with 1. because at this point the user most likely wants to inspect some specific data in more detail. I'd say is almost the current behavior already: The chart already stops updating and pans to a new position when trying to zoom. I think the only thing missing would be to ignore the range setting as the chart is zoomed in.

When the user is done inspecting the data, the home button can be used to go back to "normal" operation, scrolling the dynamically incoming data.