JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.series_0 g path{
  fill: #FF0000 !important;
}

.highcharts-series-0 rect{
  fill: #FF0000 !important;
}

.series_1 g path{
  fill: #00FF00 !important;
}

.highcharts-series-1 rect{
  fill: #00FF00 !important;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    pointPlacement: 'on'
  },
  title: {
    text: 'Highcharts X-range'
  },
  plotOptions: {
    series: {
      pointPlacement: 'on',
      grouping: false
    }
  },
  xAxis: {
    type: 'datetime',
    min: Date.UTC(2014, 10, 21, 0, 0),
    max: Date.UTC(2014, 10, 21, 24, 0),
    gridLineWidth: 1,
    labels: {
      format: '{value:%H}',
      tickInterval: 3600 * 1000
    }
  },
  yAxis: {
    gridLineWidth: 1,
    min: 0,
    title: {
      enabled: false
    }
  },
  series: [{
      name: 'Project 1',
      className: "series_0",
      pointPadding: 0,
      pointWidth: 5,
      groupPadding: 0,
      data: [{
        x: Date.UTC(2014, 10, 21, 4, 15),
        x2: Date.UTC(2014, 10, 21, 19, 15),
        y: 1
      }, {
        x: Date.UTC(2014, 10, 21, 4, 15),
        x2: Date.UTC(2014, 10, 21, 19, 15),
        y: 2
      }, ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Project 2',
      className: "series_1",
      pointPadding: 0,
      pointWidth: 5,
      groupPadding: 0,
      data: [{
        x: Date.UTC(2014, 10, 21, 4, 15),
        x2: Date.UTC(2014, 10, 21, 19, 15),
        y: 3
      }, {
        x: Date.UTC(2014, 10, 21, 4, 15),
        x2: Date.UTC(2014, 10, 21, 19, 15),
        y: 4
      }, ],
      dataLabels: {
        enabled: true
      }
    }
  ]
});