JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/highcharts-3d.js"></script>
<script src="https://github.highcharts.com/highcharts-more.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

<button id="plain">Plain</button>
<button id="3d">3D</button>

CSS

#container {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

JavaScript

var chart = Highcharts.chart('container', {
        title: {
            visible: false,
            text: ""
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            visible: false
        },
        yAxis: {
            visible: false
        },
        labels: {
            visible: false
        },
        series: []
    });



$('#plain').click(function () {
    chart.update({
        title: {
            text: 'Month To Date Carrier Performance',
            visible: true,
            style: {
                fontSize: '16px',
                color: '#1c3660',
                fontFamily: 'Titillium Web'
            }
        },
        chart: {
            height: 500,
            backgroundColor: '#fff',
            type: 'column',
            plotBackgroundColor: 'rgb(255, 255, 255)',
            options3d: {
                skew3d: false,
                enabled: false,
                alpha: 15,
                beta: 0,
                viewDistance: 25,
                depth: 100
            }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ["SAIA", "R&L Carriers"],
            visible: true,
            labels: {
                skew3d: false,
                style: {
                    fontSize: '13px',
                    color: '#1c3660',
                    fontFamily: 'Titillium Web'
                }
            },
            gridLineColor: '#bcf'
        },
        yAxis: [
            {
                visible: true,
                title: {
                    text: 'Count of Loads',
                    skew3d: false,
                    style: {
                        fontSize: '13px',
                        color: '#1c3660',
                        fontFamily: 'Titillium Web'
                    }
                },
                gridLineColor: '#bcf'
            },
           ...