JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

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

CSS

#container {
  max-height: 800px;
  height: 75vh;
}

/* Conflict with Bootstrap, not needed after v7.0.1 */
.highcharts-bindings-wrapper * {
  box-sizing: content-box;
}

JavaScript

Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function(data) {

  // split the data set into ohlc and volume
  var ohlc = [],
    ohlcXData = [],
    volume = [],
    volumeXData = [],
    dataLength = data.length,
    i = 0;

  for (i; i < dataLength; i += 1) {
    ohlc.push([data[i][0],
      data[i][1], // open
      data[i][2],
      data[i][3],
      data[i][4]
    ]);

    volume.push([
      data[i][0],
      data[i][5] // the volume
    ]);
  }

  Highcharts.stockChart('container', {

    chart: {
      events: {
        render() {
          let chart = this,
            xAxis = chart.xAxis,
            controlLine = chart.yAxis[0].resizer.controlLine;

          xAxis[1].axisGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
          xAxis[1].labelGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
        }
      }
    },

    xAxis: [{

    }, {}],
    yAxis: [{
      labels: {
        align: 'left'
      },
      height: '65%',
      resize: {
        enabled: true
      }
    }, {
      labels: {
        align: 'left'
      },
      top: '80%',
      height: '20%'
    }],
    series: [{
      type: 'line',
      id: 'aapl-ohlc',
      name: 'AAPL Stock Price',
      data: ohlc
    }, {
      type: 'line',
      id: 'aapl-volume',
      name: 'AAPL Volume',
      data: volume,
      yAxis: 1,
      xAxis: 1
    }]
  });
});