How to create an inner circle pie chart in Highcharts - highcharts

Question

I am using Highcharts pie chart and I would like to have an inner circle in pie chart. However the option to create a inner circle is not available in Highcharts.
I want to create inner circle in my chart as shown in this picture:
Below is my code. I am using highcharts-ng.js.
var budget = 100;
var sectionVal = 56.33;
$scope.highchartsNGPie = {
options: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
enabled: false,
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '98%',
innerRadius: '88%',
backgroundColor: Highcharts.Color('#808080').setOpacity(0.3).get(),
borderWidth: 0
}]
},
plotOptions: {
pie: {
allowPointSelect: false, //to stop animation of section
cursor: 'default',
borderWidth: 0,
showInLegend: false
},
series: {
animation: false,
}
},
},
series: [{
name: 'spent',
colorByPoint: true,
states: {
hover: {
enabled: false
}
},
data: [{
name: 'Spent',
y: sectionVal,
color: '#50B432',
tooltipDisabled: false,
dataLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function () {
//return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
return this.point.y + "%";
}
},
}, {
y: budget - sectionVal,
sliced: true,
selected: true,
color: '#ffffff',
tooltipDisabled: true,
dataLabels: {
enabled: false
},
}]
}],
title: {
text: 'Your Budget for September',
align: 'top'
},
loading: false
}
<div highchart id="chart1" config="highchartsNGPie"></div>

Answer 1

You can use it using size and innerSize options.
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
innerSize: '50%',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>