Highcharts networkgraph datalabels on hover

Question

there!

I have a networkgraph built on highcharts and I need the datalabels to start turned of for some of the points. Then, I want to turn them on whenever user hovers a connected point. For this image, for example, on hovering "Rio de Janeiro", all the 5 points connected to it should have their datalabels on.

Any ideas on how to do this?

Thanks

Answer 1

You have provided no code I can only explain what could be done. We can for example, we listen when user mouseOver's our series and we then turn dataLabels enabled for that series and it's children. Everything else get dataLabels disabled

series: {
            stickyTracking: true,
            events: {
                mouseOver: function () {
                  var hoverSeries = this;                                      

                  this.chart.series.forEach(function(s){
                    if(s != hoverSeries) {
                      // Turn off other series labels
                      s.update({ 
                        dataLabels: {
                          enabled: false
                        }
                      });                          
                    } else {
                      // Turn on hover series labels
                      hoverSeries.update({ 
                        dataLabels: {
                          enabled: true
                        }
                      });                        
                    }
                  });                                        
                },
                mouseOut: function () {                    
                  this.chart.series.forEach(function(s){
                    // Reset all series
                    s.setState('');
                    s.update({
                      dataLabels: {
                        enabled: true
                      }
                    });                          
                  });                         
                }
            }
        }

Some example: https://jsfiddle.net/fakytqhd/