Demo:
https://stackblitz.com/edit/react-ts-xa ... tChart.tsx
Brief explanation:
I have some peculiar highlighting logic in my app which basically works like this:
- I get input from components in my project
- Run logic on which slices of the donut I need to highlight.
- Pass this info to the donut
- When pieces of the donut are hovered, that also triggers the same highlighting logic. Thats why my demo's chart sends the hoveredItem to the parent component so that the parent can decide which pieces to highlight. The donut is then redrawn with the data with new colors.
Problem:
1. The donut passes the hovered item to the parent (on mouseOver)
2. Parent decides what needs to be highlighted in the donut (recreate donuts data with new colors)
3. Donut chart redraws itself with the new data
4. My mouse is still on the same piece of the donut.
5. When I move my mouse out of the current piece, mouseOut should trigger.
-- > mouseOut does not trigger though
Things to note:
- When testing out the demo, you'll know that mouseOut worked if none of the slices have transparency and "Data was reset" is console logged.
- If I move my mouse fast enough over the pieces of the donut, mouseOut sometimes triggers. It seems like it works if it gets to do it before updating the chart with the latest data
- I came up with a workaround (which is commented out in my demo's donut's useEffect) which adds a mouseleave event listener to the whole chart container. It works, but if I try to add a mouseleave listener to the chart's series[0] and series[1], the event never triggers. Adding a click event listener to the series works though.
How can I get proper and consistent mouseout behaviour? This is making me crazy.