layerchart icon indicating copy to clipboard operation
layerchart copied to clipboard

Enable touch scrolling on mobile

Open techniq opened this issue 1 year ago • 2 comments

Need to identify a solution to allow scrolling but also tooltip support on mobile/touch.

After migrating to pointer events (#144, #152), touch scrolling no longer works while over a chart. This is mostly due to touch-none class being applied in TooltipContext, but need to also check usage of setPointerCapture() and stopPropagation(), and preventDefault()

See also: #82

techniq avatar Oct 11 '24 13:10 techniq

an over reaching on:touchmove={e => e.preventDefault()} in TransformContext when not active was part of the problem, and fixed in the upcoming PR #252.

If we remove touch-none within TooltipContext this will re-active scrolling, but then you can no longer "scrub across" to view tooltip values on mobile.

Need to come up solution (at least way to opt-in/out of) and would like to research how other libraries handle this interaction.

techniq avatar Oct 11 '24 13:10 techniq

Other library examples

  • ECharts appears to handle this from some testing (although testing in devtool with touch simulation doesn't work the same as on device). ECharts is mostly <canvas> based
  • ChartJS appears to handle this as well (also <canvas> based
  • Looks like FusionCharts and Syncfusion had similar issues
  • amCharts 4 had various modes you could enable (tapToActivate and dragGrip)
  • Observable Plot appears to have the same issue as LayerChart if we removed touch-none (scrubbing through points on mobile)

techniq avatar Oct 11 '24 17:10 techniq