# Apply conditions in css,according to column value in kibana canvas
**URL:** https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020
**Category:** Kibana
**Tags:** canvas
**Created:** [June 28, 2019, 10:11am UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020 "2019-06-28T10:11:29Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Malini\_Sahoo](https://discuss.elastic.co/u/Malini_Sahoo)
#### Post date: [June 28, 2019, 10:11am UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/1 "2019-06-28T10:11:29Z")
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;
}"} "
---
### Author:  [@tims](https://discuss.elastic.co/u/tims)
#### Post date: [June 28, 2019, 1:39pm UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/2 "2019-06-28T13:39:54Z")
Hi @Malini_Sahoo,
What is happening instead of what you expect?
---
### Author:  [@Malini\_Sahoo](https://discuss.elastic.co/u/Malini_Sahoo)
#### Post date: [June 28, 2019, 6:40pm UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/3 "2019-06-28T18:40:11Z")
Hi @tims,
I am expecting the color of stroke to change as value changes, but its not happening
---
### Author:  [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)
#### Post date: [June 28, 2019, 8:14pm UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/4 "2019-06-28T20:14:25Z")
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:
```auto
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
```
---
### Author:  [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)
#### Post date: [June 28, 2019, 9:12pm UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/5 "2019-06-28T21:12:58Z")
See also my workaround here adding conditional sub-expressions to the `render` function. [Conditional colouring using kibana canvas expression editor](https://discuss.elastic.co/t/conditional-colouring-using-kibana-canvas-expression-editor/177929/18)
---
### Author:  [@Malini\_Sahoo](https://discuss.elastic.co/u/Malini_Sahoo)
#### Post date: [June 29, 2019, 10:27am UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/6 "2019-06-29T10:27:44Z")
Thank you, it worked 😀
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 27, 2019, 10:27am UTC](https://discuss.elastic.co/t/apply-conditions-in-css-according-to-column-value-in-kibana-canvas/188020/7 "2019-07-27T10:27:53Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.