Showing/hiding Child Nodes And Links In Highcharts Networkgraph

I've built a network graph with Highcharts and I'm struggling to find a way to easily 'expand' or 'show' a node's children. The problem I've got is that the way the data is declare

Solution 1:

By clicking on the node you can find its links in point.linksTo and point.linksFrom arrays.

To show and hide them just use Highcharts.SVGElement.hide() and Highcharts.SVGElement.show() methods. Check demo and code posted below.

Code:

series: [{
  ...
  point: {
    events: {
      click: function() {
        var point = this;

        if (!point.linksHidden) {
          point.linksHidden = true;

          point.linksTo.forEach(function(link) {
            link.graphic.hide();

            link.fromNode.graphic.hide();
            link.fromNode.dataLabel.hide();
          })
        } else {
          point.linksHidden = false;

          point.linksTo.forEach(function(link) {
            link.graphic.show();

            link.fromNode.graphic.show();
            link.fromNode.dataLabel.show();
          })
        }
      }
    }
  }
  ...
}]

Demo:

• https://jsfiddle.net/BlackLabel/9drzxj2L/

API reference:

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#show