Canvas - Graph legend position

[cesarlino]

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:

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

[tims (Tim Schnell)]

Hi @cesarlino, I answered a very similar question here: Horizontal bar chart in Canvas - value of measure positioned inconveniently

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.

[cesarlino]

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

[tims (Tim Schnell)]

Hey @cesarlino,

Try this:

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

[cesarlino]

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