Scroll issue with multiple charts on a page (non-zoomable charts eating scroll events)

[ndrake]

I have a screen with multiple Chartjs charts on it. Only one of the charts has zooming/panning enabled. On mobile devices, I'm not able to scroll the page content when my finger is on any of the charts. I was hoping only the zoomable chart would eat scroll events.

I think HammerJS is the culprit, if I don't include it, scrolling is fine (although I can't zoom/pan on mobile).

Here is a CodePen illustrating it:

https://codepen.io/natedrake/pen/LYYzgxb

You can best view the issue by going to the "Full" view on a mobile browser. Notice you can scroll the page on the text content, but on the bottom two charts no scrolling happens.

Consider this issue a feature request or bug report. :) I'm not sure which. Thanks!

[energy-savesystem]

Me too. two charts on the screen only on the last one i see scroll events

[jledentu]

@ndrake Your CodePen actually uses Chart.Zoom.js, not chartjs-plugin-zoom. I guess that this package name was used before, and corresponds to old versions of this plugin.

With https://cdn.jsdelivr.net/npm/[email protected], it works!

I'm closing this issue for now. @energy-savesystem please reopen with a reproducible example if you meet an issue with the current version of chartjs-plugin-zoom. ;)

[energy-savesystem]

Hi I attach the example, I simply ingest json data from a webservice and then try to represent them on two charts The first one doesn’t work The second one works but cannot zoom into it Thank you very much for your time Nicola Da: Jérémie Ledentu <[email protected]> Inviato: martedì 12 novembre 2019 13:48 A: chartjs/chartjs-plugin-zoom <[email protected]> Cc: Nicola ESS <[email protected]>; Mention <[email protected]> Oggetto: Re: [chartjs/chartjs-plugin-zoom] Scroll issue with multiple charts on a page (non-zoomable charts eating scroll events) (#289) @ndrake<https://github.com/ndrake> Your CodePen actually uses Chart.Zoom.js<https://www.npmjs.com/package/Chart.Zoom.js>, not chartjs-plugin-zoom<https://www.npmjs.com/package/chartjs-plugin-zoom>. I guess that this package name was used before, and corresponds to old versions of this plugin. With https://cdn.jsdelivr.net/npm/[email protected], it works! I'm closing this issue for now. @energy-savesystem<https://github.com/energy-savesystem> please reopen with a reproducible example if you meet an issue with the current version of chartjs-plugin-zoom. ;) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#289?email_source=notifications&email_token=ANWL6F3CIZK6H6WDFJPYD4DQTKQWNA5CNFSM4JG2YHI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED2EGQI#issuecomment-552878913>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANWL6F36KBDUIPFTYCOQ2RLQTKQWNANCNFSM4JG2YHIQ>.

[ndrake]

@jledentu Thanks for the update. I just updated the codepen to use the latest version of the zoom plugin (0.7.5) and I'm still seeing the behavior I described in my original post.

[jledentu]

@ndrake Mmh you're right, I tested again on my phone and the issue still appears. I'll get a look and try to find a fix.

[jledentu]

I think we should add pinch and pan recognizers in the Hammer manager only when pan and/or zoom are enabled.

[jacopotediosi]

I have the same problem. I noticed chartjs-plugin-zoom adds "touch-action: none;" to the style attribute of all canvas even for charts that don't implement zoom plugin.