How to add conditional coloring to charts in Kendo?

Question

I am trying to achieve a functionality in my Kendo chart as above.

The colors for the bar should change depending on a percent value. I have looked into other examples like the one below:

Binding DataViz chart (Bar chart) locally using Angular

But it uses 4 different series which has a predefined color. I need the colors to vary depending on a percent value. Any ways of achieving this instead of multiple series?

Answer 1

Under seriesDefaults, I changed as below:

seriesDefaults: {
                            type: "column",
                            column: {
                                color: getcolor // use a function to get color
                            },
                            gap: .1,
                            overlay: {
                                gradient: "none"
                            }
                        },





function getcolor(e) {

        if (e.value < 3000) {
            return "red";
        }
        else if (e.value > 3000 && e.value < 5000) {
            return "orangered";
        }
        else if (e.value > 5000 && e.value < 7000) {
            return "orange";
        }
        else if (e.value > 7000 && e.value < 9000) {
            return "olive";
        }
        else {
            return "green";
        }
    }