JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style=""></div>
JavaScript
$(function () {
Highcharts.chart('container', {
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Election',
size: '100%',
innerSize: '77%',
data: [{name: "A", y: 20},
{name: "B", y: 10},
{name: "C", y: 15}
]
}, {
type: 'pie',
name: 'Proprietary or Undetectable',
size: '75%',
innerSize: '70%',
data: [{name: "A", y: 10},
{name: "B", y: 15},
{name: "C", y: 20}
]
},{
type: 'pie',
name: 'Election',
size: '50%',
innerSize: '63%',
data: [{name: "A", y: 20},
{name: "B", y: 10},
{name: "C", y: 15}
]
}]
});
});