How to show the path that I have traversed in highcharts drilldown chart?

Question

I am using highcharts drilldown chart with multiple levels and I would like to show the users what path they have traversed while drilling down the chart. Is there a way to show that path next to the chart?

for example https://jsfiddle.net/crxmkgaz/

in this fiddle if I click on Chrome and then on v63.0 the path should show like chrome -> v63.0, and should update if the user drill up.

ps: I am using react.

Thanks in advance.

score 0 · Answer 1 · answered Feb 06 '20 at 10:24

You can use drilldown and drillup events to add information about drilldown level, for example in this way:

chart: {
  type: 'pie',
  events: {
    drilldown: function(e) {
      var newEl = document.createElement('span');
      newEl.innerText = ' --> ' + e.seriesOptions.name

      path.appendChild(newEl);
    },

    drillup: function() {
      path.children[path.children.length - 1].remove();
    }
  }
}

Live demo: https://jsfiddle.net/BlackLabel/8mLhy31p/

API Reference:

https://api.highcharts.com/highcharts/chart.events.drilldown

https://api.highcharts.com/highcharts/chart.events.drillup

How to show the path that I have traversed in highcharts drilldown chart?

1 Answers1