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-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/funnel.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

document.title = "Highcharts " + Highcharts.version;

    $(document).ready(function() {
       var chart = null;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                inverted: true
            },
            title: {
                text: "Q1 Revenue & Expense Chart"
            },
            xAxis: {
                type: 'category',
                showEmpty: false
            },
            yAxis: {
                title: {
                    text: 'UKP (£)'
                },
                showEmpty: false
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        inside: false,
                        style: {
                            fontWeight: 'bold'
                        },
                        color: '#E64545',
                        formatter: function () {
                            return Highcharts.numberFormat(this.y / 1000, 1, '.') + ' k';
                        }
                    }
                }
            },
            series: [{
                type: 'waterfall',
                upColor: Highcharts.getOptions().colors[0],
                color: '#E64545',
                name: 'Q1 Revenue',
                data: [{
                    name: 'Product A Sales',
                    y: 63700,
                    dataLabels: {
                        color: Highcharts.getOptions().colors[0]
                    }
                }, {
                    name: 'Product B Sales',
                    y: 33800,
                    dataLabels: {
                        color: Highcharts.getOptions().colors[0]
                    }
                }, {
                    name: 'Product C Sales',
...