# Stacked Bar with text labels on it

**URL:** <https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [May 25, 2022, 8:30am UTC](https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576 "2022-05-25T08:30:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikaes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nikaes/32/103347_2.png) [@nikaes](https://discuss.elastic.co/u/nikaes)\
**Post date:** [May 25, 2022, 8:30am UTC](https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576/1 "2022-05-25T08:30:52Z")

</div>

Hi All,  
when the splitted values are too much appart from each other, the stacked bar visualization is difficult to read. I would like to have fixed sized splits with text labels on them.  
See the picture below:

 ![BarStacked](https://us1.discourse-cdn.com/elastic/original/3X/1/e/1e4995284b00d9e39ebf337e264df6091248bf90.png)

1. is the right most visualization possible in Kibana ?

2. would that be achievable using Vega ?

---

<div class="post-metadata">

**Author:** ![Marta\_Bondyra](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marta_bondyra/32/102122_2.png) [@Marta\_Bondyra](https://discuss.elastic.co/u/Marta_Bondyra)\
**Post date:** [May 25, 2022, 11:34am UTC](https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576/2 "2022-05-25T11:34:24Z")

</div>

So basically you want to represent the value as a color but not as the size? In this case I feel like heatmap is the best option. You can try with Lens both with filters or top values aggregation:

 ![Screenshot 2022-05-25 at 13.32.15](https://us1.discourse-cdn.com/elastic/original/3X/0/a/0a35dab7b0be760528f34b36e042c8f0f0f6ae73.png)

Here is example config for one of the aggregation you'd need:

 ![Screenshot 2022-05-25 at 13.33.17](https://us1.discourse-cdn.com/elastic/original/3X/9/0/90fc1a916cf3e68794a9556772e2a44645a3a653.png)  
 ![Screenshot 2022-05-25 at 13.33.38](https://us1.discourse-cdn.com/elastic/original/3X/f/0/f02aca0d64ae64be2b3120afb45866229445dc18.png)  
 ![Screenshot 2022-05-25 at 13.34.58](https://us1.discourse-cdn.com/elastic/original/3X/0/e/0e1dc858605a366d18268a3f50d6a252d5e213fe.png)

You could definitely use Vega to achieve it, but it's not trivial.

---

<div class="post-metadata">

**Author:** ![nikaes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nikaes/32/103347_2.png) [@nikaes](https://discuss.elastic.co/u/nikaes)\
**Post date:** [May 25, 2022, 11:56am UTC](https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576/3 "2022-05-25T11:56:28Z")

</div>

Hallo @Marta_Bondyra , thanks for your answer.  
Putting a text label on the bar ist not possible with Kibana , right ?

I thought about the heat-map , but it does not really fit to one of my specific case , as on the y-axis , I would have too many elements.  
I am trying to visualize test sets per test pc . In this case I would have about 60 test suites and 300 test sets.

If I implement it with heat-map , I end up with a huge graphic.

This is a drawing of which I would like to visualize:

 ![TestDashboard](https://us1.discourse-cdn.com/elastic/original/3X/1/6/16f26af582021528370ae621874094c062aa9c50.png)

I think this kind of visualization can only be done with vega ?  
What do you think ?

---

<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 22, 2022, 11:56am UTC](https://discuss.elastic.co/t/stacked-bar-with-text-labels-on-it/305576/4 "2022-06-22T11:56:56Z")

</div>

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