Here's a plunker:
http://plnkr.co/edit/S1B9Q9e1yen0QgmKt2ri
var chartConfig = {
title: {
text: 'Number of offers by trend'
},
subtitle: {
text: 'My company'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
options: {
chart: {
type: 'pie'
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
}
},
series: [{
name: 'Trends',
colorByPoint: true,
data: TREND_LIST
}],
drilldown: {
series: NUMBER_OF_OFFERS_BY_TREND
}
};
the pie is drown fine but I can't click to get the drill down pie
And this is the original fiddle from highcharts.com, I changed it a bit so it can work with highcharts-ng:
bit.ly/1kOPi7L
Thanks for helping
I finally solved it (sorry I had to answer my own question), thanks to Pawel Fus's enlightening comment :)
First I added the drill down module:
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
Next I followed this answer and added some code to the highcharts-ng lib:
Highcharts-ng with drilldown
Finally I put the drilldown attribute under the option attribute as mentioned here:
https://github.com/pablojim/highcharts-ng/pull/145
Here is the final woorking plunker:
http://plnkr.co/edit/S1B9Q9e1yen0QgmKt2ri