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() {
            document.title = "Highcharts " + Highcharts.version;

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    borderWidth: 1,
                    marginTop: 95,
                    marginLeft: 35,
                    spacingBottom: 25,
                    options3d: {
                        alpha: 30,
                        beta: 30,
                        enabled: true,
                        viewDistance: 100,
                        depth: 25,
                        frame: {
                            back: {
                                color: '#A3A3C2',
                                size: 4
                            },
                            bottom: {
                                color: '#DBB8FF',
                                size: 10
                            },
                            side: {
                                color: '#8099E6',
                                size: 2
                            }
                        }
                    }
                },
                title: {
                    text: 'Number of Patents Granted in 2011'
                },
                subtitle: {
                    text: 'Alpha - 30, Beta - 30, depth - 25, distance - 100',
                },
                credits: { 
                    position: {
                        align: 'left',
                        x: 20
                    },
                    href: 'http://www.uspto.gov',
                    text: 'Source: U.S. Patent & Trademark Office'
                },
                xAxis: {
                    categories: [ 'United States', 'Japan', 'South Korea', 'Germany', 'Taiwan', 
                                  'Canada', 'France', 'United Kingdom', 'China', 'Italy' ],
                    labels: {
                       ...