# How to customize the kibana heatmap by x\_coord and y\_coord labels

**URL:** <https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448>\
**Category:** Kibana\
**Created:** [June 12, 2018, 2:02am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448 "2018-06-12T02:02:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![guanghaofan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/guanghaofan/32/31153_2.png) [@guanghaofan](https://discuss.elastic.co/u/guanghaofan)\
**Post date:** [June 12, 2018, 2:02am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/1 "2018-06-12T02:02:25Z")

</div>

Hi the kibana experts,

the **heatmap** (even all the basic type vislib type visualizations) doesn't support to sort the x/y labels in the chart based on my understanding.  
the **terms** in the buckets actually only reflect the es query string and to sort something in the es.

this is a kibana heatmap with **order by term**.

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

and actually what i want is something like this vega-vis heatmap. and this map is a real wafer map which is widely used in the semiconductor testing field, the x and y is the position and the cell color standards for the metric for this position.

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

I saw some similar topics here on sorting the **labels** or sorting the **legends** , and now I want to customize the kibana heatmap vis to have this **sort by lable** option. and actually I'm really new to the kibana development and know little about the vislib type visualizations. I'm not sure if some experts here can talk more about the details or share something on how to realize this feature?

Any input would be grate appreciated.

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [June 12, 2018, 6:09am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/2 "2018-06-12T06:09:54Z")

</div>

Hi,

yeah that behavior is indeed a bit misleading in the beginning. The reason why the y-axis is sorted other than expected, is these two aggregations are actually done in a nested way, i.e. you first aggregate those x-axis values (which thus have correct sorting) and then within each of the x-axis values, you do the aggregation for the y-axis. That way you will only achieve sorting within each of the x-axis slot, which you can actually also see in the chart, Each section on the y-axis in the following chart separated by lines is sorted in itself.

 ![3abf5e046fcd44f114e553377eb0198d57d0f9fe](https://us1.discourse-cdn.com/elastic/original/3X/0/e/0e58eb8df21a6029cf800aeea43020e97f65a3ee.png)

To achieve the chart you want, you should instead of a terms aggregation, rather use a `Histogram` aggregation on that field. Switch on `Show empty buckets`, and just specify the min max value you want for that chart to have. That way the y-axis should be sorted globally the way you want it to be.

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![guanghaofan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/guanghaofan/32/31153_2.png) [@guanghaofan](https://discuss.elastic.co/u/guanghaofan)\
**Post date:** [June 12, 2018, 8:22am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/3 "2018-06-12T08:22:07Z")

</div>

Yes, thank you very much and your explanation is very clear. it does behaves **LIKE** the y-axis is sorted by the label while adding the **empty cells** into the row data series.  
one thing is not so good is, e.g. it's not easy to judge some cells are **EMPTY** or just **VALID** data for the cells with value '0' in the centre part of the chart.

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

and also it can not auto plot all the **row series** and the user has to specified the Min and Max value.

And do you think is it a good idea to customize the existing **Heatmap** vis to fully support this request?

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [June 12, 2018, 8:49am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/4 "2018-06-12T08:49:04Z")

</div>

I think there is actually a couple of issues, that we could improve.

One is also allowing non nested aggregations for visualizing data, which is actually tracked via [#1907](https://github.com/elastic/kibana/issues/1907). That way you wouldn't have that min/max issue since you could have two term aggregations on the same level.

Another suggestion would be, the ability to filter out labels/cell colors at the border of the chart (or that are `0`. I don't think we have an issue for that yet, so feel free to open a feature request for it if relevant for you.

Btw: what actually happens if you leave the min/max value empty?

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![guanghaofan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/guanghaofan/32/31153_2.png) [@guanghaofan](https://discuss.elastic.co/u/guanghaofan)\
**Post date:** [June 12, 2018, 10:24am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/5 "2018-06-12T10:24:11Z")

</div>

If only check the `Show empty buckets` and without the `max and min settings`, it wont's show the EMPTY data so the chart is still something like the Terms Sub Aggregation.

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

one question is you know if always contains the value '0', we can not take advantage of the `Scale to Data Bounds` options if the color range are all very centralized to a number.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/0/3/03ad8a146c95631a9d016dd9b5e878a7a6876d9a.png)

I just noticed in **kibana** 6.2.5 the value of these **EMPTY** cell are not showed with the `Show Labels` checked. this is good but the color is set to **Black** if `Scale to Data Bounds` is checked. it's better if can use the **White** color for the EMPTY cells.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/d/dd9f76f96fb45a69aae49a167f53e9646192b9b8.png)

---

<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 10, 2018, 10:24am UTC](https://discuss.elastic.co/t/how-to-customize-the-kibana-heatmap-by-x-coord-and-y-coord-labels/135448/6 "2018-07-10T10:24:14Z")

</div>

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