score:12

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

score:0

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

score:0

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.


Related Query

More Query from same tag