JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.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 = ['The Americas', 'Asia Pacific', 'Europe & Africa'],
//name = 'Sectors',
data = [{
name: 'A-1',
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,
name: 'C',
drilldown: {
name: 'Jack Daniels',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [1583, 1580, 1612, 4036],
color: colors[0]
}},
{
y: 2.41,
name: 'D',
drilldown: {
name: 'Johnnie Walker',
categories: ['A', 'B', 'C', 'D', 'E',...