JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" class="col-md-4"></div>
<div id="container" class="col-md-8"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Container Utilization'
},
xAxis: {
type: 'category'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Utilization',
colorByPoint: true,
data: [{
name: 'Utilized',
y: 5,
drilldown: 'u'
}, {
name: 'Unutilized',
y: 4,
drilldown: 'un'
}]
}],
})