Highcharts dynamically change bar color based on value

Question

I am creating a column type graph using json data. Here is the JS function i call to get the data using ajax call and plot the chart.

function getChart(){
    var categorySeries = [];
    var dataSeries = [];            
    var url = "CallToControllerURL";

    $.getJSON(url, function(response) {             
        $.each(response, function(i, item) {
            categorySeries .push(response[i].dateVal);                  
            dataSeries.push(response[i].count);             
        });

        $('#chartDiv').highcharts({
            chart : {type : 'column'},
            title : {text : 'Date vs Count'},
            xAxis : {categories : categorySeries, crosshair : true},
            yAxis : {allowDecimals: false, min : 0, title : { text : 'Count'}},
            plotOptions : { column : {  pointPadding : 0.2, borderWidth : 0,    allowPointSelect: true  } },
            series : [ {name : 'Nbr of Records',data : dataSeries } ]
        });             
    });
}

I want to be able to modify the color of bar for any day if the count is greater than a particular value, say 10.

This is how the json input to the function.

[{"id":3,"dateVal":"2015-11-12","count":6},{"id":2,"dateVal":"2015-11-11","count":8},{"id":1,"dateVal":"2015-11-10","count":5}]

Any suggestions how i can do this?

Answer 1

You can use color zones (API) to have different colors based on the value of a column.

An example with values below/above the value 10 having different colors (JSFiddle):

plotOptions: {
    column: {
        zones: [{
            value: 10, // Values up to 10 (not including) ...
            color: 'blue' // ... have the color blue.
        },{
            color: 'red' // Values from 10 (including) and up have the color red
        }]
    }
}

Answer 2

plotOptions: {
                column: {
                    zones: [
                        {
                            value: -1, 
                            color: 'red', 
                        },
                        {
                            color: 'green'//default color
                        },
                    ],
                },
            }

Answer 3

In the parser you can replace that:

$.each(response, function(i, item) {
        categorySeries .push(response[i].dateVal);                  
        dataSeries.push(response[i].count);             
    });

with

$.each(response, function(i, item) {
    categorySeries.push(response[i].dateVal);
    if(response[i].count >= 10) {
        dataSeries.push({
        y: response[i].count,
        color: 'red'
      });
    }
    else {
        dataSeries.push(response[i].count);
    }
});

or use zones.