Touch device interactions

[brian-patrick-3]

Hello.

I noticed when using this plugin, and I interact with the charts on a touch device, charts which support this plugin prevent scrolling of the page on swipe of the canvas area. Additionally, I'm unable to tap the legend items to toggle datasets on and off. It seems any sort of touch action becomes disabled on the canvas. I'm wondering if there's a way to allow this. I'm not sure whether it's a result of this plugin or Chart2Music itself, and I was unable top find anything in the docs.

Thanks!

[julianna-langston]

Thanks for reaching out! I'm going to break this issue out into 2 separate items:

• [x] Touch interaction issues on canvas elements
• [x] Interacting with legend items

I'll get back to you in a bit about both of these items

[julianna-langston]

I believe that we have fixed the issue where touch interactions on the canvas are intercepted, effective in v0.1.2. Here is an example on CodePen that demonstrates the change.

I'll follow up on the second item soon.

[brian-patrick-3]

Hey thanks for the update! I tried the new version, as well as your CodePen example, but am still unable to scroll the page when touching the canvas area in both instances (Firefox/Android). I can interact with datapoints only, kinda like a focus trap.

[julianna-langston]

Ok, I believe I've fixed it in v0.1.3. On my end, I'm able to scroll the page and interact with legends on a phone. Can you try again? If it still doesn't work, please let me know the userAgent of the device you're testing on.

Here's a CodePen with the plugin and multiple legend items: https://codepen.io/chart2music/pen/ExebYqw?editors=0010

[brian-patrick-3]

I do seem to be able to scroll the page now by touching the chart, however I am seeing an error in the browser console that happens on load, or when tapping the legend items: Uncaught TypeError: can't access property "slice", ref._groups is undefined. chartjs-plugin-chart2music.js:358:20 Noticed on Firefox and Chrome desktop in responsive design mode.

And actually, the CodePen isn't even loading in Chrome desktop: Uncaught TypeError: Cannot destructure property 'c2m' of 'chartStates.get(...)' as it is undefined. chartjs-plugin-chart2music.js:354

[julianna-langston]

@brian-patrick-3 Sorry for the late update, this was a very weird experience in CodePen.

When you go to https://codepen.io/chart2music/pen/ExebYqw?editors=1010 with the editors open, there are no errors. However, if you go in full mode, you get the error above. I'm not sure why. I've struggled with chartjs and codepen in the past, and reached out to some of the chartjs maintainers to see if they're familiar with the issue (I could somewhat repro the issue with other plugins, like annotation), but I haven't heard back yet.

Either way, I hope you will be able to see the solution in the pen with editor mode on.

If you're continuing to see error messages with your own local builds, please let me know, along with the config you're using for your charts.

[brian-patrick-3]

I actually get the console errors on the CodePen whether in full page view or editor view. Here's a screenshot from after clicking legend item in Firefox responsive design mode:

[spmealin]

@julianna-langston , just following-up with this. Have you been able to determine if this is a problem on our end or CodePen’s end, and what are the circumstances that trigger the error?

[julianna-langston]

@spmealin This issue occurs within the chart.js plugin infrastructure under the following environemtn:

1. In codepen (can't repro it locally)
2. In Firefox (can't repro in Chrome)
3. While emulating a mobile device (can't repro outside of emulation mode)

I've had issues with the chart.js plugin infrastructure in codepen in the past. Unfortunately, all of chart.js examples I could find in codepen use a previous major version of chart.js. I've reached out to the chart.js maintainers on discord to see if they have recommendations for the best setup with codepen, but I haven't gotten a response.