# Canvas metric with color gradient

**URL:** https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585
**Category:** Kibana
**Tags:** canvas
**Created:** [April 26, 2019, 8:26am UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585 "2019-04-26T08:26:58Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Mike\_CC](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/mike_cc/32/47241_2.png) [@Mike\_CC](https://discuss.elastic.co/u/Mike_CC)
#### Post date: [April 26, 2019, 8:26am UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585/1 "2019-04-26T08:26:58Z")

</div>

Hi everyone,

I have a metric in Canvas that can have a value from 0 to 100. I would like to have a color gradient from red to green depending on the value, i.e. red if it's 0, green if it's 100 or a shade of red or green depending of the value when it's in between. Is this even possible, if it is, any example or hint on how to do it?

Thank you for any help.

Best,

---

<div class="post-metadata">

### Author: ![Brandon\_Kobel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandon_kobel/32/14829_2.png) [@Brandon\_Kobel](https://discuss.elastic.co/u/Brandon_Kobel)
#### Post date: [April 26, 2019, 8:46pm UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585/2 "2019-04-26T20:46:07Z")

</div>

Hey @Mike_CC, I'm not seeing a way to do this presently. The [palette](https://www.elastic.co/guide/en/kibana/current/canvas-common-functions.html#_palette) would come in handy here, but you can't currently use a palette with a metric. I'd suggest opening up an enhancement request here: [https://github.com/elastic/kibana/issues/new?template=Feature\_request.md](https://github.com/elastic/kibana/issues/new?template=Feature_request.md)

---

<div class="post-metadata">

### Author: ![Mike\_CC](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/mike_cc/32/47241_2.png) [@Mike\_CC](https://discuss.elastic.co/u/Mike_CC)
#### Post date: [April 29, 2019, 5:44am UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585/3 "2019-04-29T05:44:27Z")

</div>

Ok, thanks for your time!

---

<div class="post-metadata">

### Author: ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)
#### Post date: [April 29, 2019, 8:18am UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585/4 "2019-04-29T08:18:42Z")

</div>

@Mike_CC in general, we're planning to add data driven CSS in the future, although it's a common interest not to rely on CSS styling of elements as underlying chart etc. implementations and their DOM structure may change in future versions, and we try to cover common functionality through exposed properties, not CSS. So as @Brandon_Kobel suggested, it's best to open a feature request.

---

<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: [May 27, 2019, 8:18am UTC](https://discuss.elastic.co/t/canvas-metric-with-color-gradient/178585/5 "2019-05-27T08:18:43Z")

</div>

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