C3: Not compatible with Touch

[sjunnesson]

It seems that c3js is using " mouse = d3.mouse(this);" everywhere in the code to handle events. This makes touches from mobile devices undetectable. Could a "touch = d3.touch(this); " be implemented in some way to handle this?

[masayuki0812]

Hi, Could you tell me the detail? I'd like to know what kind of functionality do not work.
It seems working on my mobile device and I guess it's simply because the region to detect the action is very small for touching point (it's enough for mouse cursor).
Anyway, if there is a problem for touch device, we should fix it.

[sjunnesson]

i have problem with assigning a "onclick" function for bar charts and get it to trigger. Seems to function on a iPhone in the default browser but trouble on a Android Chrome. The function never fires.

Unfortunately I cant share my example since it is an internal prototype under NDA. Will see if I can recreate it with a fiddle

[masayuki0812]

Thank you for the detail. I'm testing on Nexus 5 and it looks working, so it might a problem about browser version. The code is like:

var chart = c3.generate({
    data: {
        columns: [
            ['sample1', 30, 200, 0, 250, 150, 250],
            ['sample2', 430, 300, 500, 400, 650, 250]
        ],
        onclick: function (d) {
            alert("id =>" + d.id + ", value =>" + d.value);
        },
        type: 'bar'
    }
});

Does it work when we use d3.touch? If so, it would be easier to use d3.touch than some workaround.

[aendrew]

I can't replicate the issue on my Nexus 4 running Lollipop:

http://embed.plnkr.co/YZeUHJRTmMktM9D04ZUc/preview

Though I am having some issues getting it to propagate back through the directive in Angular (though it's possible I'm just doing it wrong). Perchance are you using AngularJS?

[Roywcm]

Onclick is not working on IOS touch devices. http://jsfiddle.net/3g7jm4g2/
A test on an Android device is working.

[nillotrejos]

data.onclick is working on Android devices but is not responding on iOS devices.
When clicking on iOS, the tooltip displays, but onclick callback is never triggered.

[nillotrejos]

I kept looking at the code and playing with the graphs in iOS simulator and noticed that if you set the tooltip to false, the data.onclick callback works as expected on iOS.

http://codepen.io/nillotrejos/pen/jEXNLR

[akoinesjr]

I had the same issue on an iPhone 4S and was able to "fix" it by removing the tooltip as suggested by @nillotrejos.

[jamesgarfield]

I'm having a similar experience with iOS TouchEvent clicks not working.

By adding some logs to the event handlers I can see that on desktop and Android a Touch produces the following events in this order from the "generateEventRectsForSingleX" series of events

• MouseOver
• MouseMove (triggers tooltip)
• Click

However, on iOS devices, the only events that are produced are

• MouseOver
• MouseMove (triggers tooltip)

I have _not_ unilaterally had the same success with fixing this by disabling tooltips (nor is that really an option in our case)

[mcarey1590]

has anyone found a fix for this. On safari(iOS) when i tap on a data point it shows the tooltip, but it does not fire the onclick event. On chrome(Android) when i tap on a data point it works as expected and fires the onclick event, but there is no way to view the tooltip unless you have a device that supports hover events

[jamesgarfield]

@mcarey1590 I have a PR out about this that worked for us. It was a long time ago, so I don't know how it aligns with the current code base, but it should at least provide a starting point for you.

https://github.com/masayuki0812/c3/pull/1206

[mcarey1590]

Thanks I will look into it

[eljog]

Hi,

I'm using C3 js in my Cordova Hybrid app. I have multple charts on the screen, so the user is supposed to scroll.
The chart works well in android but the scrolling is not smooth in iphone. Tested on iPhone 6.
Kindly help me if there is any tip make the scrolling smooth in iPhone.

Thanks,
Eljo

[Suffren]

The problem still exists: Unable to trigger the onclick function on iPads and Iphones.
It seems to come from safari, see below:
(https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)

It would be enough to add cursor: pointer on the concerned element to trigger the event but the function "c3_chart_internal_fn.generateEventRectsForSingleX" changes the style from behind. Any updates ?

Also, a workaround could be to use ... two fingers (right click on iOs devices).

[fedegiust]

I kept looking at the code and playing with the graphs in iOS simulator and noticed that if you set the tooltip to false, the data.onclick callback works as expected on iOS.

http://codepen.io/nillotrejos/pen/jEXNLR

Works disabling the tooltip! Thanks

[cdomergue]

No news ? I still have the problem