Does anyone know how to round off the edges of a 3D Pie Chart to resemble the included picture? I tried adding border radius via rounded-corner.js, but it had no affect. I have put the chart code in below as well.
function drawFirstLevel() { // Build the chart chart = new Highcharts.Chart({ chart: { type: 'pie', plotBorderColor: '#0574AC', borderWidth: .5, renderTo: 'buRequests', plotShadow: false, options3d: { enabled: true, alpha: 55, beta: 0 }, events: { load: function () { var label = this.renderer.label(spcData.length + " Total Requests" ) .css({ color: '#666666', width: '480px' }) .add(); label.align(Highcharts.extend(label.getBBox(), { align: 'center', x: 0, // offset verticalAlign: 'top', y: 20 // offset }), null, 'spacingBox'); } }, }, credits: { enabled: false }, title: { text: 'Coaching Requests by ATO BU (YTD)', style: { color: '#666666', fontWeight: 'bold' } }, tooltip: { pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%' }, plotOptions: { pie: { size: '80%', allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { softConnector: true, useHTML: true, enabled: true, padding: 0, fontWeight: 'medium', formatter: function() { var req; if (this.point.y === 1) { req = " Request"; } else { req = " Requests"; } return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>'; } }, point: { events: { click: function() { if (this.name === "Tech Dev" || this.name === "Tech Ops") { drawSecondLevel(this.name); } }//click }//events }//point }//pie }, series: [{ type: 'pie', name: 'Coaching Requests by ATO BU (YTD)', data: chartData, colors: ['#CD2626', '#F9B112', '#42C5F1', '#0472A9', '#4AA70A', '#C1D52C'], borderRadiusTopLeft: 50, borderRadiusTopRight: 50, borderRadiusBottomRight: 50, borderRadiusBottomLeft: 50 }] }); } //firstLevelFunction