Highchart drilldown dymanic

Question

How can I implement dynamic drilldown charts? This is my problem :

• I have a list of series datas (pie) and I want to get data for clicked element from backend and after it, automat open drilldown. As an example: Stackoverflow and Google, both of them pies When I click on Stackoverflow chart, i want to get it's id and request on backend for anothers data and after that, open drilldown.

Answer 1

If I understood you correctly, you want to listen to the click event from a highcharts chart on Angular.

To do that you can set the events property of the series like:

plotOptions: {
        series: {
          events: {
            click: (pointClicked) => {
                // TODO: Implement here your logic
            }
        }
}

Answer 2

You can get and apply data in drilldown event. For example:

  chart: {
    type: 'column',
    events: {
      drilldown: function(e) {
        if (!e.seriesOptions) {
          const chart = this;
          // Show the loading label
          chart.showLoading('Loading ...');

          fetch('...')
            .then((response) => response.json())
            .then((data) => {
              chart.hideLoading();
              chart.addSeriesAsDrilldown(e.point, data);
            });
        }
      }
    }
  }

---

Live demo: http://jsfiddle.net/BlackLabel/v2n5w0fu/

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