3 layer donut chart in Highcharts

Question

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.

Answer 1

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;
                }
            }

Answer 2

You can do the same by using two charts.

one chart will be having a pie and a donut while the second will have only a donut chart you can manage them by providing same center as well as radius such that they will synchronize.

hope this will work for you

Answer 3

A different method to achieve this is using the Sunburst series type (Highcharts 6.0.0 or newer).

Here you specify data with an id parameter if they are to have series below them, and for the children you specify a parent parameter.

For example (JSFiddle, documentation):

$(function () {
    var data = [
        {
            name: 'Anakin Skywalker',
            id: 'father'
        }, {
            name: 'Luke Skywalker',
            id: 'child-1',
            parent: 'father',
            value: 1
        }, {
            name: 'Leia Organa',
            id: 'child-2',
            parent: 'father',
            value: 3
        }, {
            name: 'Ben Skywalker',
            parent: 'child-1',
            value: 1
        }, {
            name: 'Jaina Solo',
            parent: 'child-2',
            value: 1
        }, {
            name: 'Jacen Solo',
            parent: 'child-2',
            value: 1
        }, {
            name: 'Anakin Solo',
            parent: 'child-2',
            value: 1
        }
    ];

    $('#container').highcharts({
        chart: {
            type: 'sunburst'
        },
        title: {
            text: 'Family tree'
        },
        series: [{
            data: data
        }]
    });
});

Or see this very elaborate example of world population for its potential.