JSFiddle - React, Tailwind, and code Playground
by Mike Rawling
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 600px; height: 600px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Alfa Romeo', 'Aston Martin', 'Ferrari', 'Lotus', 'Keonigsegg'],
name = 'Automotive brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Alfa Romeo versions',
categories: ['Brera', '8C', 'Giulietta', 'Mito'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Aston Martin',
categories: ['Vantage', 'Vantage V12', 'DB9', 'DBS', 'Vanquish'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Ferrari',
categories: ['458', 'California', '458 Spider', 'F12 Berlinetta', 'FF',
'612 Scaglietti', 'GTO', 'FXX'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Lotus',
categories: ['Elise', 'Exige', 'Exige S', 'Evora', 'Evora GTE',
'Evora S', 'Exige S Roadster'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color:...