Highcharts --> organisation chart --> toggle visibility of node

Question

I would like to add toggle visibility on click to a node in a Highcharts Organisation chart (Highcharts). Is there a built in support for this?

Answer 1

This feature is not available from regular Highcharts API, however I created an example/guideline how to implement it by yourself.

First, you need to hide points after initial load in the events.load callback:

Code:

events: {
  load() {
  //hide nodes after initial load
    let chart = this,
      nodes = chart.series[0].nodeLookup;

    for (let i in nodes) {
      if (nodes[i].column > 2) {
        nodes[i].graphic.hide();
        nodes[i].dataLabel.hide();
        nodes[i].linksTo[0].graphic.hide();
        nodes[i].visible = false;
      }
    }
  }
}

API to load event: https://api.highcharts.com/highcharts/chart.events.load

Next, you need to implement logic to show wanted nodes after click event on point. You can improve this logic and code as an independent function which will be trigger inside the point.events.click callback.

Code:

  events: {
    click() {
    //show nodes
      let series = this.series,
        nodes = series.nodeLookup;

      for (let i in nodes) {
        if (nodes[i].linksTo.length && nodes[i].linksTo[0].from === "CEO") {
          if (nodes[i].visible) {
            nodes[i].graphic.hide()
            nodes[i].dataLabel.hide();
            nodes[i].visible = false;
          } else {
            nodes[i].graphic.show()
            nodes[i].dataLabel.show();
            nodes[i].visible = true;
          }

        }
      }
      this.linksFrom.forEach(link => {
        if (link.graphic.visibility == "visible") {
          link.graphic.hide()

        } else {
          link.graphic.show()
        }
      })
    }
  } 

API: https://api.highcharts.com/highcharts/series.organization.data.events.click

Demo: https://jsfiddle.net/BlackLabel/b5nxv6k9/ - click on the CEO point to see how it work.