Enable touch scrolling on mobile
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
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.
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 (
tapToActivateanddragGrip) -
Observable Plot appears to have the same issue as LayerChart if we removed
touch-none(scrubbing through points on mobile)