# Canvas - Graph legend position

**URL:** <https://discuss.elastic.co/t/canvas-graph-legend-position/201765>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [October 1, 2019, 9:28am UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765 "2019-10-01T09:28:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cesarlino](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@cesarlino](https://discuss.elastic.co/u/cesarlino)\
**Post date:** [October 1, 2019, 9:28am UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/1 "2019-10-01T09:28:48Z")

</div>

Hi,

When I create a visualization there is an option of move leave the legend on the side or at the bottom. Any option selected would take the legend out of the graph area. However, the same does not happen when I create a graph in Canvas. See the image below:

 ![24](https://us1.discourse-cdn.com/elastic/original/3X/4/f/4f91ef95aabd745dbce44b9923d4708b170eb61e.png)

It does not matter which option I choose, the legend will always be on graph area and the appearance will not like great. Is there a way which I can move it out of the graph area using CSS? If so, where can I find references about that?

Regards,  
Cesar

---

<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:** [October 4, 2019, 12:14pm UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/2 "2019-10-04T12:14:57Z")

</div>

Hi @cesarlino, I answered a very similar question here: [Horizontal bar chart in Canvas - value of measure positioned inconveniently](https://discuss.elastic.co/t/horizontal-bar-chart-in-canvas-value-of-measure-positioned-inconveniently/199653)

I think you would probably need to swap out the label class for the legend class but otherwise it should work. Let me know if it doesn't.

---

<div class="post-metadata">

**Author:** ![cesarlino](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@cesarlino](https://discuss.elastic.co/u/cesarlino)\
**Post date:** [October 7, 2019, 2:57pm UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/3 "2019-10-07T14:57:12Z")

</div>

Hi @tims, thank you for your reply.

I was able to use CSS to padding valueLabel in the graph based on some post in Elastic community. However, I did not find anything about legend. How can I get the CSS elements for the graph legend?

Regards,  
Cesar Lino

---

<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:** [October 8, 2019, 2:30pm UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/4 "2019-10-08T14:30:49Z")

</div>

Hey @cesarlino,

Try this:

```
.canvasRenderEl .flot-base {
    width: 70% !important;
}
.canvasRenderEl .legend table {
    left: 75% !important;
}
```

---

<div class="post-metadata">

**Author:** ![cesarlino](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@cesarlino](https://discuss.elastic.co/u/cesarlino)\
**Post date:** [October 9, 2019, 7:45am UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/5 "2019-10-09T07:45:07Z")

</div>

Thanks @tims.

It worked to place the legend at the right side. However, graph is not aligned with the x-axis. Anyway, I got the idea and I will play with that.

Thanks,  
Cesar Lino

---

<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:** [November 6, 2019, 7:45am UTC](https://discuss.elastic.co/t/canvas-graph-legend-position/201765/6 "2019-11-06T07:45:10Z")

</div>

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