# Percentage shows top of line graph

**URL:** <https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096>\
**Category:** Kibana\
**Created:** [July 7, 2020, 6:11am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096 "2020-07-07T06:11:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 7, 2020, 6:11am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/1 "2020-07-07T06:11:56Z")

</div>

Is it possible to have the percentage lines showed over the Y-axis instead of the top of the graph? It look likes this now:

![Graph](https://us1.discourse-cdn.com/elastic/original/3X/b/0/b08184560bed43596d5497e21cf9617403d0fea8.jpeg)

Is it possible to have them like these lines instead?

![Graph2](https://us1.discourse-cdn.com/elastic/original/3X/1/f/1f3847ea96a23ed0d2d9ca53aa00cdaf9e698dbc.jpeg)

---

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 29, 2020, 9:11am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/2 "2020-07-29T09:11:31Z")

</div>

Is this possible? Or this is not the correct way to display percentages in graphs?

---

<div class="post-metadata">

**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\
**Post date:** [July 29, 2020, 10:46am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/3 "2020-07-29T10:46:24Z")

</div>

Hi @krille.com,

What type of visualization are you trying to create?  
Mind sharing the full configuration?

If the problem you're experiencing is that the **scale** of both series is so different, you could always use a second Y Axis for your chart.

Does this help?

Thanks,  
Liza

---

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 29, 2020, 12:31pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/4 "2020-07-29T12:31:17Z")

</div>

Thanks for the reply!

The Y-Axis I want to be 0-100% as it is. The green line is perfect, but the red line is always at the top? The red line is around 12-21% over the time period, I would like to have the red line plotted down at the range on the Y-Axis, just like the green line...

I don't know how to share the full configuration, but here is a screen 😉 I have drawn a red line instead in the bottom...

 ![LineChartPercentage](https://us1.discourse-cdn.com/elastic/original/3X/b/a/baf3680a13dd475e341970ce63765f471d182d14.jpeg)

---

<div class="post-metadata">

**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\
**Post date:** [July 29, 2020, 2:00pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/5 "2020-07-29T14:00:29Z")

</div>

Hey @krille.com

Would you mind opening the inspector and posting what you see in there?

For example, building a visualization similar to yours, this is what I'm getting:

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

I want to make sure the data in your visualization is correct.

Thanks,  
Liza

---

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 30, 2020, 10:52am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/6 "2020-07-30T10:52:42Z")

</div>

Please see attached screens... It is when I change the Y-Axis Mode from Normal to Percentage...

Mode - Normal

 ![LineChartDataNormal](https://us1.discourse-cdn.com/elastic/original/3X/0/7/073edb8e199307e063aeeaf4a6745267c4ac27ef.jpeg)

Mode - Percentage

 ![LineChartDataPercentage](https://us1.discourse-cdn.com/elastic/original/3X/0/9/091095e4d2ec563c4167a86b3618f9c68ea240d2.jpeg)

Settings on Y-Axis:  
 ![Y-AxisSettings](https://us1.discourse-cdn.com/elastic/original/3X/0/f/0f1357ab1a164a55afcbdea16793f0e4d83a9f17.jpeg)

---

<div class="post-metadata">

**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\
**Post date:** [July 30, 2020, 4:29pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/7 "2020-07-30T16:29:39Z")

</div>

You might want to remove the `Stacked` option.  
Because it seems like at the moment your lines are stacked, so the last one gets to 100%.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [July 30, 2020, 4:48pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/8 "2020-07-30T16:48:46Z")

</div>

I tried this locally but unfortunately it seems like this is not possible at the moment - percentage mode charts will always stack all series. Using an area chart seems like the best approach here.

Using TSVB you should be able to have the axis formatted as percentage while still showing the series unstacked, but the configuration will get much complex.

Let me know whether you would be fine using TSVB as well.

---

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 31, 2020, 7:56am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/9 "2020-07-31T07:56:43Z")

</div>

I am not using `Stacked` option, I have chosen `Normal` in the Metrics settings...

 ![MetricsSettings](https://us1.discourse-cdn.com/elastic/original/3X/b/8/b81bd8f1c7812bf9034024883402958322a79e73.jpeg)

---

<div class="post-metadata">

**Author:** ![krille.com](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@krille.com](https://discuss.elastic.co/u/krille.com)\
**Post date:** [July 31, 2020, 8:18am UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/10 "2020-07-31T08:18:37Z")

</div>

I have tried in Area chart and TSVB visualizations as well and I get the same behavior... I think it is the behavior `percentage mode charts will always stack all series` as you say...

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [July 31, 2020, 12:36pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/11 "2020-07-31T12:36:59Z")

</div>

If you know the series you want to show, you can use multiple series in TSVB to achieve this:

 ![Screenshot 2020-07-31 at 14.36.31](https://us1.discourse-cdn.com/elastic/original/3X/8/9/89bf346019fad94093f5e71f6eb957ea99b66f3e.png)

 ![Screenshot 2020-07-31 at 14.36.25](https://us1.discourse-cdn.com/elastic/original/3X/f/b/fb25ee3bbc8e59ced46913613df9b1bbce80974b.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:** [August 28, 2020, 12:37pm UTC](https://discuss.elastic.co/t/percentage-shows-top-of-line-graph/240096/12 "2020-08-28T12:37:01Z")

</div>

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