JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$(function () {
    $('#container').highcharts('StockChart', {

        navigator: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },

        rangeSelector: {
            selected: 1,
            enabled: false
        },


        yAxis: [{
            min: -1e6,
            max: 1e6,
            labels: {
                align: 'left',
                format: ''
            },
            title: {
                text: 'OHLC'
            },
            height: '30%'
        }, {
            min: -1e6,
            max: 1e6,
            labels: {
                align: 'left',
                x: -3,
                format: ''
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0
        }],
        xAxis: [{
            min: 2,
            max: 4            
        }, {
            opposite: true,
            tickPosition: "inside",
            labels: {
                y: 20
            },
            min: 0,
            max: 3,
            top: "30%"
        }],

        series: [{
            inverted: true,
            type: 'scatter',
            name: 'AAPL',

            data: [7.0, 6.9, 9.5, 14.5, 18.4],
            yAxis: 0,
            xAxis: 0
        }, {
            inverted: true,
            type: 'scatter',
            name: 'Volume',
            data: [3, 6, 8, 5, 2],
            yAxis: 1,
            xAxis: 1

        }]
    });

});