JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 980px; height: 400px; margin: 0 auto"></div>
JavaScript
var chart;
$(document).ready(function () { /*begin chart render*/
var colors = Highcharts.getOptions().colors,
categories = ['Household expenses', 'Financial products', 'Utilities', 'Housekeeping', 'Children and other dependents', 'Motoring', 'Travel and leisure', 'Personal expenditure', 'Other expenditure'],
//name = 'Sectors',
data = [{
name: 'Household expenses',
y: 55,
// color: colors[0],
drilldown: {
//begin alcohol
name: 'A-1',
// color: colors[0],
data: [{
y: 33.06,
name: 'A',
drilldown: {
name: 'Budweiser',
data: [{
name: 'A',
y: 10838
}, {
name: 'B',
y: 11349
}, {
name: 'C',
y: 11894
}, {
name: 'D',
y: 11846
}, {
name: 'E',
y: 11878
}, {
name: 'F',
y: 11662
}, {
name: 'G',
y: 11652
}],
// color: colors[0]
}
}, {
y: 10.85,
name: 'B',
drilldown: {
name: 'Heinekein',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2266, 2396, 2431, 2380, 2357, 3516],
// color: colors[0]
}
}, {
y: 7.35,
...