Accepted answer

You just need to provide the data as an array of two element (key / value) arrays. Specify an innerSize to get the donut style.

So your parameters will contain something like this:

data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',

Here's a jsFiddle of a complete example.


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


**I hope this example of highchat will solve your problum

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'

        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%'
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
    // using

    function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;

    // Render the circle, ypos, circleradius).attr({
        fill: '#ddd',

    // Render the text
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999

Related Query

More Query from same tag