Legend stretches the chart or even jumps above it - problem

plotly.js
1

Having a problem, that if I load too many traces into plotly chart, or these traces have too long names, the legend stretches the chart, as you can see on following image:

c1.PNG1150×399 14.3 KB

Or even the legend is jumping on the chart:

c2.PNG1055×351 46.5 KB

How can I deal with this? How can I tell the legend to stay still on it’s place? Or maybe there’s a method to specify the width and length or even the position of legend?

2

Try setting

layout.legend.x = 0 // corresponds to left edge of plot area
layout.legend.x = 1 // corresponds to right edge of plot area

layout.legend.y = 0 // corresponds to bottom of plot area
layout.legend.y = 1 // corresponds to top of plot area
1 Like
3

That’s not possible at the moment.

Our legend position is far from perfect at the moment. You might want to subscribe to Add legend 'auto' x|y and/or 'container' (x|y)ref · Issue #1199 · plotly/plotly.js · GitHub for the latest development info.

4

Is there any progress in positioning legends? It seems that these issues persist even now after 7 years.

5

Obviously the problem is positioning but this only happens when we use the orientation property with the value “h” and when we make the area of ​​the graph bigger, however if we use the “yanchor” to “top” and “y” with a value of 0 the error does not happen, the problem apparently is that when the “orientation” property is used to “h” the position of ​​the legend continues to calculate it as if the “orientation” were “v” that is why when positioning the layer of the legends they remain on top of the graph, to solve this you have to position it correctly, I leave you a solution

6

This is another option that improves the area of ​​the legends, but the more the area of ​​the graph is reduced, they overlap.

Both cases still have problems when reducing the area of ​​the graph, in the first the container of the legends leaves the container of the entire graph, therefore you can barely see the last items when scrolling the list and in the second case they are visible all items but the legend container overlaps the X axis title.

7

And this is the last option without so much calculation and better than the previous ones.

There is more than one way to skin a cat.