how to change bar chart color based on the values

Question

I am new to the bar graph,this is my code kindly check once

<div id = 'barChartContainer'></div>
<?php
 $dataPoints = array(
    array("x"=> 01, "y"=> 120),
    array("x"=> 02, "y"=> 35), //, "indexLabel"=> "Lowest"),
    array("x"=> 03, "y"=> 50),
    array("x"=> 04, "y"=> 45),
    array("x"=> 05, "y"=> 52),
    array("x"=> 06, "y"=> 68),
    array("x"=> 07, "y"=> 38),
    array("x"=> 08, "y"=> 150), //, "indexLabel"=> "Highest"),
    array("x"=> 09, "y"=> 52),
    array("x"=> 10, "y"=> 60),
    array("x"=> 11, "y"=> 36),
    array("x"=> 12, "y"=> 49),
    array("x"=> 13, "y"=> 41)
);
?>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("barChartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    theme: "light1", // "light1", "light2", "dark1", "dark2"
    //title:{
        //text: "Simple Column Chart with Index Labels"
    //},
    axisX: {

        //prefix: "$",
        suffix:  "hr"
    },
    data: [{
        //type: "bar",
        type: "column", //change type to bar, line, area, pie, etc
        //indexLabel: "{y}", //Shows y value on all Data Points
        indexLabel: "{label} {y}",
        yValueFormatString: "#,##0",
        indexLabelFontColor: "#5A5757",
        indexLabelPlacement: "outside",   
        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();
}
</script>

here my problem I need bar colors based on the values like

50(below) -> green

51-100(between)-> Blue

101 (above) -> Orange

Kinldy help me on this. Thanks Sandeep

Answer 1

            window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                //title:{
                    //text: "Simple Column Chart with Index Labels"
                //},
                axisX: {
                    //prefix: "$",
                    suffix:  "hr"
                },
                data: [{
                    //type: "bar",
                    type: "column", //change type to bar, line, area, pie, etc
                    //indexLabel: "{y}", //Shows y value on all Data Points
                    indexLabel: "{label} {y}",
                    yValueFormatString: "#,##0",
                    indexLabelFontColor: "#5A5757",
                    indexLabelPlacement: "outside",   
                    dataPoints: [
                        {"x":1,"y":41},
                    {"x":2,"y":55},
                    {"x":3,"y":101}
                    ]
                }]
            });
            setColor(chart);
            chart.render();

            }

            function setColor(chart){
                for(var i = 0; i < chart.options.data.length; i++) {
                dataSeries = chart.options.data[i];
                for(var j = 0; j < dataSeries.dataPoints.length; j++){
                    if(dataSeries.dataPoints[j].y < 50){
                    dataSeries.dataPoints[j].color = 'green';
                    } if(dataSeries.dataPoints[j].y >= 50){
                    dataSeries.dataPoints[j].color = 'blue';
                } if(dataSeries.dataPoints[j].y >= 101) {
                    dataSeries.dataPoints[j].color = 'orange';
                }
                }
            }
        }

I hope this will work for you :-)