# Show colored heading in the Kibana Dashboard

**URL:** https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039
**Category:** Kibana
**Created:** [May 4, 2021, 7:10am UTC](https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039 "2021-05-04T07:10:35Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Manjula\_Piyumal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/manjula_piyumal/32/57068_2.png) [@Manjula\_Piyumal](https://discuss.elastic.co/u/Manjula_Piyumal)
#### Post date: [May 4, 2021, 7:10am UTC](https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039/1 "2021-05-04T07:10:35Z")

</div>

Hi,

I want to show a heading in my health check dashboard. Color of this heading should be able to change to Green, Yellow and Red depending on the health status. I could not find any straight forward way to create this visualization.

Is this possible in Kibana 7.11.0?

Thanks in advance.

---

<div class="post-metadata">

### Author: ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)
#### Post date: [May 4, 2021, 2:11pm UTC](https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039/2 "2021-05-04T14:11:11Z")

</div>

I don't think you can do that with Dashboards. Instead, Canvas is perfectly suited for that kind of requirement.

The closest thing I've figured out for Dashboards is to use the `Markdown` output for TSVB where you can output text and style backgrounds and texts using CSS.

For example this dashboard shows two TSVB panels that filter the count of records by two values, same as the pie chart below.

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

Still, there's no logic attached to the values of the output. I'd again recommend to take a look to [Canvas](https://www.elastic.co/guide/en/kibana/current/canvas.html).

---

<div class="post-metadata">

### Author: ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)
#### Post date: [May 4, 2021, 2:32pm UTC](https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039/3 "2021-05-04T14:32:54Z")

</div>

In fact, depending on your data query you may be able to do this using the `Metric` output in TSVB that has what is called `Color Rules` where you can change the background and text color based in the metric value.

In my example I want a ratio between `status: OK` and `status: Error` so after switching to the `Metric` output, in Panel Options I can add the color rules to use `0.5` as my threshold

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/1/9/198cd52bc1239edd86f534c6b707674c136ac4a9.png)

And in the data use the `Filter Ratio` metric type for `status: OK`

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

And in the options format the number as percent and filter only for documents with any of those values

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

So now on this dashboard the panel should go to orange if the ratio ever goes below 50%

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/8/9849a68b26cfa0e6c6708ee734725092cd3109a3.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: [June 1, 2021, 2:32pm UTC](https://discuss.elastic.co/t/show-colored-heading-in-the-kibana-dashboard/272039/4 "2021-06-01T14:32:58Z")

</div>

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