Highcharts dynamically change bar color based on value
You can use color zones (API) to have different colors based on the value of a column.
An example with values below/above the value 10 having different colors (JSFiddle):
plotOptions: {
column: {
zones: [{
value: 10, // Values up to 10 (not including) ...
color: 'blue' // ... have the color blue.
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
plotOptions: {
column: {
zones: [
{
value: -1,
color: 'red',
},
{
color: 'green'//default color
},
],
},
}
In the parser you can replace that:
$.each(response, function(i, item) {
categorySeries .push(response[i].dateVal);
dataSeries.push(response[i].count);
});
with
$.each(response, function(i, item) {
categorySeries.push(response[i].dateVal);
if(response[i].count >= 10) {
dataSeries.push({
y: response[i].count,
color: 'red'
});
}
else {
dataSeries.push(response[i].count);
}
});
or use zones.