# Canvas Kibana metric background color formating
**URL:** https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070
**Category:** Kibana
**Created:** [September 1, 2021, 3:46pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070 "2021-09-01T15:46:49Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@MTV](https://discuss.elastic.co/u/MTV)
#### Post date: [September 1, 2021, 3:46pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/1 "2021-09-01T15:46:49Z")
Hi,
I am using canvas where I am trying to color format a metric background : color1 if value=0, color2 if value between 0 and 7, and color3 if value \>7 . I looked into several answers here (and also looked at the docs) but the code is not working for me.
What I have:
```auto
...
| render
containerStyle={containerStyle backgroundColor={
filters
|esdocs index="index"
| alterColumn column="field" type="number"
| filterrows {getCell "field" | neq 0}
| math "size(field)"
| switch
case={case if={eq 0} then="gray"}
case={case if={gt 7} then="yellow"} default="blue"}
padding="16px" overflow="visible"}
```
The first case always works, the second case is never used and the default kiks in. I tried with exactly the same code as in the docs, and nothing!
Any help will be greatly appreciated. Thanks!
---
### Author:  [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)
#### Post date: [September 3, 2021, 4:58pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/2 "2021-09-03T16:58:31Z")
@poff /@corey.robertson /@Catherine_Liu can we get some help please? Thanks!
---
### Author:  [@poff](https://discuss.elastic.co/u/poff)
#### Post date: [September 3, 2021, 5:51pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/3 "2021-09-03T17:51:16Z")
Hey there!
I haven't been able to reproduce this issue yet. Here's the expression i've been using to test:
```auto
markdown "Hello"
| render containerStyle={containerStyle backgroundColor={
filters
| demodata
| math expression="11"
| switch case={case if={eq 0} then="red"} case={case if={gt 7} then="yellow"} default="blue"}
}
```
I've been manually changing the number returned by the math expression and I see the background change appropriately.
What kibana version are you using? Is it possible there are some filters that are being applied to the expression in the backgroundColor that aren't being applied in the main part of the expression that returns the number?
---
### Author:  [@MTV](https://discuss.elastic.co/u/MTV)
#### Post date: [September 13, 2021, 6:20am UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/4 "2021-09-13T06:20:43Z")
Hi, thanks for your reply! I am using kibana 7.14, and the only filter I have is a dropdown from which I can select, for instance a country. what I am attempting to do is to have 3 metrics next to each other (as if they were just one bar) with country name, average score and number of observations. Then when I select a country from the dropdown, if the number of observations is less than for instance 7, the background will change to gray, and the average scores and number of observations as well (so the values are hidden). I can't share my data, but the full code looks like this:
```auto
filters
| esdocs index="index"
fields="field"
| alterColumn column="field" type="number"
| filterrows {getCell "field" | neq 0}
| if {rowCount | eq 0} then=0 else={math "mean(field)"}
| metric "field"
metricFont={font align="center" color={switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="white"} family="'Open Sans', Helvetica, Arial, sans-serif" italic=false size=14 underline=false weight="bold"}
labelFont={font align="left" color={switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="white"} family="'Open Sans', Helvetica, Arial, sans-serif" italic=false size=0 underline=false weight="normal"} metricFormat="0.0a"
| render
containerStyle={containerStyle backgroundColor={filters | esdocs index="index" | alterColumn column="field" type="number" | filterrows {getCell "field" | neq 0} | math "size(field)" | switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="#37988d"} padding="14px" overflow="visible" border="3px #FFFFFF"}
```
Probably I am doing something wrong, but I just can't see what.
Thanks again for any help!
---
### Author:  [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)
#### Post date: [September 13, 2021, 12:49pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/5 "2021-09-13T12:49:40Z")
This example shows how to do it.
> **[APM Services overview canvas dashboard at elastic content share](https://elastic-content-share.eu/downloads/apm-services-overview-canvas/)**
>
> The APM services canvas is an adaptive canvas board that fits to your APM data. If you running Elastic APM -- try it for free!
---
### Author:  [@MTV](https://discuss.elastic.co/u/MTV)
#### Post date: [September 13, 2021, 1:05pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/6 "2021-09-13T13:05:58Z")
@Felix_Roessel Unfortunately I don't have permission to upload/download anything into kibana. In any case, thank you for your reply.
---
### Author:  [@MTV](https://discuss.elastic.co/u/MTV)
#### Post date: [September 15, 2021, 12:54pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/7 "2021-09-15T12:54:09Z")
I was able to find a solution for my original question. The issue is apparently with the 'switch case'. If instead of 'switch case...' I use:
```auto
| if condition={gt 0} then={if condition={gt 7} then="#37988d" else="#72cec3"} else="#DCDCDC"} padding="6px" overflow="visible"}
```
Everything works properly.
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [October 13, 2021, 12:54pm UTC](https://discuss.elastic.co/t/canvas-kibana-metric-background-color-formating/283070/8 "2021-10-13T12:54:38Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.