Allow normal touch scroll when pan.mode = 'x'

[NicolasGoeddel]

Hi,

when viewing graphs on a small touch screen like on a smartphone with pan.mode set to x, the canvas always grabs the up-down scroll events even though it should only react on left-right swipes.

Can this be configured?

[ttakuru88]

Try add this code after here.

mc.set({touchAction: 'pan-y'})

[gombeedoe]

I solved it by overwriting touch-action: none; with touch-action: pan-y;. touch-action: none; is inline style that is added to canvas element.

const myChart = new Chart(ctx, {
  ...
});
// add for overwrite inline style.
myChart.canvas.style.touchAction = "pan-y";

It's not a radical solution, but so far it has met the demands. Please open the link below on your smartphone and give it a try.

https://56hhd.csb.app/

I used vue.js, but I'll include sample code just in case.

https://codesandbox.io/s/chartjs-plugin-zoom-touch-scroll-y-56hhd?file=/src/components/ChartLine.vue

[mano3m]

Both solutions mess up the tooltip functionality and hiding series through the legend. Any idea how to also fix those while keeping vertical scrolling?