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

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

• javascript
• bar-chart
• chart.js

• Possible duplicate of Create IF to change chart.js bar color – potatopeelings Commented Feb 25, 2016 at 21:26

3 Answers 3

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

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

You could do something like that

changeColor(loc_health);

function changeColor(random_value){
   switch(random_value){
       case = 1:
          datasets[0].fillColor = "#000";
          break;
       case = 2:
          //etc

   }
   myObjBar.update();
}

Calling update() on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing points, then render those in one animated render loop.