How to make a donut chart using highcharts?

Question

I want to create a donut chart which looks like the image below:

So far I have done this:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'subscribers-graph',
        type: 'pie'
     },
    title: {
        verticalAlign: 'middle',
        floating: true,
        text: '70% <br> 750K <br> Utilized',
    },
    plotOptions: {
        pie: {
            innerSize: '100%'
        },
        series: {
            states: {
                hover: {
                    enabled: false
                },
                inactive: {
                    opacity: 1
                }
            }
        }
    },
    series: [{
        borderWidth: 0,
        name: 'Subscribers',
        data: [
            {
                y: 30,
                name: "Online",
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#4679F8'],
                        [1, '#57B2A5']
                    ]
                },
            },
            {
                y: 20,
                name: "Offline",
                color: "#DDF4E4",
            }
        ],
        size: '100%',
        innerSize: '75%',
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }],
    credits: {
        enabled: false
    }
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="subscribers-graph" style="height: 300px"></div>

Now how can I add an inside curve along with filled path as shown in picture or is there another better option than highcharts? Please suggest.

I don't think that highcharts is really designed for that level of customization. Under the hood it creates SVG's - so if you're wanting to go down that route you can customize it any way you like. — Scott Barron, Sep 23 '19 at 07:09
If you're thinking about going down the raw SVG route then I can provide some help there. — Scott Barron, Sep 23 '19 at 07:12

score 2 · Accepted Answer · answered Sep 23 '19 at 10:24

You can add another series with proper size and innerSize properties:

series: [{
    ...
}, {
    size: '65%',
    innerSize: '95%',
    dataLabels: {
        enabled: false
    },
    data: [{
        y: 30
    }, {
        y: 20,
        color: 'rgba(0,0,0,0)'
    }]
}]

Live demo: http://jsfiddle.net/BlackLabel/e40a15hf/

API Reference: https://api.highcharts.com/highcharts/series.pie

How to make a donut chart using highcharts?

1 Answers1