JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

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

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

JavaScript

$(function() {

  $('#container').highcharts({
    chart: {
      type: 'column',
    },
    xAxis: [{
      type: "datetime",
      tickInterval: 60 * 60 * 1000,
      minorTickInterval: 15 * 60 * 1000,
      minorTickWidth: 1,
      tickLength: 45,
      minorTickLength: 10,
      labels: {
        y: 30,
      }
    }, {
      type: "datetime",
      tickInterval: 30 * 60 * 1000,
      tickLength: 20,
      offset: 0,
      linkedTo: 0,
      labels: {
        enabled: false
      }
    }],

    series: [{
      name: 'John',
      data: [
        [Date.UTC(2010, 0, 1, 10, 15, 0), 2]
      ]
    }, {
      name: 'Jane',
      data: [
        [Date.UTC(2010, 0, 1, 12, 30, 0), 2]
      ],

    }, {
      name: 'Joe',
      data: [
        [Date.UTC(2010, 0, 1, 8, 25, 0), 2]
      ],
    }]
  });
});