Repository navigation
Add legend 'auto' x|y and/or 'container' (x|y)ref #1199
Description
Activity
This is happening because
layout.margin.bis 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?... and check the value of
layout.margin.b?I don't think
layout.margin.bis central to this. If you play around a little with different combinations oflayout.margin.bandlayout.legend.yanchor, you quickly see that in the plot above you'll get nowhere desirable... actually the default oflayout.legend.yanchor, which seems to betopnotbottom(at least when I'm plotting inR), leads to the best results.The problem in my eyes is that – when
layout.legend.orientationis 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.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.
Reacted by Chris Kennedy, Jonas Daugalas, v-calzado, Kartik Malik, Maxim Kupfer, Jaime Villacampa, Matt Fehskens, Maria Apsolon and Artem Petrov36 remaining items
Is there any update on this? I have some legends with a lot of text, the text is dynamic, so I can't do much about hose long the text is. When the chart generates, the legend overlaps the x-axis legend considerably.
Is there anything the community can do to help?
If someone wants to take on some implementation work, we'd be happy to iterate on a design and review some PRs, but at the moment this is no longer on our short-term roadmap.
If you work for an organization with a software budget, you could sponsor this feature to bump it up our priority list.
- I didn't know sponsoring a feature could be a thing
- I'll try to take a look to help out
Great! :)
This issue has been tagged with
NEEDS SPON$ORA community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.
Sponsorship range: $10k-$15k
What Sponsorship includes:
- Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
- Tests for this feature
- Long-term support (continued support of this feature in the latest version of Plotly.js)
- Documentation at plotly.com/javascript
- Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
- Possibility of integrating this feature with Dash
- Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
- Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)
Please include the link to this issue when contacting us to discuss.
Setting layout.legend.y = "auto" and layout.legend.yanchor = "top" helped me to avoid legend overlapping on x-axis title
Resizing responsive plots multiple times in quick succession can also cause the legend to overlap with the rest of the plot. After the bug occurs, triggering a resize by in- or decreasing by a few px and then returning to the previous page dimensions renders the plot correctly this time.
these layout settings allowed me to avoid this issue occurring entirely:
'yref': container
'yanchor': bottom
'xanchor': center
'x': 0.5
'orientation': 'h'Reacted by Mojtaba Samimi, Marcus Marosvari, EternityK1 and Anivariesthese layout settings allowed me to avoid this issue occurring entirely: 'yref': container 'yanchor': bottom 'xanchor': center 'x': 0.5 'orientation': 'h'
@alexcjohnson @hannahker
Does that mean we could close this issue?Does that mean we could close this issue?
Obviously I can't speak for the people you mentioned, but my original issue has indeed been fixed since I've last checked (2017). Tested with plotly.js v2.11.1 (included in the plotly R package 4.10.2). 🙂
Reacted by Mojtaba SamimiReacted by Hannah Kerthese layout settings allowed me to avoid this issue occurring entirely: 'yref': container 'yanchor': bottom 'xanchor': center 'x': 0.5 'orientation': 'h'
@alexcjohnson @hannahker Does that mean we could close this issue?
With the settings, I still need to set a proper
layout.margin.bmanually to avoid overlapping between the X-axis title and the legend.
So I don't think the issue fixed completely...Reacted by Gilles Marchand and Simon CoulombeDoes that mean we could close this issue?
Obviously I can't speak for the people you mentioned, but my original issue has indeed been fixed since I've last checked (2017). Tested with plotly.js v2.11.1 (included in the plotly R package 4.10.2). 🙂
I still have this issue, what settings worked for you? thanks
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.