Javascript – 3 layer donut chart in Highcharts

donut-charthighchartshtmljavascript

Highcharts supports donut charts, essentially one inner pie chart with a second pie—shown as a donut—surrounding it. donut chart from the Highcharts demo site

Is it possible to create a three layer donut chart, i.e. a chart with a pie in the middle, a donut surrounding the pie, and another donut surrounding the first?

I suspect it is not possible, as their option plotOptions.pie.innerSize suggests that they support only an inner size and an outer size, not an inner size, middle size, and outer size. But perhaps I am missing something.

Best Answer

Just try to set more series, and play a while with size and inner size, see: http://jsbin.com/oyudan/165/edit

       series: [{
            name: 'Browsers',
            data: [11,23,14,15],
            size: '40%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: [4,7,11,11,2,3,3,8,5,5,5],
            size: '70%',
            innerSize: '40%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }, {
            name: 'Versions',
            data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3],
            size: '80%',
            innerSize: '70%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
Related Topic