How to move a big legend above the plot

plotly.js
1

Hello,
I’m new to plotly and I like that library. I cannot place the legend above or under my plot so that all looks fine.
I have e.g. 15 traces in my plot with 2 y-axes and I had configure a range slider.
My goal is to place the legend above or under the plot. The plot and the range-slider should be align each other.
It tries many combinations of x,y, xanchor, anchor but don’t achieve my goal.

I created a jsFiddle example for that: https://jsfiddle.net/3trr91m0/2/

The plotly-reference of the legend ( https://plot.ly/javascript/reference/#layout-legend ) says you can use the 4 mentioned values to specify the position of the legend:
xanchor (enumerated: “auto” | “left” | “center” | “right” )
default: "left"
Sets the legend’s horizontal position anchor. This anchor binds the x position to the “left”, “center” or “right” of the legend.
yanchor (enumerated: “auto” | “top” | “middle” | “bottom” )
default: "auto"
Sets the legend’s vertical position anchor This anchor binds the y position to the “top”, “middle” or “bottom” of the legend.
x (number between or equal to -2 and 3)
default: 1.02
Sets the x position (in normalized coordinates) of the legend.
y (number between or equal to -2 and 3)
default: 1
Sets the y position (in normalized coordinates) of the legend.

I not really understand xanchor and yanchor: It binds the x position on e.g. “top” of the legend. Why of the legend? I don’t understand that…
Maybe anbody can help me so that my example looks fine.

2

Ha. Looks like you discovered a bug. I filed it here https://github.com/plotly/plotly.js/issues/1096. I’d recommend subscribing to this issue for the latest development info.

I believe the root of the problem is related to how legends and range slidesr impact the margin dimensions. So, to bypass that (buggy) algorithm, you can try setting the margin dimensions manually. I think I manage to get the desired results here: https://jsfiddle.net/74h1oq1k/2/ by setting layout.margin.t to some large value.

1 Like
3

Thank you for ur fast answer and the bypass - I have subscribed the issue.

I just noticed a second problem now: The selector options(1m, 6m, …) for the range slider are not visible too. If I search for “selector-rect” in the dom there is nothing. Anybody maybe have an explanation for that behaviour?

4

By the way: I think it is often the problem, that the legend hides the plot. I saw this issue: https://github.com/plotly/plotly.js/issues/348.

Here the https://cloud.githubusercontent.com/assets/837910/13959365/d614c40c-f021-11e5-99ee-7323b62aece7.gif is the behaviour of v1.7.0 I think. And now the associated codepen example have another behaviour (legend hides plot) with v1.19.1: http://codepen.io/timelyportfolio/pen/dMvgqd

So I guess that something changed in the lib plotly.js from v1.7.0 to current version (v1.19.1) that do the not desired behaviour…

5

Range selectors are only available for date axes at the moment. You can try using Plotly.validate(traces, layout) to confirm attribute interactions like these in the future: