score:6

Accepted answer

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

score:0

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.

score:4

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

Related Query

More Query from same tag