CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highcharts
Ibra
Ibra

Reputation: 1072

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 charts anyone has an idea if it's possible? Below is a snippet of my series.

series: [ {
        upColor: Highcharts.getOptions().colors[2],
        data: AreaData,
        type: 'area',
        name: 'NAV',
        id: 'GG'
           
        }
    ], 



 [1483074000000, 529565.95]
 [1485838800000, 581409.01]
 [1488258000000, 635260.08]
 [1490932800000, 664102.35]
 [1493352000000, 638819.73]
 [1493524800000, 638819.73]
 [1494475200000, 638911]
 [1494561600000, 689111.15]
 [1494820800000, 717497.05]
 [1494907200000, 720143.97]
[1494993600000, 724890.17]

Upvotes: 0

Views: 91

Answers (2)

Ibra
Ibra

Reputation: 1072

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'

Upvotes: 1

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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

Upvotes: 1

Related Questions