Add opacity for hover color

[vishalpawar048]

Hi,

I am trying to add opacity on the hover color but it seems not working. I tried to provide hex color + opacity ("#CDCDCD60") still no luck.

https://stackblitz.com/edit/react-npfup8?file=index.js

Could you please help?

Thanks.

[jakub.j]

Thanks for contacting us!

You can use RGBA as fillColor value with any opacity you want as a last value. I converted your hex color to rgba.
Check out the demo: https://stackblitz.com/edit/react-71jzy1?file=index.js

Feel free to ask any further questions!

[vishalpawar048]

Hi Jakub,

I can't see any transparent opacity in the above example.

We want to implement a hover effect with the given color "rgba(205, 205, 205, 0.6)", with some transparency so that the user has some idea about the underlying color of the cell while he is hovering.

[jakub.j]

Hey vishalpawar048!

Now I get your point, I created a custom solution to add overlay with the color and opacity you wanted on the point when hovering on it.
I used SVGRenderer on point.eevents.mouseOver to achieve that.

Demo: https://stackblitz.com/edit/react-p3h3ua?file=index.js

Let me know if that was what you were looking for!

Regards
Jakub