# Conditional change in canvas shape BG colour for the data fetched from Jenkins

**URL:** <https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922>\
**Category:** Kibana\
**Created:** [November 1, 2020, 2:53am UTC](https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922 "2020-11-01T02:53:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gaurav1](https://avatars.discourse-cdn.com/v4/letter/g/ee59a6/32.png) [@gaurav1](https://discuss.elastic.co/u/gaurav1)\
**Post date:** [November 1, 2020, 2:53am UTC](https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922/1 "2020-11-01T02:53:12Z")

</div>

New to Kibana, I am pushing my Jenkins log to Logstash and tring to create a canvas in Kibana using shape. through essql i am able to fetch build number and build status. Depending on build status I want to change the background color of the shape and display the build number in the shape. Here build number and status both are string. Currently I am able to display the Build number and Status using markdown, but in CSS its not allowed to make any conditional change so not able to change the BG color of shape. Can someone please help me with this.

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 2, 2020, 3:56pm UTC](https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922/2 "2020-11-02T15:56:22Z")

</div>

Hi, you can use a conditional style in a container style if you want but you have to pipe the whole expression again into the condition, let me show you an example:

```auto
filters
| demodata
| math "unique(country)"
| metric "Countries" 
  metricFont={font size=48 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center" lHeight=48} 
  labelFont={font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center"} metricFormat="0,0.[000]"
| render containerStyle={containerStyle border=" #1ea6dc" backgroundColor={filters | demodata | math "unique(country)" | if {gt 10} then="red" else="green"}}

```

the `backgroundColor` of the `containerStyle` of this metric visualization can be red or green if the output of the expression ` filters | demodata | math "unique(country)` is greater then 10.

Or you can apply conditional CSS with something similar to:

```auto
| render css={filters | demodata | math "unique(country)" | if {gt 10} then=".canvasRenderEl{background: red;}" else=".canvasRenderEl{background: green;}"}

```

---

<div class="post-metadata">

**Author:** ![gaurav1](https://avatars.discourse-cdn.com/v4/letter/g/ee59a6/32.png) [@gaurav1](https://discuss.elastic.co/u/gaurav1)\
**Post date:** [November 2, 2020, 5:05pm UTC](https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922/3 "2020-11-02T17:05:46Z")

</div>

Thanks a lot Mark!!, It really helped me.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 30, 2020, 5:05pm UTC](https://discuss.elastic.co/t/conditional-change-in-canvas-shape-bg-colour-for-the-data-fetched-from-jenkins/253922/4 "2020-11-30T17:05:58Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.