Add legend 'auto' x|y and/or 'container' (x|y)ref

[salim-b]

The problem is that the horizontal legend overlaps the x-axis title. It occurs if the legend is positioned below (rather than to the right of) the plot area using layout = {legend: {"orientation": "h"}};. It aggravates in combination with multiline x-axis titles (using <br> tags).

Currently there's no way to control the spacing between the legend and the plotting area. Everything is auto-scaled, it is useless to set the bottom margin (layout = {margin: {"b": ...}};) in this case because it refers to the space below the legend. The only way to make the whole x-axis title visible is to increase the height of the whole plot until the autoscaling sufficiently spreads the legend and the plotting area apart.

I try to illustrate the problem with the following 3 images which differ only in frame height:

height 700px:

height 1000px:

height 1300px:

Here is the above plot hosted on plot.ly.

[n-riesco]

This is happening because layout.margin.b is set to 0 and the default position for horizontal legends is:

x: 0,
xanchor: 'left',
y: 1.1,
yanchor: 'bottom'

@etpinard Would it make sense to make the defaults smarter and check the value of layout.margin.b?

[salim-b]

... and check the value of layout.margin.b?

I don't think layout.margin.b is central to this. If you play around a little with different combinations of layout.margin.b and layout.legend.yanchor, you quickly see that in the plot above you'll get nowhere desirable... actually the default of layout.legend.yanchor, which seems to be top not bottom (at least when I'm plotting in R), leads to the best results.

The problem in my eyes is that – when layout.legend.orientation is horizontal and the rest of the legend positioning parameters left to their default values – the legend overlaps the plotting area in the first place. In the default case the legend should always be placed below the x-axis, then it would be fine.

[etpinard]

Probably a duplicate of #1190

[herrgruebner]

I was having a similar issue with the horizontal legend overlapping x axis values, when the x axis values were long enough, like dates. I'm adding this here because it's the only issue that comes up when you google it, and it seems related. This happens with only setting {legend: 'horizontal'} in the layout and nothing else.

I tried a couple of different things, like playing with layout.legend.yanchor and the margins, but the legend doesn't appear to be affected by margins, it stays in the same place relative to the dates, and yanchor shifts it a little bit but it remains on top of the x axis ticks.

In the end my solution was to absolutely position the legend using
legend: {
"orientation": "h",
xanchor: "center",
y: 1.2,
x: 0.5
},

This has the side effect of putting the legend on top of the graph, but you can position it below the graph by lowering the Y value. It appears that the default X and Y values according to the docs (1, 1.2) are changed to a different value when the legend is set to horizontal, which makes sense, but should also be reflected in the documentation here:

https://plot.ly/javascript/reference/#layout-legend

I chose to put it above the graph because I know my x axis values are going to change in length and the graph is being iframed into a small spot, so I don't want to waste space. Not super pretty or anything, but a reasonable workaround.

Hopefully the horizontal legends are changed so that it will take into account x axis tick length automatically, or there's another easy way to do it I haven't found.

[ck37]

I am running into this issue also.

[jinuem]

Same Issue :(

[hy9be]

+1

[suribabu39]

+1

[anafziger]

+1

[kiezuz]

+1

[FrantisekGazo]

+1

[yunxileo]

+1

[allanelder]

+1

[tabuechn]

+1