JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-3d.js"></script>
	<body>
    <div id="container"></div>
	</body>

JavaScript

$(function () {
    $(document).ready(function() {

	Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
	    return {
		radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		stops: [
		    [0, color],
		    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
		]
	    };
	});

        document.title = "Highcharts " + Highcharts.version;
	var sliced = false;
	var strBrk = 18;

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                borderWidth: 1,
		spacingBottom: 45,
                options3d: {
                    alpha: 55,
                    beta: 0,
                    enabled: true
                }
            },
            title: {
                text: 'Average Hours Per Day, Men and Women (2013)'
            },
	    subtitle: {
		text: 'Values in unit of hour, (Total - 24 hours)'
	    },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               href: 'http://www.bls.gov/news.release/pdf/atus.pdf',
               text: 'Bureau of Labor Statistics, US Dept. of Labor.'
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
		pie: {
		    center: [ '50%', '45%' ],
		    depth: 50,
		    slicedOffset: 40,
		    startAngle: 30,
		    dataLabels: {
			// Quick hack function to break the long label
			formatter: function() {
			    var name = this.point.name;
			    var str = name.substring(0, strBrk);
			    var y = this.y;

			    for (var i = strBrk; i < name.length; i++) {
				if (name[i] == ' ') {
				    str += '<br>';
				    str += name.substring(i+1);
				    str += ", " + y;
				    return str;
				}
				str += name[i];
			    }
			    str += ", " + y;
			    return str;
			},
			distance: 60
		    },
		    size: "120%"
		}
            },
            series: [{
                type: 'pie',
          ...