JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

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

JavaScript

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

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [
      [
        'week', // unit name
        [1] // allowed multiples
      ],
      [
        'month',
        [1, 2, 3, 4, 6]
      ]
    ],

    i = 0;

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

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

  $(document).ready(function() {

    (function(H) {
      var each = H.each,
        pick = H.pick,
        addEvent = H.addEvent,
        removeEvent = H.removeEvent,
        merge = H.merge,
        wrap = H.wrap,
        M = 'M',
        L = 'L',
        PREFIX = 'highcharts',
        UNDEFINED;

      var defaultOptions = {
        barBackgroundColor: "#bfc8d1",
        barBorderColor: "#bfc8d1",
        barBorderRadius: 0,
        barBorderWidth: 1,
        buttonArrowColor: "#666",
        buttonBackgroundColor: "#ebe7e8",
        buttonBorderColor: "#bbb",
        buttonBorderRadius: 0,
        buttonBorderWidth: 1,
        size: 14,
        height: 14,
        liveRedraw: true,
        minWidth: 6,
        rifleColor: "#666",
        step: 0.2,
        trackBackgroundColor: "#eeeeee",
        trackBorderColor: "#eeeeee",
        trackBorderWidth: 1,
        vertical: true,
        width: 14,
        zIndex: 3
      }
			
			H.addEvent(
				H.Chart,
				'render',
				function () {
					let ticks = this.yAxis[0].ticks,
						tickPositions = this.yAxis[0].tickPositions,
						lastTick = ticks[tickPositions[tickPositions.length - 1]];
						
						if (lastTick && lastTick.label) {
							lastTick.label.attr({
								translateY:...