# Horizontal bar chart in Canvas - value of measure positioned inconveniently

**URL:** <https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [September 16, 2019, 11:58am UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653 "2019-09-16T11:58:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![preetish\_P](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@preetish\_P](https://discuss.elastic.co/u/preetish_P)\
**Post date:** [September 16, 2019, 11:58am UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/1 "2019-09-16T11:58:43Z")

</div>

Hi All,

We have recently upgraded to ES6.8 and are exploring capabilities provided by Canvas. My question is around the horizontal bar chart available within Canvas elements.  
Is there a way to show the value of measure aligned to right edge of the chart or just outside of the horizontal bar, similar to what is seen in a TopN chart of visual builder?

Currently the value of measure lies on the edge of the bar. Example of how the chart is currently looking:

 ![10](https://us1.discourse-cdn.com/elastic/original/3X/f/a/fa4fb9682808271258c342ddf1a0ac0437a68c4b.png)

How I am trying to make it look (this is a TopN chart):

 ![46](https://us1.discourse-cdn.com/elastic/original/3X/c/5/c509a481fa75cfea735f0629560bf829f40deaaf.png)

Thank you

---

<div class="post-metadata">

**Author:** ![Brandon\_Kobel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandon_kobel/32/14829_2.png) [@Brandon\_Kobel](https://discuss.elastic.co/u/Brandon_Kobel)\
**Post date:** [September 16, 2019, 5:23pm UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/2 "2019-09-16T17:23:45Z")

</div>

Hey @preetish_P would you mind sharing the Canvas expression that you're using for your existing workpad?

---

<div class="post-metadata">

**Author:** ![preetish\_P](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@preetish\_P](https://discuss.elastic.co/u/preetish_P)\
**Post date:** [September 17, 2019, 8:39am UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/3 "2019-09-17T08:39:12Z")

</div>

Hi @Brandon_Kobel,  
The canvas expression for horizontal bar chart currently looks like below:

filters  
| essql  
query="SELECT place,COUNT(distinct userid) from "\<\>" group by place"  
| pointseries x="COUNT\_distinct userid\_" y="place" text="COUNT\_distinct userid\_"  
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true lines="0" points="0"} palette={palette "#C5FAF4" "#0F6259" gradient=true} xaxis=false legend=false yaxis={axisConfig position="left"}  
font={font family="'Helvetica Neue', Helvetica, Arial, sans-serif" size=16 align="right" color="#f0f4ff" weight="normal" underline=false italic=false} seriesStyle={seriesStyle points="0"}  
| render containerStyle={containerStyle opacity="1" overflow="visible" border=" none "}

Thank you

---

<div class="post-metadata">

**Author:** ![tims](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tims/32/46750_2.png) [@tims](https://discuss.elastic.co/u/tims)\
**Post date:** [September 17, 2019, 2:29pm UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/4 "2019-09-17T14:29:47Z")

</div>

Hey @preetish_P you can adjust the label position with custom CSS. Something like this should work:

`.canvasRenderEl .valueLabel { padding-left: 5%; }`

---

<div class="post-metadata">

**Author:** ![preetish\_P](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@preetish\_P](https://discuss.elastic.co/u/preetish_P)\
**Post date:** [September 17, 2019, 4:11pm UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/5 "2019-09-17T16:11:46Z")

</div>

> [@tims](#):
>
> padding-left: 5%;

Thanks @tims  
Using the padding feature I was able to improve the readability of numbers (the numbers are outside the bars). This has partially solved my problem. However it seems impossible to have them right-aligned (similar to TopN chart) as the 'valueLabel' class has defined inline style of 'position:absolute' against the div element.  
Any thoughts on this ?

---

<div class="post-metadata">

**Author:** ![tims](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tims/32/46750_2.png) [@tims](https://discuss.elastic.co/u/tims)\
**Post date:** [September 17, 2019, 5:23pm UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/6 "2019-09-17T17:23:04Z")

</div>

@preetish_P You can accomplish this with a bit more CSS hacking, try something like this:

```
.canvasRenderEl .flot-base {
    width: 80% !important;
}
.canvasRenderEl .valueLabel {
     left: 85% !important;
}
```

---

<div class="post-metadata">

**Author:** ![preetish\_P](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@preetish\_P](https://discuss.elastic.co/u/preetish_P)\
**Post date:** [September 18, 2019, 8:33am UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/7 "2019-09-18T08:33:44Z")

</div>

> [@tims](#):
>
> .canvasRenderEl .valueLabel { left: 85% !important; }

Thank you. This worked like magic ! 😁

---

<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:** [October 16, 2019, 8:36am UTC](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653/8 "2019-10-16T08:36:35Z")

</div>

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