1

I was trying to implement a highchart column chart in angular with multilevel drill down. Since I am not able to add multiple series to drill down in highchart for Angular, I plan to use a single series with multiple categories as my drilldown series but I am unable to show legend this way. Is there any way to do this?

I tried to use addseriesasdrilldown() function of highchart but it will let me add only one series to drill down. I also tried to make a single series with multiple categories but I can't show in legend this way.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Nikhil B R
  • 11
  • 2

1 Answers1

0

Both features are not supported by default in Highcharts, but it is really easy to add them.

To add more than one series to drill down, you can use addSingleSeriesAsDrilldown internal method. For example:

chart.addSingleSeriesAsDrilldown(point, series1);
chart.addSingleSeriesAsDrilldown(point, series2);
chart.applyDrilldown();

Useful thread: https://www.highcharts.com/forum/viewtopic.php?t=34240

To create something like legend per category, set legendType: 'point' and borrow setVisible method from pie series. For example:

Highcharts.seriesTypes.column.prototype.pointClass.prototype.setVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible;

Highcharts.chart('container', {
  series: [{
    ...,
    type: 'column',
    legendType: 'point'
  }]
});

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

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

ppotaczek
  • 36,341
  • 2
  • 14
  • 24