Drilldown multiple levels Highchart
It's possible, just add all drilldown series, then create a connection between point and drilldown. See: https://jsfiddle.net/BlackLabel/rpt741xc/
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}]
}],
drilldown: {
series: [{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 4,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
For a mutiple levels pie chart check out http://jsfiddle.net/bge14m3a/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Deep drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
},{
name: 'Food',
y: 4,
drilldown: 'food'
}]
}],
drilldown: {
series: [{
id: 'food',
name: 'Food',
data: [{
name: 'Apple',
y: 1.5,
drilldown: 'apple'
},
['Banana', 1],
['Peer', 0.5],
['Pineapple', 1]
]
}, {
id: 'apple',
data: [['1/6' ,1],
['1/3' , 2],
['1/2' , 3]]
},{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 5,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
})
});