olasz_m
Posts: 2
Joined: Wed May 18, 2022 12:35 pm

Highchart networking graph change mouseOver / setState dynamically

Hi!

I have a directed graph using network graphs and I'm trying to create a graph where users can hover over a node, and the shortest path is "highlighted" from the start node. I want to also add functionality where users can check in a checkbox and a selected path will be highlighted. I've managed to run the breadth-first search(BFS) algorithm on the graph when a user is hovering over a node or selecting a checkbox.

My issue is that I want to remove/disable the BFS event when a checkbox is selected, but to keep the tooltips on the nodes and activate/allow the BFS to run as expected.

I've tried to disable the states (inactive, selected, hover) in the chartOptions, didn't work. I've tried to update each node with the .update() method and redraw the chart, but noticed some weird behaviour, if I hovered over a node, then checked a checkbox, the hovered node kept the events (the other ones were fine) causing to reset the highlight and unselect the checkbox. I've also tried to write a wrapper around the setState function with no success.

I've made a demo that will hopefully clarify what I'm trying to achieve and what my issue is!


TLTR: I want to disable mouseOver and mouseLeave events while keeping the tooltip on the nodes!

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

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highchart networking graph change mouseOver / setState dynamically

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

I suggest you change the logic of showing paths and don't use states of points to change color. You can use a update and graphic.css methods. To check if you have selected one of the checkboxes you can use a custom property e.g. on chart and check the value of it in mouseOver/mouseOut functions. I also suggest you update in setState only necessary options, not the entire chart object, you can read more about it here: https://github.com/highcharts/highchart ... -to-update You can see my suggestion and code in the demo below.

Demo: https://stackblitz.com/edit/react-dudd37
API Reference: https://api.highcharts.com/class-refere ... int#update

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
olasz_m
Posts: 2
Joined: Wed May 18, 2022 12:35 pm

Re: Highchart networking graph change mouseOver / setState dynamically

Hey!

Thanks for the quick response! This is exactly what I was looking for! I think I've overcomplicated it in my head lol, not sure why I didn't think of this!

Thank you!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highchart networking graph change mouseOver / setState dynamically

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”