Highcharts donut chart without inner pie?

Question

I\'ve been searching for the solution to generate the simplest donut chart with Highcharts library. However, all examples of Highcharts show the style of chart with both inn

Answer 1

This was the top search result and the answers given did not work for me. I needed more control over the data points than just a simple array of arrays. I needed to use JSON objects to configure additional options like explicit colors for specific data. I found through some research that you don't have to modify your data format at all. All you have to do in order to make a pie chart into a donut chart is to just set an innerSize value greater than 0 in the data series.

From the highcharts documentation:

innerSize: The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the pie size. Pixel values are given as integers.

So you can obtain a simple donut chart with data like the following:

        series: [{
            innerSize: '30%',
            data: [
                {name: 'Yellow Slice', y: 12, color: 'yellow'},
                {name: 'Red Slice', y: 10, color: 'red' },
                {name: 'Blue Slice', y: 33, color: 'blue'},
                {name: 'Green Slice', y: 20, color: 'green'}
            ]
        }]

JS Fiddle