How to show multiple pie charts using highcharts

Question

I'am stuck in the problem of showing multiple pie-charts using High charts.

What I have to achieve is,

I have created three separated pie-charts using highcharts and overlapped them using my custom CSS.

I put all charts in a div and write css as follows.

#homepage-charts {
    position: relative;
}

#inner-chart, #center-chart, #outer-chart {
    position: absolute;
    top: 0;
    left: 0;
    
    div svg rect {
        fill: none !important;
    }
}

#inner-chart {
    z-index: 4;
}

#center-chart {
    z-index: 3;
}

#outer-chart {
    z-index: 2;
}

Finally, it is come like,

The problem is, when I create like above, I couldn't be able to click or hover the charts which are under the first chart.

Is there any way to trigger click or hover the charts behind the first one?

or any high charts functionality that couldn't find to show as above?

Answer 1

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>