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%'
});