JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var drilldowns = {
1: {
stacking: 'normal',
name: 'facebook',
color: Highcharts.getOptions().colors[0],
data: [
['nasty comments', 2],
['spam', 3],
['category-3', 10],
['category-4', 15]
]
},
66: {
name: 'second-column-drilldown',
data: [
['second-column-drilldown-point', 10]
]
}
};
var drilldowns2 = {
1: {
color: Highcharts.getOptions().colors[1],
colorIndex: 1,
stacking: 'normal',
name: 'youtube',
data: [
['nasty comments', 5],
['spam', 10],
['category-3', 10],
['category-4', 15]
]
}
};
var drilldowns3 = {
1: {
color: Highcharts.getOptions().colors[2],
stacking: 'normal',
name: 'stackoverflow',
data: [
['nasty comments', 3],
['spam', 5],
['category-3', 10],
['category-4', 15]
]
}
};
var series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name],
series3 = drilldowns3[e.point.name];
this.addSingleSeriesAsDrilldown(e.point, series);
this.addSingleSeriesAsDrilldown(e.point, series2);
this.addSingleSeriesAsDrilldown(e.point, series3);
...