How to create an inner circle pie chart in 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>

You can do that by using two series, but first of them should have reduced size. Example: http://jsfiddle.net/4w27rLfg/ — Sebastian Bochan, Jun 08 '16 at 12:23

score 0 · Answer 1 · answered Sep 29 '19 at 13:30

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>

How to create an inner circle pie chart in Highcharts

1 Answers1