# Heatmap color scales

**URL:** <https://discuss.elastic.co/t/heatmap-color-scales/91084>\
**Category:** Kibana\
**Created:** [June 28, 2017, 10:51am UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084 "2017-06-28T10:51:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_jake](https://avatars.discourse-cdn.com/v4/letter/_/f08c70/32.png) [@\_jake](https://discuss.elastic.co/u/_jake)\
**Post date:** [June 28, 2017, 10:51am UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/1 "2017-06-28T10:51:21Z")

</div>

How can I show a 3 colour heatmap, centred on zero, like this..

![](https://us1.discourse-cdn.com/elastic/original/3X/a/c/aca1760c075cb0e06be195863cc496f270d0f38a.png)

The closest I have managed to get is this, which is far from ideal.

 ![](https://us1.discourse-cdn.com/elastic/original/3X/c/9/c9f498b97a0a2b109fd9ced6167aba3130958126.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [June 28, 2017, 11:45am UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/2 "2017-06-28T11:45:14Z")

</div>

There is a way you can do something like this using the Custom Range inside the Heatmap options.

 ![](https://us1.discourse-cdn.com/elastic/original/3X/a/2/a23a05005de2dbfbb322df90c7933e3c7438d4ea.png)  
Only small problem is that white is not available as a color.  
Ans if you want more granularity for the colors it will take a while to add them all in as ranges.

---

<div class="post-metadata">

**Author:** ![\_jake](https://avatars.discourse-cdn.com/v4/letter/_/f08c70/32.png) [@\_jake](https://discuss.elastic.co/u/_jake)\
**Post date:** [June 28, 2017, 12:04pm UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/3 "2017-06-28T12:04:25Z")

</div>

Thanks for your response. That allows me to centre the heatmap on zero, but not use say blue for +'ve and red for -'ve. Also the heatmap is over a sum, so when you filter the data or change time window, the fixed scale becomes useless.

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [June 28, 2017, 12:08pm UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/4 "2017-06-28T12:08:59Z")

</div>

You can change the colors for each range in the legend(click on an item and it opens a color picker), so you can select red for higher and blue for lower, but yuou won't get gradients unless you define ranges for each gradient. It's a bit weird with the data ranges, you're right, if you want gradients.  
I'd recommend adding an enhancement request here: [https://github.com/elastic/kibana/issues](https://github.com/elastic/kibana/issues) as this seems like a very useful color schema.

---

<div class="post-metadata">

**Author:** ![\_jake](https://avatars.discourse-cdn.com/v4/letter/_/f08c70/32.png) [@\_jake](https://discuss.elastic.co/u/_jake)\
**Post date:** [June 28, 2017, 1:08pm UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/5 "2017-06-28T13:08:04Z")

</div>

OK, so, using "percentage mode" and then manually selecting the colours from the legend, gets me pretty close to what I am after.

 ![](https://us1.discourse-cdn.com/elastic/original/3X/6/6/66012b3c9b19ac695ef356e1513ff8a6beb3f7fb.png)

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [June 29, 2017, 3:09pm UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/6 "2017-06-29T15:09:31Z")

</div>

Glad it helped. Also, fyi, custom ranges are not available with percentage mode, so you can only use the buckets automatically calculated when you split 100 to the number of colors set in the options menu.

---

<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:** [July 27, 2017, 3:09pm UTC](https://discuss.elastic.co/t/heatmap-color-scales/91084/7 "2017-07-27T15:09:45Z")

</div>

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