# Conditional coloring Kibana canvas

**URL:** <https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037>\
**Category:** Kibana\
**Created:** [October 6, 2021, 1:52pm UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037 "2021-10-06T13:52:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kadhem](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@Kadhem](https://discuss.elastic.co/u/Kadhem)\
**Post date:** [October 6, 2021, 1:52pm UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/1 "2021-10-06T13:52:45Z")

</div>

Hi, I'm want to change the color of the bars here depending on the value of "Primary channel " . i may have 12 values in "Primary channel" . the graph is displayed in real time so the color changing must be updated ( i want that "y" values be depending on Primary\_channel)

 ![amir](https://us1.discourse-cdn.com/elastic/original/3X/e/8/e8e12be6d38b9dea9b597b3a12fc492edd504c60.png)

this is my trial but it doesn't work

```auto
filters
| esdocs index="sagem*" fields="@timestamp, txopNew5" sort=", desc" query=""
| pointseries x="@timestamp" y="first(txopNew5)"
| mapColumn "txopNew5" 
  fn={switch
    case if={any {getCell "Primary_Channel5" | compare "lt" to=23} then="red"}
    case if={any {getCell "Primary_Channel5" | compare "gt" to=35} then="green"}} 
| plot defaultStyle={seriesStyle bars="3" lines="0" points="0"} legend="nw" palette={palette "#7ECAE3" "#003A4D" gradient=true} xaxis=true 
  font={font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="left"} seriesStyle={seriesStyle}
| render

```

---

<div class="post-metadata">

**Author:** ![corey.robertson](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/corey.robertson/32/54611_2.png) [@corey.robertson](https://discuss.elastic.co/u/corey.robertson)\
**Post date:** [October 7, 2021, 5:37pm UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/2 "2021-10-07T17:37:23Z")

</div>

Hi @Kadhem

I'm not sure I follow completely what you are trying to do.

Where is `Primary_Channel` coming from? You are doing an `esdocs` query and getting `@timestamp`

Are you wanting separate bars for each different channel and those are colored according to the channel? Please explain a little further what you are trying to accomplish. (Maybe a simple example with data?)

---

<div class="post-metadata">

**Author:** ![Kadhem](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@Kadhem](https://discuss.elastic.co/u/Kadhem)\
**Post date:** [October 8, 2021, 8:48am UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/3 "2021-10-08T08:48:45Z")

</div>

**Primary\_channel** and **Txop** ( Y axis) are from the same index . this values are parsed in real-time . I want to set kind of **link** between these two separated values :when the value of Primary-channel changes the bars must change the color. I may have **12 different values** in the Primary\_channel so 12 colors.  
_ **Example** _

```auto
T=1s : Primary_Channel = 52 ==> Bars are colored in green 
T=30s : Primary_Channel = 20 ==> Bars are colored in red
.
.
.

```

---

<div class="post-metadata">

**Author:** ![corey.robertson](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/corey.robertson/32/54611_2.png) [@corey.robertson](https://discuss.elastic.co/u/corey.robertson)\
**Post date:** [October 8, 2021, 4:29pm UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/4 "2021-10-08T16:29:54Z")

</div>

Hi @Kadhem

Thanks, I understand what you're trying to do now.

You'll need to just make sure that you pull in the channel and the value from the query.

Something along these lines should work, just will need to build out the switch to set the appropriate colors.

```auto
filters
| essql 
  query="SELECT primary_channel, txop, '@timestamp' FROM \"sagem*\""
| mapColumn name="color" 
  expression={getCell column="primaryChannel" | switch case={case if={lt 23} then=0} default=1}
| pointseries x="@timestamp" y="txop" color="color"
| plot defaultStyle={seriesStyle bars=0.75} legend=false palette={palette "#FF0000" "#00FF00"}
| render

```

---

<div class="post-metadata">

**Author:** ![Kadhem](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@Kadhem](https://discuss.elastic.co/u/Kadhem)\
**Post date:** [October 11, 2021, 8:56am UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/6 "2021-10-11T08:56:39Z")

</div>

thank you but here's what i got. i guess the Conditional statements is not working right

 ![elk](https://us1.discourse-cdn.com/elastic/original/3X/b/f/bf67a334d32106ffd0d0040cb37c45425aa5e777.png)

```auto
filters
| esdocs index="sagemcom*" fields="@timestamp, txopNew2, Primary_Channel" sort=", asc"
| mapColumn name="color" 
  expression={getCell column="Primary_Channel" | 
  switch case={case if={lt 91} then="black"
  else if={lte 94} then="blue"
  else "red"}}
| pointseries x="@timestamp" y="txopNew2" color="color"
| plot defaultStyle={seriesStyle bars=0.75} legend=false palette={palette "#FF0000" "#00FF00"}
| render

```

---

<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 8, 2021, 8:57am UTC](https://discuss.elastic.co/t/conditional-coloring-kibana-canvas/286037/7 "2021-11-08T08:57:12Z")

</div>

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