CODEWITHSUNDEEP
mysqlhighcharts
Blue Smurf
Blue Smurf

Reputation: 3

How to dynamically change line color based on value being lower than previous in highcharts

I am trying to build a line chart using highchart.js that uses the color green and black. The data is pulled from an SQL database and if the value is higher than the previous value it is green. If the value is less than the previous value than the color is black.

I am new at this and have been searching and searching but the only things I find is using zones to change the colors.

Can anyone help me on this?

Upvotes: 0

Views: 656

Answers (1)

Core972
Core972

Reputation: 4114

I created this example, it should help you :

series: [{
  name: 'Random data',
  colorByPoint: true,
  data: (function() {
    // generate an array of random data
    var time = (new Date()).getTime(),
      i,
      yValue;

    for (i = -19; i <= 0; i += 1) {
      yValue = Math.random();

      if (i > -19 && yValue > data[data.length - 1].y) { // Green point
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      } else if (i > -19 && yValue <= data[data.length - 1].y) { // black point
        zones.push({
          color: "#000",
          value: time + i * 1000,
        });
      } else { // first point alway green
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      }
      data.push({
        x: time + i * 1000,
        y: yValue
      });
    }
    return data;
  }()),
  zoneAxis: "x",
  zones: zones
}]

Fiddle

Upvotes: 2

Related Questions