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

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.

[salim-b]

+1

Although I appreciate the great demand for a fix of this issue, I doubt that all the “+1” comments (and the thereby triggered e-mail notifications) will eventually help to motivate the plotly developers to finally implement a solution for the problem. So just use GitHub reactions to express your support, please 😉

[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.