chart.js bar chart color change based on value
25,411
Solution 1
You can color each individual bar by accessing window.myObjBar.datasets[0].bars[0].fillColor
property, then update the chart
In your case, you can loop through your elements and color each bar accordingly
var bars = myObjBar.datasets[0].bars;
for(i=0;i<bars.length;i++){
var color="green";
//You can check for bars[i].value and put your conditions here
bars[i].fillColor = color;
}
myObjBar.update(); //update the chart
A working JsFiddle
Solution 2
You could instead check the value before you create the chart:
var context = document.getElementById('healthRatings').getContext('2d');
var colors = []
for(var i = 0; i < loc_health.length; i++){
var color;
switch(loc_health[i]){
case 1:
color = "red";
break;
case 2:
color = "orange";
break;
case 3:
color = "yellow";
break;
case 4:
color = "green";
break;
//etc..
}
colors[i] = color;
}
window.myObjBar = new Chart(context).Bar({
labels : loc_id_grab,
datasets : [{
backgroundColor: colors,
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : loc_health
}]
}, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 1,
scaleStartValue : 0,
barShowStroke : false,
barStrokeWidth : 1,
showTooltips : false,
barValueSpacing : 2,
animation : false,
responsive : true,
maintainAspectRatio : true
});
Author by
dchadney
Updated on May 23, 2020Comments
-
dchadney almost 4 years
I have a bar chart that is showing data from a database and I need to be able to show a different color for different numeric values. For example the 'loc_health' returns values between 1 and 10 based, so I need to show 1 as red, 2 as orange, 3 as yellow, 4 as green etc...
I have searched the chart.js documentation but cannot find a solution for this.
var context = document.getElementById('healthRatings').getContext('2d'); window.myObjBar = new Chart(context).Bar({ labels : loc_id_grab, datasets : [{ fillColor : ["rgba(220,220,220,0.5)"], strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : loc_health }] }, { scaleOverride : true, scaleSteps : 10, scaleStepWidth : 1, scaleStartValue : 0, barShowStroke : false, barStrokeWidth : 1, showTooltips : false, barValueSpacing : 2, animation : false, responsive : true, maintainAspectRatio : true });