XRange

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container2"></div>
<div id="container"></div>

CSS

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

JavaScript

(function (H) {
    var defaultPlotOptions = H.getOptions().plotOptions,
        columnType = H.seriesTypes.column;

    defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
    H.seriesTypes.xrange = H.extendClass(columnType, {
        type: 'xrange',

        translate: function () {
            columnType.prototype.translate.apply(this, arguments);
            var series = this,
                xAxis = series.xAxis,
                yAxis = series.yAxis,
                barHeight = yAxis.len / ((yAxis.max - yAxis.min) + 1),
                barWidth;

            barHeight *= series.options.height || 1;

            H.each(series.points, function (point) {
                barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
                point.shapeArgs = {
                    x: point.plotX,
                    y: point.plotY - (barHeight / 2),
                    width: barWidth,
                    height: barHeight
                };
                point.tooltipPos[0] += barWidth / 2;
                point.tooltipPos[1] -= barHeight / 2;
            });
        },
        generatePoints: function () {
            columnType.prototype.generatePoints.apply(this, arguments);
            var series = this,
                xAxis = series.xAxis,
                max = Number.MIN_VALUE,
                pointX2;
            H.each(series.points, function (point) {
                pointX2 = H.pick(point.x2, point.x + (point.len || 0));
                if (pointX2 > max) {
                    max = pointX2;
                }
            });
            if (max > xAxis.max) {
                series.xAxis.setExtremes(xAxis.min, max);
            }
        }
    });
}(Highcharts));
// THE CHART
$('#container').highcharts({
    chart: {
        type: 'xrange',
        marginLeft: 150
    },
    xAxis: {
        type: 'datetime',
        min: new Date('February 4, 2015').getTime(),
        max: new Date('February 25,...