Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

function flipZones() {
  var zones = [];
  Highcharts.each(this.series[0].points, function(point, index) {
    var color = ''
    zones.push({
      color: point.color,
      value: point.x
    });
  });

  this.series[0].update({
    fillOpacity: 1,
    zoneAxis: 'x',
    zones: zones
  });
}

const chart = Highcharts.chart('container', {
  chart: {
    events: {
      load: flipZones
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    type: 'areaspline',
    data: [
      [new Date('2017-01-02T00:00:00Z').getTime(), 3],
      [new Date('2017-01-03T00:00:00Z').getTime(), 2],
      [new Date('2017-01-04T00:00:00Z').getTime(), 4.5],
      [new Date('2017-01-05T00:00:00Z').getTime(), 6],
      [new Date('2017-01-06T00:00:00Z').getTime(), 8],
    ],
    zoneAxis: 'y',
    zones: [{
      value: 4,
      color: 'pink',
    }, {
      value: 6,
      color: 'orange',
    }, {
      value: 9,
      color: 'lightblue',
    }]
  }]
});