CODEWITHSUNDEEP
angularhighchartsangular2-highcharts
Nikhil B R
Nikhil B R

Reputation: 11

How to have category name as Legend instead of series in Highchart for Angular?

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.

Upvotes: 1

Views: 93

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

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

Upvotes: 0

Related Questions