JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!--<script src="https://code.highcharts.com/highcharts.js"></script>-->
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

// Data gathered from http://populationpyramid.net/germany/2015/
$(function() {
  // Age categories
  var categories = [
    '08/04 11',
    '08/04 12',
    '08/04 13',
    '08/04 14',
    '08/04 15',
    '08/04 16',
    '08/04 17',
    '08/04 18',
    '08/04 19',
    '08/04 20',
    '08/04 21',
    '08/04 22',
    '08/04 23',
    '08/05 00',
    '08/05 01',
    '08/05 02',
    '08/05 03',
    '08/05 04',
    '08/05 05',
    '08/05 06',
    '08/05 07',
    '08/05 08',
    '08/05 09',
    '08/05 10',
    '08/05 11'
  ];

  $(document).ready(function() {
    $('#hourly').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: 'Hourly Summary Report'
      },
      subtitle: {
        text: ''
      },
      xAxis: [{
      	type: 'datetime',
        minRange: 1,
        //categories: categories,
        reversed: false,
        labels: {
          //step: 1
        }
      }, { //mirror axis on right side
        opposite: true,
        reversed: false,
        type: 'datetime',
        minRange: 1,
        //categories: categories,
        linkedTo: 0,
        labels: {
          //step: 1
        }
      }],
      rangeSelector: {
        enabled: true,
        buttons: [{
          count: 1,
          type: 'hour',
          text: '1H'
        }, {
          count: 6,
          type: 'hour',
          text: '6H'
        }, {
          count: 12,
          type: 'hour',
          text: '12H'
        }, {
          count: 24,
          type: 'hour',
          text: '24H'
        }, {
          type: 'all',
          text: 'All'
        }],
        //inputEnabled: true,
        selected: 4
      },
      yAxis: [{
        min: -1000,
        max: 2000,
        labels: {
          text: 'hours'
        }
      }, {
        min: -73.66,
        max: 73.66,
        title: {
          text: 'FRT'
        },
        opposite: true
      }],
      plotOptions: {
        series: {
          stacking: 'normal',
          pointStart:...