Highcharts xrange

author(s):

by jrdiaz

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}
.highcharts-series rect {
    stroke-width: 1px;
    stroke: black;
}

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;
                    point.shapeArgs = {
                        x: point.plotX,
                        y: point.plotY + metrics.offset,
                        width: barWidth,
                        height: metrics.width
                    };
                    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...