JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

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

JavaScript

$(function () {
    $(document).ready(function() {
        document.title = "Highcharts " + Highcharts.version;
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                plotBorderWidth: 2,
                plotBackgroundColor: '#D6D6EB',
                plotBorderColor: '#D8D8D8',
                plotShadow: true,
                spacingBottom: 43,
                width: 350,
                height: 120
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20,
                  y: 0
               },
               text: 'Source: U.S. Patent & Trademark Office'
            },
            subtitle: {
               text: 'Patents Granted in 2011 Originated from US (%)',
               verticalAlign: 'bottom',
               y: 23
            },
            xAxis: {
                categories: [ 'US' ],
                tickLength: 0
            },
            title: { text: null },
            legend: { enabled: false },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    y: 20
                },
                min: 0,
                max: 100,
                tickInterval: 20,
                minorTickInterval: 10,
                tickWidth: 1,
                tickLength: 8,
                minorTickLength: 5,
                minorTickWidth: 1,
                minorGridLineWidth: 0
            },
            plotOptions: {
            },
            series: [{
               borderColor: '#7070B8',
               borderRadius: 3,
               borderWidth: 1,
               color: {
                   linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                   stops: [ //[ 0.35, '#7070B8' ],
                            [ 0, '#D6D6EB' ],
                            [ 0.3, '#5C5CAD' ],
                            [...