react-sparklines
react-sparklines copied to clipboard
Tooltip improvements
- I tried to use
onMouseMoveprop onSparklinesLinecomponent but found it very hard to hit tiny circles that it generates
return (
<circle
key={i}
cx={p.x}
cy={p.y}
r={2}
style={fillStyle}
onMouseEnter={e => onMouseMove('enter', data[i], p)}
onClick={e => onMouseMove('click', data[i], p)}
/>
);
How do you think users should snipe those 2px circles whit a cursor? I think microscopic hardcoded circles are not the best way to trigger tooltip callback, how about rendering transparent rectangles over the chart?
-
The callback function does not return the index of the hovered point, which could be very handy if you want to render a custom tooltip and display more data.
-
There is a bug if you set
fillto none inSparklinesLinestyle the callback function never gets triggered.
I can implement and fix all that stuff if you let me
@Fxlr8 Hey, can you post a snippet of how you used onMouseMove? I'm having trouble understanding how to use it, the docs don't have information for it. Thanks!
Hi, can you post snippet for showTooltip ? onMouseMove