finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

HighchartsReact mouseout event not triggering after chart's data updates

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.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HighchartsReact mouseout event not triggering after chart's data updates

Hello finction,

Welcome to our forum and thanks for contacting us with your question!

Thanks for that elaborated explanation but the problem is simpler than you might have thought. Your property path to mouseOut event is incorrect. mouseOut event doesn't exist on series.events, you should have used series.point.events.mouseout instead.
Demo: https://stackblitz.com/edit/react-ts-rn ... tChart.tsx

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
finction
Posts: 7
Joined: Wed Oct 20, 2021 11:27 am

Re: HighchartsReact mouseout event not triggering after chart's data updates

mateusz.b wrote: Fri Oct 22, 2021 1:05 pm Hello finction,

Welcome to our forum and thanks for contacting us with your question!

Thanks for that elaborated explanation but the problem is simpler than you might have thought. Your property path to mouseOut event is incorrect. mouseOut event doesn't exist on series.events, you should have used series.point.events.mouseout instead.
Demo: https://stackblitz.com/edit/react-ts-rn ... tChart.tsx

Let me know if that was what you were looking for!
Best regards!
mouseOut does exist on series.events. Note that I am using typescript.
Here is the path from the docs:
https://api.highcharts.com/highcharts/p ... s.mouseOut

Here is an example of it working:
https://jsfiddle.net/gh/get/library/pur ... no-sticky/


Even if it didn't exist, the updated code playground you provided isn't firing the points' mouseOut event correctly. The mouseOut event should trigger when you move the cursor from a point on the inner donut into the center of the donut, but it doesnt. It should also fire when the cursor moves from a point on the outer donut to the white area, but it doesnt. It fires when you completely exit the plot area.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HighchartsReact mouseout event not triggering after chart's data updates

Hi finction,

You're completely right, mouseOut/Over exist on series, I just thought (because of that fragment: When pieces of the donut are hovered...) that chart should be updated when specific slice of pie is hovered. Thats why I suggested that you made mistake and mouseOut point event doesn't exist on series level. Sorry for that.

When it comes to the problem itself, frankly speaking I'm not able to get through your updating logic, it would be great if you could try to simplify your demo so that it shows only the essence of the issue. If I understood correctly the series' mouseOut event is not working after chart update. I've tried to reproduce something like that but everything seems to work as intented.

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

Thanks in advance for demo and any additional details.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”