JSFiddle - React, Tailwind, and code Playground

by Jimmy Sawczuk

HTML

<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="graph"></div>

JavaScript

(function(){
HighchartsDefaultOptions = Highcharts.getOptions();
console.debug(Highcharts.getOptions().colors);
Highcharts.setOptions({
    title: {
        style: {
            color: '#999'
        }
    },
    
    colors: [
        '#3C5A94',
        '#8F7E64',

        '#919CC3',
        '#C9B18F',

        '#B1BCD5',        
        '#DAC9B1',

        '#D8DDEB',
        '#ECE2D7',
    ],
    
    plotOptions: {
        column: {
            borderWidth: null,
            animation: false,
            shadow: true,
            showInLegend: false,
            pointPadding: .02
        },
        
        pie: {
            borderWidth: 0,
            shadow: false,
            size: '100%',
            slicedOffset: 5,
            animation: false,
            dataLabels: {
                enabled: false,
                connectorWidth: null
            }
        }
    },
    
    xAxis: {
        gridLineColor: '#DFDFDF',
        lineColor: '#DFDFDF',
        labels: {
            style: {
                color: "#999",
                font: "11px Helvetica, sans-serif"
            }
        },

        title: {
            style: {
                color: '#999',
                fontFamily: "Helvetica, sans-serif",
                fontSize: '12px'
            }
        }
    },
    
    yAxis: {
        gridLineColor: '#DFDFDF',
        lineColor: '#DFDFDF',
        lineWidth: 1,
        labels: {
            style: {
                color: "#999",
                font: "11px Helvetica, sans-serif"
            }
        },
        
        title: {
            style: {
                color: '#999',
                fontFamily: "Helvetica, sans-serif",
                fontSize: '12px'
            }
        }
    }
});
        
        
var chartSeries = [
{
    "name":"Inner Set",
    "type":"pie",
    "size":"60%",
    "data":[
        {
            "name":"A",
            "y":10.17,
            "color":
            "#7587A6"
        },
        {
         ...