ResponsiveLine is not interactive on mobile

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.

[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]

@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