JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            title: {
                text: 'Quotation and Sales Analysis'
            },
            xAxis: [{
                categories: ['May 11', 'Jun 11', 'Jul 11', 'Aug 11', 'Sep 11', 'Oct 11', 'Nov 11', 'Dec 11', 'Jan 12', 'Feb 12', 'Mar 12', 'Apr 12', 'May 12']
            }],
            yAxis: [{ // Primary yAxis
                min: -1,
                tickInterval: 1,
                title: {
                    text: '# Quotations',
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Sales Value (R)'
                },
                min: -100,
                tickInterval: 100,
                labels: {
                    formatter: function() {
                        return this.value +'k';
                    }
                },
                opposite: true
            }],
            series: [{
                name: '# Quotations',
                type: 'column',
                
                data: [null, null, null, 1, null, null, null, null, null, null, 3, null, null]
    
            }, {
                name: 'Sales Value (R)',
                type: 'column',
                yAxis: 1,
                data: [100, 18, 170, -7, 23, -90, 4, 27, 53, -40, 454, 85, 24]
            }]
        });
    });
    
});