score:1

Accepted answer

You can use dynamically calculated zones, for example:

events: {
  load: function() {
    let points = this.series[0].points,
      zones = [],
      color;

    function addZone(value, color) {
      zones.push({
        value: value,
        color: color
      });
    }

    points.forEach(function(p, i) {
      if (points[i - 1]) {
        if (p.y >= points[i - 1].y) {

          if (color && color !== 'green') {
            addZone(points[i - 1].x, 'red');
          }

          color = 'green';

        } else if (p.y <= points[i - 1].y) {
          if (color && color !== 'red') {
            addZone(points[i - 1].x, 'green');
          }

          color = 'red';
        }
      }

      addZone(p.x, color);
    });

    this.series[0].update({
      zones: zones
    });
  }
}

Live demo: http://jsfiddle.net/BlackLabel/jmckag4q/1/

API Reference: https://api.highcharts.com/highcharts/series.line.zones


Related Query

More Query from same tag