HighCharts Drilldown issue in pie - highcharts

Question

Can someone tell me why this chart is rendering properly in drill up? The code is wrapping arc3d. I have provided the code and also the JFiddle for reference. When you click on the graph it drills down perfectly but while drilling up the graph is not rendering properly. it holds the color of the drilled slice.
(http://jsfiddle.net/subhasispatra/np0bn3ps/)
$(function () {
Highcharts.setOptions({
lang: {
drillUpText: '<Back'
}
});
Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
var result = proceed.apply(this, [].slice.call(arguments, 1));
result.fadeIn = result.show;
return result;
});
$('#container').highcharts({
"plotOptions": {
"pie": {
"point": {
"events": {
"click": function () {
if (this.options != undefined && this.options != null && this.options.url != null && this.options.url.length > 0) location.href = this.options.url;
else return;
}
}
},
"dataLabels": {
"enabled": true,
"style": {
"fontWeight": "bold",
"fontFamily": "Arial",
"fontSize": "10"
},
"color": "#000000"
},
"shadow": true,
"curson": "pointer",
"depth": 30,
"allowPointSelection": true,
"showInLegend": true
}
},
"drilldown": {
"series": [{
"id": "Draft",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 1
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}, {
"id": "Canceled",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 0
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}],
"drillUpButton": {
"relativeTo": "spacingBox",
"theme": {
"style": {
"fontSize": "7pt"
}
},
"y": 0,
"x": 0
}
},
"series": [{
"name": "SERIES",
"data": [{
"drilldown": "Draft",
"name": "Draft",
"y": 2
}, {
"drilldown": "Canceled",
"name": "Canceled",
"y": 1
}]
}],
"yAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
},
"title": {
"text": "Orders created in last 30 days"
},
"legend": {
"itemStyle": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
},
"layout": "vertical",
"align": "left",
"verticalAlign": "middle"
},
"chart": {
"renderTo": "container",
"options3d": {
"enabled": "true",
"alpha": 40,
"beta": 0,
"depth": 40
},
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"type": "pie"
},
"credits": {
"enabled": false
},
"xAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
}
});
});

Answer 1

The problem is due to 3D rendering. Disable 3D options and it'll work fine.