Nivo: Styling bars/slices on events

[igor-pavlichenko]

Is there a way of styling the bars/slices of a chart on hover? let's say change the opacity or color of the hovered bar/slice?

I'm sure that I could put the colors array in my state and change them on hover and make the chart rerender, but what I'm looking for is something more CSS-ish.

[plouc]

@igor-pavlichenko, I've added support for effects on legends, I think the same approach could be used for this (so not supported for now), however a CSS-ish approach isn't really an option as it won't work with canvas implementation.

[plouc]

You should now be able to do this thanks to this PR

[vcolavin]

If anyone else is like me and looking for specific examples on how to achieve this with the mouseEnter and mouseLeave events, here's what worked for me:

<Bar
  {...otherProps}
  onMouseEnter={(_data, event) => {
    event.target.style.fill = '#FF00FF';
  }},
  onMouseLeave={(_data, event) => {
    event.target.style.fill = originalColor;
  }}
/>

[lipsumar]

thanks @vcolavin !

@plouc please consider adding this to the doc!

[vcolavin]

@lipsumar You're welcome!

Because it's a very simple example, would you consider making a PR for it yourself?

[plouc]

Thank you for this example, please note that this approach only works for the SVG implementation though. Could be interesting to add this to the storybook.