JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://joe.kuan.org/js/jquery.mousewheel.min.js"></script>
<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,
                    height: 550,
                    width: 450,
                    marginTop: 140,
                    marginRight: 50,
                    marginLeft: 30,
		    marginBottom: 30,
                    options3d: {
                        alpha: 45,
                        beta: 35,
                        depth: 100,
			viewDistance: 50,
                        enabled: true
                    }
                },
		title: {
		    text: null
		},
                subtitle: {
                    text: 'alpha: 45, beta: 35, viewDistance: 50'
                },
                credits: { 
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    }
                },
                tooltip: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: null
                    },
                },
                plotOptions: {
                    column: {
                        pointPadding: 0,
                        groupPadding: 0,
                        //color: '#5A9D9B',
                        //edgeColor: '#4E898A',
                        color: '#C5542D',
                        edgeColor: '#953A20'
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{
                    data: [ 1500 ],
                    depth: 5,
                    groupZPadding: 95
                }, {
                    data: [ 1300 ],
                    depth: 10,
                ...