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