Nivo: ResponsiveLine is not interactive on mobile

[iliyanyotov]

The ResponsiveLine chart component is not interactive on iOS devices. Working fine on Samsung S8, S9 and OpenPlus 5, but not on iPhone 6 and 7.

The flag for interactivity (isInteractive) is set to true by default and the chart doesn't have any customizations.

The tooltip shows and the chart is interactive on Samsung S8.

[milasevicius]

@plouc Maybe you could give some insight how to fix it? I would like to make a PR. Other charts works fine on iOS

[plouc]

@milasevicius, sorry but I have no idea where this could come from, did you had any errors?

[milasevicius]

@plouc, I inspected iOS safari but no errors show up. It does work on android, but line chart / heatmap chart tooltips doesnt work on ios chrome / safari. (Bar chart and pie chart tooltips works).

[milasevicius]

@plouch also, if i select inspect element and click on line chart in ios simulator, tooltip shows up. So my long shot guess would be that it registers touch events differently

[iliyanyotov]

Thanks for the replies. I can't see any errors as well when debugging this @milasevicius. For example, BarChart ones are displaying as expected.

[martin-kieliszek]

iPhone 6S accessing charts on webpage using @nivo/line with isInteractive={true} likewise presents no tooltip or interactivity on touch.

This is in contrast to using a mouse with devtools set to iPhone 6 - where tooltips work as expected

Any ideas on how a user may obtain tooltips in another manner if no touch capability exists right now?

Thanks all

[martin-kieliszek]

I've managed to modify the library locally to enable tooltips to work for iPhones

Tested on iPhone 8S - confirmed didn't work before, worked after
Tested on iPhone 6S - confirmed didn't work before, worked after
Tested on iPad Mini - confirmed didn't work before, worked after

Is it possible for you to review @plouc ? (edit: sorry for errant tag @iliyanyotov)
Appears to be very quick fix that I'm sure a large contingent of users would like to see - especially those that may not have known their line graph tooltips aren't working on some iPhones.

I simply added onClick: showTooltip, to the LineSlicesItem element :

nivo-line-umd.js line 227
nivo-line-esm.js line 226
nivo-line-cjs.js line 233

Example:

React.createElement("rect", {
    x: -20,
    width: 40,
    height: height,
    fill: "#F00",
    fillOpacity: 0,
    onMouseEnter: showTooltip,
    onMouseMove: showTooltip,
    onMouseLeave: hideTooltip,
    onClick: showTooltip,    <---------------------- Added 
  }));

Please feel free to improve further if you can think of other use cases or if issues are discovered.

I look forward to your response and potential push

Edit:
Do you have any thoughts on this @plouc ? Am excited to see what your thoughts are

[alan345]

Hi @martin-kieliszek have you make it worked? Maybe you can share a forked repo?
I have the same issue..

[alan345]

Hello @plouc,
Can you please look at this small change recommended by @martin-kieliszek ?
Now, it is not working on Iphone because of this issue
Thanks!

[alan345]

@martin-kieliszek, Do you know what should be changed in the code not compiled here https://github.com/plouc/nivo/tree/master/packages/line ?

So we can fork, and create a PR for this issue?
Thanks