Dynamically Set Bar Color Based on Previous Node Value

You can use our dataparse method to dynamically determine color value of bars at parse time. That event is fired when the data is ready to be parsed by ZingChart. So I loop through and add color based on the previous value dynamically. I left the first bar a neutral color because there is no previous value to compare it to.

Code Here

var myConfig = {
    type: 'bar', 
    title: {
      text: 'Dynamically Determine Increase/Decrease Bar Color'
    },
    series: [
        {
            values: [35,42,67,89,25,34,67,25]
        }
    ]
};

// define colors to se
var baseColor = '#64b5f6';
var increaseColor = '#81c784';
var decreaseColor = '#e57373';

// function to loop through series
function applyStyles(seriesArray) {
  // base stays blue
  var stylesArray = [baseColor];

  // loop through series objects (multiple plots is possible)
  seriesArray.forEach(function(seriesObj) {
    if (seriesObj && seriesObj.values) {

      // add a color for each node based on increase or decreased value
      var prevValue = seriesObj.values[0];
      for (var i=1; i<seriesObj.values.length;i++) {
        if (seriesObj.values[i] > prevValue) {
          stylesArray.push(increaseColor);
        } else {
          stylesArray.push(decreaseColor);
        }
        prevValue = seriesObj.values[i];
      }
      seriesObj.styles = stylesArray;
    }
  });
}

// when data is ready apply the rules to the chart
zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
  if (oGraph && oGraph.graphset[0])
    applyStyles(oGraph.graphset[0].series);

  return oGraph;
});

zingchart.render({ 
    id: 'myChart', 
    data: myConfig, 
    height: '100%', 
    width: '100%' 
});

Relative Documentation

1. dataparse Event
2. styling nodes