Percentage Color Changes?

[stev310]

How can I associate percentages to different colors? For barcolor in your key it says:

"But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color."

Can you please give me some steps to do this? I'd like it to transition from Green 0-40, Yellow 40-85, Red from 85-100.

Thank you!!

[thelarz]

Here's how I've solved a similar problem. You can simplify for your needs.

FYI, This is an angular function, but it would work the same in vanilla js.

$scope.barColor = function () {

    var score = parseInt($scope.tile.Rank, 10);
    var target = parseInt($scope.tile.GoalValue, 10);

    if (target === null) {
        target = 50;
    }

    var color = "";

    if (score < (target - (target * 0.2)))
        color = "#ee1010";
    else if (score < target)
        color = "#e6c908";
    else {
        color = "#74b818";
    }
    if (score === 0) {
        color = "#666666";
    }

    return color;

};

[thornyeternity]

I removed:
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
in the JQuery file and replaced it with:

if(percent >= 90){
color = '#5ebe01'; //green
}else if(percent <= 89 && percent >= 51){
color = '#fe7903';//orange
}else if(percent <= 50){
color = '#ed2e08'; //red
}

which worked for me.