# How to get the actual values next to the bars and colors cnahge?

**URL:** <https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023>\
**Category:** Kibana\
**Created:** [August 25, 2018, 2:37pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023 "2018-08-25T14:37:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [August 25, 2018, 2:37pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/1 "2018-08-25T14:37:27Z")

</div>

I'm trying to implement design into Kibana's Canvas and I'm stuck.

I need two things:

How to add the actual bar values at the end (or anywhere) of the bars?  
Any chance to change the color of the bars regarding some value. I know how to do it on an image but is it possible to do this here?

This is what I have now:

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

and this is how I like to look:

 ![Untitled-1](https://us1.discourse-cdn.com/elastic/original/3X/a/8/a87d601754ce6ef25f73c1e6b366cbbfc0f26e27.jpeg)

Thanks.

EDIT: I see lots of requests about this feature. Is it implemented yet?

---

<div class="post-metadata">

**Author:** ![rashid](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashid/32/12566_2.png) [@rashid](https://discuss.elastic.co/u/rashid)\
**Post date:** [August 27, 2018, 7:29pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/2 "2018-08-27T19:29:14Z")

</div>

You can use the `text` parameter of the `pointseries`. From the side bar, under dimensions and measures, click the `+` button, select `text` and set it to `value`.

Or you can stick it in the expression by simply adding `text=value` to `pointseries`

---

<div class="post-metadata">

**Author:** ![rashid](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashid/32/12566_2.png) [@rashid](https://discuss.elastic.co/u/rashid)\
**Post date:** [August 27, 2018, 7:32pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/3 "2018-08-27T19:32:55Z")

</div>

As for changing the bar colors. You'll need to add a series style for them, though I think there's a bug when using `horizontalBars=true` at the moment, we're poking at it.

---

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [August 28, 2018, 8:59pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/4 "2018-08-28T20:59:52Z")

</div>

Great! Any chance I can wrap the values in (x)? Any markup that can be added?  
**EDIT: Did that with css. ::before and ::after did the trick.**

Also, where to start with learning all this functions? Are they Elasticsearch or just Kibana? Some good courses/tutorials would be greatly appreciated.

tnx

---

<div class="post-metadata">

**Author:** ![rashid](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashid/32/12566_2.png) [@rashid](https://discuss.elastic.co/u/rashid)\
**Post date:** [August 28, 2018, 9:11pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/5 "2018-08-28T21:11:56Z")

</div>

Functions are specifically a Kibana Canvas thing, check out the stuff on [canvas.elastic.co](http://canvas.elastic.co). There's a bunch of stories and videos, along with reference documentation

---

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [August 28, 2018, 9:37pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/6 "2018-08-28T21:37:30Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [August 28, 2018, 10:07pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/7 "2018-08-28T22:07:15Z")

</div>

I added

> palette={palette "#882E72" "#B178A6" "#D6C1DE" "#1965B0" "#5289C7" "#7BAFDE" "#4EB265" "#90C987" "#CAE0AB" "#F7EE55" "#F6C141" "#F1932D" "#E8601C" "#DC050C" gradient=false}

but nothing is changing. Is that the bug?

---

<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:** [September 25, 2018, 10:07pm UTC](https://discuss.elastic.co/t/how-to-get-the-actual-values-next-to-the-bars-and-colors-cnahge/146023/8 "2018-09-25T22:07:25Z")

</div>

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