JSFiddle - React, Tailwind, and code Playground
by alr3
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Family', 'Entrepreneurship', 'Entertainment', 'Continued Learning', 'Community'],
data = [{
y: 63,
color: colors[0],
drilldown: {
name: 'Family',
categories: ['Father (2 daughters & 1 son)', 'Husband / Honey-doer', 'Son', 'Brother', 'Friend'],
data: [30, 13, 10, 5, 5],
color: colors[0]
}
}, {
y: 14.5,
color: colors[3],
drilldown: {
name: 'Entrepreneurship',
categories: ['New Us Movement App Dev', 'Social Media', 'Inbound Marketing', 'Product Strategy', 'Organizational Design'],
data: [5.5, 1.5, 2.5, 3.5, 1.5],
color: colors[3]
}
}, {
y: 7.5,
color: colors[1],
drilldown: {
name: 'Entertainment',
categories: ['Naruto Shippudden', 'Harry Potter (the books and a few of the movies)', 'Divergent Series', 'Poker', 'Hunger Games Trilogy', 'Geeking out over Star Wars', 'Shark Tank', 'Startup: Podcast'],
data: [1.5, 1, 0.5, 1.5, 0.25, 0.25, 1, 1],
color: colors[1]
}
}, {
y: 11.5,
color: colors[2],
drilldown: {
name: 'Continued Learning',
categories: ['Luckily (Great mentors)', 'Blogs (read and write)', 'Book: Rework', 'Book: Linchpin', 'Book: The Lean Startup', 'Book: The Entrepreneurial Rollercoaster', 'Book: Getting Real', 'Book: Purple Cow', 'Book: Poke The Box', 'Book: Anything You Want', 'Book: Start With Why', 'Love reading, so many other books'],
data: [3, 2, 3.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
color: colors[2]
}
}, {
y: 4,
color: colors[4],
drilldown: {
...