1

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 declared is very linear. It doesn't really have much of a hierarchy.

Here's a pen of what I have so far https://codepen.io/anon/pen/xvGMwa. The issue I have is that the "links" aren't associated with the nodes. So I can't easily find a group of nodes and their links and hide/show them.

What I'd like is for it to start off with just the first 4 nodes and then be able to click an action on the node to show/hide its children. I'd ideally do this with CSS.

The nearest I've found is this example but it's not really what I want:

point: {
            events: {
                click: function() {
                    this.remove();
                }
            }
        }

Weirdly, the example from Highcharts here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-networkgraph/data-options/ has ids on the links. But my example doesn't. I don't know why that is? I think if I had ids on my links then it'd be easier to find them and hide/show them.

hcharge
  • 1,216
  • 2
  • 24
  • 43

1 Answers1

2

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:

API reference:

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
  • Thanks so much!! This is great to get me started. The only thing I'm trying to figure out now is how to get it to stop redrawing the points when you hover over the chart. It seems to want to do the whole "dimming the other series" thing (https://github.com/highcharts/highcharts/issues/9899), which I don't want and I think is causing it to redraw. – hcharge Jul 23 '19 at 23:23
  • 1
    I answered you there: https://stackoverflow.com/questions/57173646/stop-highcharts-networkgraph-from-redrawing-the-markers-when-hovering/57181283#57181283 – Wojciech Chmiel Jul 24 '19 at 10:57