Nivo: Custom Symbol Hover Effects

[karenqinn]

Hi!

I was wondering if there was any feature available that would provide effects on hover for custom point symbols. I used a pointSymbol using a svg and I would love to have it expand and add text on mouse over

Thanks!
Karen

[ginnyedelstein]

This would be very helpful for me as well! I tried creating a hover effect on an svg seperately which works but when i try to put the same hover effect on my custom point symbol's svg, it doesn't render the hover effecg

[Boeing787]

Also seconding this, would be very helpful

[renderlife]

Yes a very necessary feature

[jmahabal]

I got around this by using hooks and onMouseMove. In pseudocode,

[id, setId] = useState()
<ResponsiveLine
    ...
    pointSymbol={data => {
        if (data.datum.id === id) { 
            return <circle r=10 />
        } else {
            return <circle r=5 />
        }
    }}
    onMouseMove={d => if (id !== d.data.id) { setId(d.data.id) }}
    onMouseLeave={d => setId()}
    ...
/>

I'd love to know if there's a better / more performant way! I haven't gotten css transitions to work with this due to re-renders, however. It'd be great to figure that out too!

[wyze]

You can try a ref instead to avoid the re-renders, but not sure how you would use that with css transitions.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!