Is It Possible To Have An Upcolor On A Area Graph Using Highcharts?

I have a Area chart that would like to know if it's possible to have an upcolor for when it goes up. The upColor option works in the waterfall, candlestick charts. What about area

Solution 1:

According to the comments - the area series doesn't have implemented the upColor feature to change the color of the increasing data. What can be done in this case is to use the zones feature to fill particular parts of the area.

Demo: https://jsfiddle.net/BlackLabel/73pm4awq/

events: {
  load() {
    const chart = this,
      series = chart.series[0],
      points = series.points,
      zones = [];

    series.points.forEach((p, i) => {
      if (points[i + 1] && p.y < points[i + 1].y) {
        zones.push({
          value: points[i + 1].x,
          color: 'green'
        })
      } else {
        zones.push({
          value: p.x,
          color: 'red'
        })
      }
    });
    series.update({
      zones: zones
    })
  }
}

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

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Solution 2:

I modified @Sebastian's response to compare every point to the first point in the series. "Since Inception"

events: {
  load() {
    const chart = this,
      series = chart.series[0],
      points = series.points,
      zones = [];

    series.points.forEach((p, i) => {
      if ( points[0].y < points[i].y ) {
        zones.push({
          value: points[i].x,
          color: 'green'
        })
      } else {
        
        zones.push({
          value: p.x,
          color: 'red'
        })
      }
    });
    series.update({
      zones: zones
    })
  }
}

In addition to the zoneAxis property series.zoneAxis which "Defines the Axis on which the zones are applied." according to the docs.

zoneAxis:'x'