[Bug] Could not add background colors to the nodes based on a condition under label

[Swetha-R-maker]

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/tree-with-polyline-edge-24snsj

Steps to Reproduce

A background function under series.label

backgroundColor: function(params){
      if(params.data.value > 90) {
        return '#00ff00';
      } else if(params.data.value < 90 && params.data.value > 75) {
        return '#fff33b';
      } else if (params.data.value <75 && params.data.value >60)
      {
        return '#fdc70c';
      } else if (params.data.value <60 && params.data.value >40) {
        return '#ed683c';
      }
      else {
        return '#e93e3a';
      }
}

Current Behavior

label: {
  backgroundColor: '#ffbaba'
}

The above code is applying background color as '#ffbaba' to all the nodes like this,

But I need different colors based on the ${params.data.value} with conditions:

backgroundColor: function(params){
    if(params.data.value > 90) {
            return '#00ff00';
    } else if(params.data.value <90 && params.data.value >75) {
                      return '#fff33b';
    } else if (params.data.value <75 && params.data.value >60)
                    {
                      return '#fdc70c';
    } else if (params.data.value <60 && params.data.value >40) {
                      return '#ed683c';
     }
    else {
                      return '#e93e3a';
    }
}

All I am getting is black color applied to leaves.

Expected Behavior

The expected behavior is that each node's background color is depend on what the value and the condition specified

Environment

- OS: Windows 11
- Browser: Chrome 121.0.6167.14

Any additional comments?

No response

[helgasoft]

not-a-bug doable with rich, but only if there are values to evaluate - Demo Code

📌 please close issue if problem solved.

[Swetha-R-maker]

@helgasoft, thank you !!! the "RICH" option worked.

[Swetha-R-maker]

Is there a way to define functions just like there are functions for formatters from tooltip?

[Swetha-R-maker]

Hi @helgasoft , I found one more issue - from the demo code above. The coloring is only applicable to "value" key , not for any other. Let's say I have one more key called "weight" { name: "flare", value: 76, weight: 2} I want to display colors based on weight

[helgasoft]

Please make an effort to debug your own code. A simple console.log(params.data); in formatter will do. Debug and "how to" questions are better posted on stackoverflow, where there are more volunteers to help.

[Swetha-R-maker]

I have already tried with a formatter. That's why reaching out to you. Kindly help with the right solution

label: { formatter: function (params) { var a = params.data.name; return '{' + params.data.score + '|' + a + '}'; }, }

[helgasoft]

Demo Code