score:1

Accepted answer

You can stack the pie charts by added several charts after each other in the series array of the highcharts object. You just have to add them to the same position, but adjust the size for the different levels. See fiddle bellow.

Highcharts.chart('container', {
    title: {
        text: 'Stacked pie charts'
    },
    xAxis: {},
    labels: {},
    series: [{
        type: 'pie',
        name: 'Level 1',
        data: [{
            name: '1.1',
            y: 1.1,
            color: Highcharts.getOptions().colors[6] 
        }, {
            name: '1.2',
            y: 1.2,
            color: Highcharts.getOptions().colors[7] 
        }, {
            name: '1.3',
            y: 1.3,
            color: Highcharts.getOptions().colors[8] 
        }],
        center: [200, 200],
        size: 300,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }, {
        type: 'pie',
        name: 'Level 2',
        data: [{
            name: '2.1',
            y: 2.1,
            color: Highcharts.getOptions().colors[0] 
        }, {
            name: '2.2',
            y: 2.2,
            color: Highcharts.getOptions().colors[1] 
        }, {
            name: '2.3',
            y: 2.3,
            color: Highcharts.getOptions().colors[2] 
        }],
        center: [200, 200],
        size: 200,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }, {
        type: 'pie',
        name: 'Level 3',
        data: [{
            name: '3.1',
            y: 3.1,
            color: Highcharts.getOptions().colors[3] 
        }, {
            name: '3.2',
            y: 3.2,
            color: Highcharts.getOptions().colors[4] 
        }, {
            name: '3.3',
            y: 3.3,
            color: Highcharts.getOptions().colors[5] 
        }],
        center: [200, 200],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>


Related Query

More Query from same tag