JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$(function () {

 (function(H) {
  let defaultPlotOptions = H.getOptions().plotOptions;
  let { column: columnType } = H.seriesTypes;
  let { each } = H;

  defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
  H.seriesTypes.xrange = H.extendClass(columnType, {
    type: 'xrange',
    parallelArrays: ['x', 'x2', 'y'],
    requireSorting: false,
    animate: H.seriesTypes.line.prototype.animate,

    /**
      Borrow the column series metrics, but with swapped axes. This gives free access
      to features like groupPadding, grouping, pointWidth etc.

      @public
      */
    getColumnMetrics() {
      let metrics;
      let { chart } = this;
      let swapAxes = function() {
        each(chart.series, function(s) {
          let { xAxis } = s;
          s.xAxis = s.yAxis;
          s.yAxis = xAxis;
        });
      };

      swapAxes();

      this.yAxis.closestPointRange = 1;
      metrics = columnType.prototype.getColumnMetrics.call(this);

      swapAxes();

      return metrics;
    },
    calc(points){

        let output = [];
        let calc = function() {
            let hasChange = false;
            for (let i = 0, j = points.length; i < j; i++) {
                let noCommon = true;
                for (let k = 0; k < output.length; k++) {
                    if (points[i]['x'] >= output[k]['x'] &&
                        points[i]['x'] <= output[k]['x2'] ||
                        points[i]['x2'] >= output[k]['x'] &&
                        points[i]['x2'] <= output[k]['x2']) {
                        output[k]['x'] = Math.min(points[i]['x'], output[k]['x']);
                        output[k]['x2'] = Math.max(points[i]['x2'], output[k]['x2']);
                        noCommon = false;
                        hasChange = true;
                        break;
                    }
                }
                if (noCommon)
                    output.push(points[i]);
            }
            if (hasChange) {
               ...