Q: Change bar color in chart.js depending on value I want to create a bar chart using chart.js (www.chartjs.org). The bar fill color should change depending on the value. 
E.g., if the value is less than 10, color is green, 11-15 means yellow, and 16-20 is red.
Is it possible to do that with chart.js, and how?

A: Chartjs actually allows for background-color to be an array, so you can provide an array of colors according to what you need. This means that you can create the colors where you create the data set. In my own case I didn't something like:
    backgroundColor: [
        <?=$color?>
        ],
    data: [
        <?=$tableData;?>
    ],

where $color was something like 'rgba(0,255,0,1)','rgba(255,0,0,1)', and $tableData was something like 1,-1.
I was pushing the data from the server using php, but if you want to do something just in JavaScript the sample below may help you.
This is the right way to set the colors of each bar on a Chartjs chart.
I got the sample below from NanYu at the link above.
var chartColors = {
  color1: 'rgba(77, 166, 255, 0.5)',
  color2: 'rgba(218, 165, 32, 0.5)',
  color3: 'rgba(175, 0, 42, 0.5)'
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['value 1', 'value 2', 'value 3', 'value 4'],
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: [
        chartColors.color1,
        chartColors.color1,
        chartColors.color1,
        chartColors.color1
      ],
      data: [29, 57, 65, 42]
    }],
  }
});

var colorChangeValue = 50; //set this to whatever is the deciding color change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
  if (dataset.data[i] < 30) {
    dataset.backgroundColor[i] = chartColors.color1;
  }
  else if ((dataset.data[i] > 31) && (dataset.data[i] <= 60)){
    dataset.backgroundColor[i] = chartColors.color2;
  }
  else{
   dataset.backgroundColor[i] = chartColors.color3;
  }
}
myChart.update();


A: Very old post but for the people that come here from Google search there is a way to do this with ChartJS. 
You can transform your data to 2 datasets:
- 1st with the positive values, replacing all the negative values with 0
- 2nd with the negative values, replacing all the positive values with 0  
originalSet = [1,-1, 3,-3, 5]
positiveSet = [1, 0, 3, 0, 5]
negativeSet = [0,-1, 0,-3, 0]

Then simply add the color of your choice for each set:
datasets: [
  { data: positiveSet, backgroundColor: 'rgba(0,255,0,0.5)' },
  { data: negativeSet, backgroundColor: 'rgba(255,0,0,0.5)' }
]

This method can be applied not only for positive/ negative separation, but in general when you want to style based on values.

A: I've never used chart.js, but this would be my suggestion...
Chart.defaults.global = { //this has all the information for the chart, I just removed everything else
    // String - Colour of the scale line
    scaleLineColor: "rgba(0,0,0,.1)"
}

I would so something like....
if (number < 10) { Chart.defaults.global.scaleLineColor = "rgba(whatever)" } 

Then just fill it in with all of your code and such. Hopefully this helps!

A: I didn't find a way of doing this using chart.js, and switched to google visualization. 
There it can be done like this:
 // first index in chartData array describes the fields in the following indexes,
 // The first two are the X and Y values, role: style tells the chart to use the third
 // field as the style of that particular bar. role: annotation tells the chart to 
 // add the contents of the fourth field as a label to each bar.
 var chartHeader = [['Time', 'Measurement', { role: 'style' }, { role: 'annotation' }]];

 function ConvertJsonToChartData(json) {
        var chartData = chartHeader;

        for (var key in json) {
            var x = json[key].X;
            var elapsedTime = json[key].ElapsedTime;

            // set style based on value of elapsedTime
            var style = 'black';
            if (elapsedTime > GlobalSettings['criticalThreshold']) {
                style = GlobalSettings['criticalColor'];
            } else if(elapsedTime > GlobalSettings['warningThreshold']) {
                style = GlobalSettings['warningColor'];
            }

            // add a new datapoint to the chart
            chartData.push([x, elapsedTime, style, elapsedTime]);
        }
        return chartData;
    }

    function MakeHourGraph(json) {
        var chartData = ConvertJsonToChartData(json);

        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
            title: 'Response Times',
            hAxis: { title: 'Hour', titleTextStyle: { color: 'blue' } },
            vAxis: { title: 'msecs', titleTextStyle: { color: 'blue' } },
            legend: { position: "none" }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('hour_chart_div'));

        chart.draw(data, options);
    }

