Pie chat dynamic drilldown(3levels) using highchatjs - highcharts

Question

Below is the complete code and , i am unable to do the 2nd level drilldown of pie chats.
How to add multilevel drilldown series? First chat i have 2 sections of data (completed and Fail) , in second chat data will be the dynamic depending upon the selection of the first pie slice. same thing for third level chat as well.
var chartSeriesData = [];
var chartSeriesData1 =[];
var chartDrilldownData = [];
chartSeriesData = [{
name: "Completed",
y: 1,
color: "#1068C7",
drilldown: "Completed"
}, {
name: "Fail",
y: 2,
color: "#11A852",
drilldown: "Fail"
}];
chartSeriesData1 = [{
id: "Completed",
data: [{
name: 'CEVA',
y: 15,
drilldown: 'CEVA-COMPLETED'
},{
name: 'SYNCHRON',
y: 13,
drilldown: 'SYNCHRON-COMPLETED'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-COMPLETED'
}],
}, {
id:"Fail",
data: [{
name: 'CEVA',
y: 45,
drilldown: 'CEVA-FAIL'
},{
name: 'SYNCHRON',
y: 23,
drilldown: 'SYNCHRON-FAIL'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-FAIL'
}],
}];
chartDrilldownData = [
{
id:"CEVA-COMPLETED",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
} ,
{ id:"CEVA-FAIL",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
}
];
console.log('----------------');
console.log(chartSeriesData);
console.log('----------------');
console.log(chartSeriesData1);
console.log('----------------');
console.log(chartDrilldownData);
console.log('-------------------');
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the slices to view versions. Source: statcounter.com'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function () {
var drilldown = this.drilldown;
console.log('drilldown'+drilldown);
// alert(this.options);
//console.log(this.options)
console.log(this.series.data);
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
drilldown:true
}
},
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/>'
},
series: [{
name: 'Status',
colorByPoint: true,
data: chartSeriesData
}],
drilldown:{
series: chartSeriesData1
}
});

Answer 1

You created chartDrilldownData but never use it in the chart parameters, so the second level never trigger on click.
Just remove this code :
];
chartDrilldownData = [
And the working Fiddle