ondragstart and ondragend callbacks prevent scrolling on touch devices

[sandrolino]

I noticed that c3js graphs disable somewhat scrolling on touch devices, probably due to their interactivity.
Disabling Tooltip still results in interactivity when hovering over data points.
Is there away to completely disable hovering over data points (i.e an svg) such that scrolling works on c3js graph works also on touch devices ?

Thanks for your help.
s

[masayuki0812]

Hi @sandrolino , I'll check this. Please give me some time.

[masayuki0812]

Hi @sandrolino , I added interaction.enabled option. By setting false, it is possible to disable all of interactions on chart and enables to scroll on touch device. Could you try this option?

The latest version 0.1.37 does not include this commit, so please use the latest code from github repository.

[masayuki0812]

Hi @sandrolino , I updated the version to 0.1.38 that includes this commit. Please try this solution on that version. Thank you.

[adrianbj]

Hi there,

interaction: {
    enabled: false
}

works for me as far as making scrolling on touch devices work, but I'm afraid I really don't see it as a good enough solution for my needs as I need to keep the interaction functional. I know this is a tricky problem to deal with, but there are some scripts out there that are designed to detect tap vs swipe. At a minimum, I think the interaction.enabled option needs the possibility to ignore on non-touch devices. The other thing I noticed is that with it set to false, the c3-event-rect-x items are not created. I interact with these programmatically, so removing completely makes interaction.enabeled: false not an option unfortunately.

Thanks for considering :)

[moklick]

It would be very helpful if you could add something like swipe detection. By doing this we could interact with the charts even on mobile devices. Right now we have project where we have several charts in an article. Users can't scroll on the charts, so we have to disable interaction which is sad, because interaction works great on mobile devices.

[aendra-rininsland]

I started a new issue about this recently (since closed) due to having not noticed this one. I'm moving discussion to this thread (and reopening) because there's been more work done here.

Important point from #798: the problem is in the ondragstart and ondragend callbacks. Disabling those on ln. 233 in interaction.js fixes the scrolling issue while preserving interactivity.

[moklick]

@Aendrew wow!! thanks you very much. commenting out these lines fixes the problem for us. awesome!

[aendra-rininsland]

@masayuki0812 Any update on removing those callbacks? Would it help if I did a PR?

I'm currently integrating axisJS into a Node app that allows C3 charts to be used really effortlessly in news stories; however, it totally causes issues on the iPad due to this issue. I can run off a fork for the moment, but it'd be really nice to be able to get that into core...

[masayuki0812]

I added data.selection.draggable option that enables dragging to select the points. The default of this option is false and then drag interaction will not be added to the chart, so it means we can scroll even if it's on the chart as default.
On the other hand, if we want dragging for data selection, we need to set this option true, but I think it's acceptable because the use case seems not much and the scrolling is more important as default interaction.
I believe this fix works for this issue and I'll release the fix in the next version v0.4.9 shortly.

[masayuki0812]

v0.4.9 has been released, so please let me close.

[aendra-rininsland]

Yay! 👍 Nicely done, @masayuki0812!

[aendra-rininsland]

Adding documentation tag re: data.selection.draggable.

[moklick]

nice! thanks @masayuki0812

[subu28]

This issue seems to be persist while using multiple axis using data.xs.

can be checked at http://c3js.org/samples/simple_xy_multiple.html

[bibounet]

@subu28 same issue for me (using data.xs)