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/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'
            },
            title: {
                text: "Q1 Revenue & Expense Chart"
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: 'UKP (£)'
                }
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold'
                        },
                        color: 'white',
                        formatter: function () {
                            return Highcharts.numberFormat(this.y / 1000, 1, '.') + ' k';
                        }
                    }
                }
            },
            series: [{
                type: 'waterfall',
                upColor: Highcharts.getOptions().colors[0],
                color: '#E64545',
                data: [{
                    name: 'Product Sales',
                    y: 63700
                }, {
                    name: 'Renew Contracts',
                    y: 27000
                }, {
                    name: 'Total Revenue',
                    isIntermediateSum: true,
                    color: '#4F5F70'
                }, {
                    name: 'Expenses',
                    y: -43000
                }, {
                    name: 'Net Profit',
                    isSum: true,
                    color: Highcharts.getOptions().colors[1]
                }]
           }]
        });

       });