score:1

Accepted answer

You can initially create all data labels, but hide them by setting opacity style to 0. Then, use mouseOver and mouseOut events to toggle the opacity.

const toggleDLInLinks = (links, isVisible) => {
    links.forEach(link => {
        if (isVisible) {
            link.toNode.dataLabel.css({
                opacity: 1
            })
        } else {
            link.toNode.dataLabel.css({
                opacity: 0
            })
        }

        if (link.toNode.linksFrom.length) {
            toggleDLInLinks(link.toNode.linksFrom, isVisible);
        }
    });
};

Highcharts.chart('container', {
    plotOptions: {
        networkgraph: {
            ...,
            dataLabels: {
                allowOverlap: true,
                enabled: true,
                style: {
                    opacity: 0,
                    transition: ''
                }
            },
            point: {
                events: {
                    mouseOver: function() {
                        const point = this;

                        if (point.linksFrom.length) {
                            toggleDLInLinks(point.linksFrom, true);
                        }
                    },
                    mouseOut: function() {
                        const point = this;
                        if (point.linksFrom.length) {
                            toggleDLInLinks(point.linksFrom);
                        }
                    }
                }
            },
            keys: ['from', 'to']
        }
    },
    ...
});

Live demo: https://jsfiddle.net/5n2u1b3L/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

score:0

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/


Related Query

More Query from same tag