Apply conditions in css,according to column value in kibana canvas

[Malini_Sahoo]

Hi, how to apply conditions in css,according to column value in kibana canvas.
eg.
I am trying below code in progress wheel in kibana canvas,but it doesn't seems to working

"filters
| demodata
| math 0.5
| progress shape="semicircle" label={formatnumber "0%"}
font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center"}
| render
css={if {gte 0.5} then="svg>:nth-child(2){
stroke: green;
}" else="svg>:nth-child(2){
stroke: red;
}"} "

[tims (Tim Schnell)]

Hi @Malini_Sahoo,

What is happening instead of what you expect?

[Malini_Sahoo]

Hi @tims,
I am expecting the color of stroke to change as value changes, but its not happening

[Catherine_Liu]

Sub-expressions receive the same context (or input) as it's parent function which is the output of the previous function, so your gte 0.5 is receiving the output of the progress function, which is a render object and not a number. Hence gte is comparing that render object to 0.5, which will always evaluate to false.

You can pass valueColor with your conditional expression if you want to conditionally color the progress bar, or barColor if you want to conditionally color the background bar.

Here's an example using random numbers:

math "random()"
| progress shape="gauge" label={formatnumber "0%"} 
  font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" align="center" 
    color={
      switch {case if={lte 0.5} then="green"} 
        case if={all {gt 0.5} {lte 0.75}} then="orange"} 
        default="red"
    }} 
  valueColor={
    switch {case if={lte 0.5} then="green"} 
      case if={all {gt 0.5} {lte 0.75}} then="orange"} 
      default="red"
  
| render

[Catherine_Liu]

See also my workaround here adding conditional sub-expressions to the render function. Conditional colouring using kibana canvas expression editor

[Malini_Sahoo]

Thank you, it worked