JSFiddle - React, Tailwind, and code Playground

by Bruce Axtens

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://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 () 
  {

    /**
     * Highcharts X-range series plugin
     */
    (function (H) {
        var defaultPlotOptions = H.getOptions().plotOptions,
            columnType = H.seriesTypes.column,
            each = H.each;
        defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
        H.seriesTypes.xrange = H.extendClass(columnType, 
            {type: 'xrange',parallelArrays: ['x', 'x2', 'y'],
            animate: H.seriesTypes.line.prototype.animate,
            translate: function () {
                columnType.prototype.translate.apply(this, arguments);
                var series = this, xAxis = series.xAxis,yAxis = series.yAxis,metrics;
                
                // Borrow the column series metrics, but with swapped axes
                yAxis.closestPointRange = 1;       series.xAxis = yAxis; series.yAxis = xAxis;
                metrics = this.getColumnMetrics(); series.xAxis = xAxis; series.yAxis = yAxis;
                H.each(series.points, function (point) {
                    barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
                    //barHeight = if (yAxis = 0) {metrics.width} else {metrics.width};
                    point.shapeArgs = {
                        x: point.plotX, 
                        y: point.plotY + metrics.offset,
                        width: barWidth ,
                        height: metrics.width * 0.3
                    };
                    point.tooltipPos[0] += barWidth / 2; point.tooltipPos[1] -= metrics.width / 2;
                });
            }
        });

        /**
         * Max x2 should be considered in xAxis extremes
         */
        H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
            var axis = this, dataMax = Number.MIN_VALUE;
            proceed.call(this);
            if (this.isXAxis) 
                {each(this.series, function (series) {each(series.x2Data || [], function (val) {if (val >...