dchadney dchadney - 11 months ago 142
Javascript Question

chart.js bar chart color change based on value

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

Answer Source

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;
       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