Drilldown in Sankey Diagram

Question

I'm looking for example code on how to implement a drilldown in a sankey diagram. I tried using the drilldown code from the column drilldown demo but it didn't work for sankey. The intended functionality is very similar to a dendogram, i.e- click a node to hide reveal child nodes.

Example: https://jsfiddle.net/y_tddel/d7jby2z1/5/

In this example each node in the second column will be clickable and have their own child nodes.The expanded view of Indo-Iranian node is shown as as an example.

Devesh Goyal · Answer 1 · 2020-12-03T16:36:02.807

Series.point.events can be used to trigger the event when the user clicks on any node, and update the series data, and adding a back button.

Link: https://api.highcharts.com/highcharts/series.sankey.point.events.click

Look at the following code sample:

Highcharts.chart('container', {
    series: [{
        point: {
            events: {
                click: function (e) {
                    console.log(e, 'e')

                    let series = this.series,
                        chart = series.chart;

                    if (this.isNode) {
                        if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
                            chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
                                isDrilldown.pop();
                                d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
                                series.update({data: d});
                                chart.backButton.destroy();
                                chart.title.show();
                            }).add()

                            isDrilldown.push(this.name);
                            chart.title.hide()
                            this.series.update({
                                data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
                            })
                        }
                    }
                }
            }
        },

        keys: ['from', 'to', 'weight', 'drilldown'],
        data: JSON.parse(JSON.stringify(plot_data)),
        type: 'sankey'
    }],
});

Demo: https://jsfiddle.net/deveshgoyal/1zcnuq5b/2/

score 0 · Accepted Answer · answered Jun 09 '20 at 10:37

Current drilldown module is not compatible with the sankey series. You will need to create your own drilldown logic. Below is a basic demo which shows how to update series on click event - which could be treated as an drilldown to other series.

Demo: https://jsfiddle.net/BlackLabel/hn19xga5/

  events: {
    click() {
      let series = this.series,
        chart = series.chart;

      if (!isDrilldown) {
        chart.backButton = chart.renderer.button('back', 20, 20, function() {
          series.update({
            data: initialData
          })
          chart.backButton.destroy();
          isDrilldown = false;

        }).add()
        isDrilldown = true;
      }

      this.series.update({
        data: drilldown1
      })
    }
  }

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

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Thanks for the answer Sebastian. I used your answer to make a node clickable and trigger a series.update(). It works perfectly. I'm trying to figure out how to change cursor to a pointer on hovering over a clickable node. Any suggestions for that? — hrygt12, Jun 14 '20 at 20:07
@hrygt12 you can set it as an CSS property for the HTML path element. Here is a demo with inline styling: https://jsfiddle.net/BlackLabel/omnpej1h/ — Sebastian Wędzel, Jun 15 '20 at 08:51

Drilldown in Sankey Diagram

2 Answers2