Highcharts xrange

author(s):

by Michel Munzert

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>
<button id="button" >Set new data</button>
<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;
}

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 || [], function(val) {
            if (val > dataMax) {
              dataMax = val;
            }
          });
        });
        if (dataMax > Number.MIN_VALUE) {
          axis.dataMax = dataMax;
        }
      }
    });
  }(Highcharts));

  var data = [
 ...