Chartjs-How to change bar color acording to label value in chartjs

by

0👍

✅

I have used part of your solution and solved problem

        for (var i = 0; i < myLine.datasets[0].bars.length; i++) {
        console.log(myLine.datasets[0].bars[i].value);
        if(myLine.datasets[0].bars[i].value < 10) {
            myLine.datasets[0].bars[i].fillColor = "red";
        } else if (myLine.datasets[0].bars[i].value > 20) {
            myLine.datasets[0].bars[i].fillColor = "yellow";
        }
    }

This is what I need, thanks, I didn’t know how to access values of bars.

1👍

Check out the getBarsAtEvent method in the documentation.

Here is an example of how you could use it, though you will likely have to modify this to your specific needs:

canvas.onmousemove = function(evt) {
    var bars = chart.getBarsAtEvent(evt);
    for (var i = 0; i < bars.length; i++) {
        setColor(bars[i]);
    }
};

function setColor(bar) {
    if (bar.value < 10) {
        bar.fillColor = "red";
    } else if (bar.value < 20) {
        bar.fillColor = "yellow";
    } else {
        bar.fillColor = "green";
   }
}

Leave a comment