Fill colour derived/contextual to value (Radial Bar)

[oller]

Apologies if this is already possible, in which case an explanation would be appreciated and perhaps the docs (or myself) might be missing something!

Is your feature request related to a problem? Please describe.
Say I've a radial bar that I'd like the fill colour to go green if value is greater than 75%, or red if less than 25%. Or perhaps even the fill colour derived by the value, so a different colour for each percentage.

This is of course different to a gradient fill as i'm referring to a single fill colour.

Describe the solution you'd like
To support a fill function that takes the value as a param and can return a colour.

Describe alternatives you've considered
I've tried the updateOptions method to set a fill colour with a derived value, this works, but seems to break the initialising fill animation.

Any suggestions appreciated. Really enjoying working with this lib!

[junedchhipa]

Good suggestion.
I have implemented the idea and tested it roughly which works fine like below.

The code to achieve it will be

            fill: {
                colors: [function({ value }) {
                    if(value < 55) {
                        return '#7E36AF'
                    } else if (value >= 55 && value < 80) {
                        return '#164666'
                    } else {
                        return '#D9534F'
                    }
                }],
            }

Note that the colors array still accepts an array of a function instead of just a function (Changing this would cause type issues, hence kept the same).

It will be released in 3.6.10

[simonbuehler]

hi,

is there a way to have the gradient function in the same way, so when having a green->red gradient and the value is 25% ther shouldn't be any red yet visible in the gradient, any idea?

[sneko]

Hi @junedchhipa ,

As described in my new issue #1652 I'm not able to make your code working even if described in the documentation (it triggers an error).

Is it still something possible?