How to dynamically change mouse event functions in Highchart?

Question

I'm using Highchart networkgraph for a directed graph.

I want the users to be able to on node hover highlight the shortest path from the start node. I also have some checkboxes that would highlight the shortest node from start to the specified node. I've managed to do it. but the bit I'm having some issue with is that upon selecting a checkbox I want to 'disable' the BFS algorithm, keeping the highlighted path and letting the user explore the nodes (each node has a tooltip popup as well on hover)

I've made a small demo that showcases my issue. Demo

I've tried to disable all states (inactive, hover, selected) and update each marker with the node.update() method, but without success. I've also tried to change the point.events in the chartOptions state to undefined or to another function, but then the default states interfere with the functionality. I've ran out of ideas.

Thanks in advance.

score 0 · Answer 1 · answered May 19 '22 at 14:59

For disabled all state you can use enableMouseTracking: false, which will turn off all states. https://api.highcharts.com/highcharts/plotOptions.networkgraph.enableMouseTracking

  const updateSeries = () => {
    setChartOptions({
      series: [
        { 
          enableMouseTracking: false,
          data: [Math.random() * 5, 2, 1] 
        },
        { 
          data: [Math.random() * 5, 2, 1] 
        },
      ]
    });
  };

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

Another option would be to add an event in series, events.mouseOut, events.mouseOver, and there change the state of the marker to visible or not.

https://jsfiddle.net/BlackLabel/shxo8Lj6/

How to dynamically change mouse event functions in Highchart?

1 Answers1