JSFiddle - React, Tailwind, and code Playground

by jbenedict

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>

CSS

['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'] 7D110C

JavaScript

$(function () {



    var colors = Highcharts.getOptions().colors,
        categories = ['Coal', 'Natural Gas', 'Petroleum', 'Renewables', 'Net Interstate Flow of Electricity'],
        data = [{
            y: 42.99,
            color: colors[0],
            drilldown: {
                name: 'Coal versions',
                categories: ['Coal'],
                data: [42.99],
                color: colors[0]
            }
        }, {
            y: 23.59,
            color: colors[1],
            drilldown: {
                name: 'Natural Gas',
                categories: ['Natural Gas'],
                data: [23.59],
                color: colors[1]
            }
        }, {
            y: 25.87,
            color: colors[2],
            drilldown: {
                name: 'Petroleum',
                categories: ['Gasoline', 'Distillate Fuel Oil', 'Jet Fuel', 'LPG (propane, butane)', 'Residual Fuel', 'Other Petroleum'],
                data: [11.99, 8.01, 1.74, 0.74, 0.05, 3.34],
                color: colors[2]
            }
        }, {
            y: 5.19,
            color: colors[3],
            drilldown: {
                name: 'Renewables',
                categories: ['Hydroelectric Power', 'Biomass', 'Other Renewable'],
                data: [0.14, 3.78, 1.27],
                color: colors[3]
            }
        }, {
            y: 2.31,
            color: colors[4],
            drilldown: {
                name: 'Net Interstate Flow of Electricity',
                categories: ['Net Interstate Flow of Electricity'],
                data: [2.31],
                color: colors[4]
            }
        }],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
           ...