Changing color and line properties when hovering

[ami-rashid]

Hi everyone,

I'm sorry if this is a duplicate post, but I'm not sure if this is currently possible. I'd like for a line to change its thickness and color when hovering over it, and then reset to its original properties when leaving. I tried to use onMouseEnter and onMouseLeave, but these seem to trigger when I enter/leave the entire chart, not a single line. They also don't change the color for me.

I can see log out the color properties of individual lines using tooltip, but I can't use this to change line properties.

Is there a way to do this?

[wyze]

Here you go. You will need to reimplement the lines layer and move it down in the layers so it is in front of slices. https://codesandbox.io/s/naughty-sea-ith41?file=/src/App.tsx:1108-1134

[ami-rashid]

Thanks so much! I'll try this out.

[ami-rashid]

Hi, I'm struggling to follow what's going on in the code. Do we have to create a new line component, or can this work off the lines in ResponsiveLive? Is animatedPath required?

Sorry for being a bother, but would you be able to implement the hover feature with a basic line in this sandbox?
https://codesandbox.io/s/flamboyant-cookies-inl90 (edit: fixed link to sandbox)

[ami-rashid]

I suppose a broader question I have is, can chart properties like color and lineWidth be manipulated after the chart has rendered with onMouseEnter and onMouseLeave?

[tkonopka]

Hi @ami-rashid and hi @wyze and @plouc. The answer by @wyze here addresses the original question, but it would be time-consuming to get the custom layer approach to reproduce all the features as the nivo/line. Do you think this topic might be relevant for more broad implementation so that it could work out-of-the-box, also across the other packages?

More specifically, I'm thinking of the current heatmap component, which has highlighting controlled via props opacity, activeOpacity, and inactiveOpacity. It looks quite dynamic. The same strategy could work for other components. Line would be a good use case. Scatterplot too. Would you be interested to support that?

[Gnoot01]

Hi, I agree with @tkonopka , @plouc please consider