JSFiddle - React, Tailwind, and code Playground

by Edi Carlos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var barChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
        {
            label: '# of Votes',
                   data: [12, 19, 3, 5, 3, 3],
                   fillColor: "rgba(220,220,220,0.5)",
                   strokeColor: "rgba(220,220,220,0.8)",
                   highlightFill: "rgba(220,220,220,0.75)",
                   highlightStroke: "rgba(220,220,220,1)",
                   borderWidth: 1
        }
    ]
};

var ctx = document.getElementById('myChart').getContext('2d');
       window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });
       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
       if(bars[i].value<3){
        color="red";
       }
       else if(bars[i].value<5){
        color="orange"

       }
       else if(bars[i].value<8){
        color="yellow"
       }
       else{
        color="green"
       }

       bars[i].fillColor = color;

    }
    myObjBar.update(); //update the cahrt