chrispahm
commented
2 years ago Hey @usernotnull,
that's a tough one indeed. An (unresolved) discussion around this also evolved as part of #20 (specifically https://github.com/chrispahm/chartjs-plugin-dragdata/issues/20#issuecomment-801571515).
On touch devices, the Chart.js canvas element receives the inline style touch-action: none;, prohibiting any scroll behaviour. I made a small codepen to illustrate the issue:
https://codepen.io/chrispahm-the-animator/full/OJOMNxm
You can manually overwrite the touch-action: none; e.g. using myChart.canvas.style.touchAction = "pan-y"; (see https://github.com/chartjs/chartjs-plugin-zoom/issues/336). Now both scrolling and data dragging is enabled, but you'll notice that while dragging a point vertically, the site is also scrolled a little, IMHO not a good UX.
A compromise could be to set the touch-action to pan-y. but also disable the drag-data plugin as a default. If a user intents to change the charts values, there could be "Edit data" button that when clicked, both enables the drag-data plugin, but also sets the touch-action back to none.
usernotnull
I encounter an issue when adding drag to chart which fill the whole mobile screen. I have a radar chart that fills 3/4 of the mobile screen, and the labels filling the other 1/4.
I'm expecting the chart not to consume the drag event if the user is scrolling on the screen (away from the points but within the chart canvas). Currently, if the user wants to scroll down, he cannot. When he drags down from either the left or right of the points (so basically touching the labels of the chart aside from the points), nothing happens.
My temporary workaround is to make the chart short enough for him to realize that scrolling from the sides won't work and he'll have to scroll from below the chart. (kinda sucks from a UX POV).
Is there any workaround for this issue?
Thanks for your contribution and great plugin.