Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

(function(H) {
  H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed, lines) {
    let ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    let {
      start,
      end
    } = ret.options,
      path = ret.svgElem.attr('d').split(' '),
      [x1Index, y1Index, x2Index, y2Index] = [1, 2, 4, 5],
      [x3Index, y3Index, x4Index, y4Index] = [7, 8, 10, 11],

      isPlotLineVertical = Math.abs(path[x1Index] - path[x2Index]) < 0.00001;
    if (isPlotLineVertical) {
      if (start) {
        path[y1Index] = ret.axis.chart.yAxis[0].toPixels(start);
        path[y4Index] = ret.axis.chart.yAxis[0].toPixels(start);

      }
      if (end) {
        path[y2Index] = ret.axis.chart.yAxis[0].toPixels(end);
        path[x3Index] = ret.axis.chart.yAxis[0].toPixels(end);

      }
    } else {
      if (start) {
        path[x1Index] = ret.axis.chart.xAxis[0].toPixels(start);
        path[x4Index] = ret.axis.chart.xAxis[0].toPixels(start);

      }
      if (end) {
        path[x2Index] = ret.axis.chart.xAxis[0].toPixels(end);
        path[x3Index] = ret.axis.chart.xAxis[0].toPixels(end);

      }
    }

    ret.svgElem.attr({
      d: path.join(' ')
    });

    return ret;
  });
}(Highcharts));

Highcharts.chart('container', {

  yAxis: {
    plotBands: [{
      from: 5,
      to: 6,
      color: 'blue',
      start: 1,
      end: 2
    }]
  },
  series: [{
    data: [4, 3, 5, 6, 2, 3]
  }]

});