JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container-pie" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
function syncCharts(e, chart) {
return e.type === 'drilldown' ?
Highcharts.charts.forEach(c => {
if (c !== chart) {
var series = c.series[0],
point = series.points[e.point.index];
point.doDrilldown()
}
}) :
Highcharts.charts.forEach(c => {
c.drillUp();
})
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown(e) {
syncCharts(e, this)
},
drillup(e) {
syncCharts(e, this)
}
}
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent Car Sales'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [{
"name": "Years",
"colorByPoint": true,
"data": [{
"name": "2015",
"y": 62.74,
"drilldown": "2015"
},
{
"name": "2016",
"y": 10.57,
"drilldown": "2016"
},
{
"name": "2017",
"y": 7.23,
"drilldown": "2017"
},
{
"name": "2018",
"y": 5.58,
"drilldown": "2018"
},
]
}],
"drilldown": {
"series": [{
"name": "2015",
"id": "2015",
"data": [{
"name": "Q1",
"y": 0.4
},
{
"name": "Q2",
"y": 0.3
},
{
"name": "Q3",
"y": 0.2
},
{
"name": "Q4",
"y": 0.1
}
]
},
{
"name": "2016",
"id": "2016",
"data": [{
...