apexcharts / apexcharts.js

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

pan and zoom unavailable on touch devices #4701

Open SimonMayer opened 2 months ago

SimonMayer commented 2 months ago

Despite being possible to zoom by toolbar buttons on a touch device, there does not appear to be a way to control where that zoom is applied. Specifically, because pan and the "dragging selection" zoom are disabled on touch devices, zoom can only ever zone in on the middle of the visible part of the x-axis.

This has been reported on https://github.com/apexcharts/apexcharts.js/issues/1065 — but that issue appears to have been closed before sufficient detail came to light.

Steps to Reproduce

  1. Use a touch device (or Chrome's dev tools to simulate a touch device)
  2. Load a chart, with toolbar and all buttons enabled (observed with line and area charts)
  3. Click zoom in toolbar button

Expected Behavior

Zooms in, and it is possible to pan right or left, to see a particular part of the x axis at larger scale Alternatively, a more controlled zoom is possible with the "dragging selection" zoom button

or as an absolute minimum, consider whether zoom is even supported on touch devices, and update the documentation to make explicit, the behaviour of zoom and pan on touch devices.

Actual Behavior

Zooms in, but panning is not possible

Note: If your first action is to zoom out, it can sometimes weirdly zoom you in and off-centre. See codepen example. I suspect that's unrelated, and perhaps even a separate bug, but given that it moves the view off-centre, I thought I'd warn about it as a risk of confusion.

Screenshots

Default zoom

Default zoom

After zoom in from the default zoom

After zoom in from the default zoom

After zoom out from the default zoom

After zoom out from the default zoom

Reproduction Link

https://codepen.io/20240913/full/PorgVpP

Kwaadpepper commented 1 month ago

I also noticed this issue, tested on firefox and chrome using my phone and using my laptop with dev console enabled.