Legend overlaps since 1.11.0
See original GitHub issueThis appears to be a regression introduced in 1.11.0 - probably by: https://github.com/plotly/plotly.js/issues/53 and is still evident in "latest;
In 1.10.2 and earlier, when a legend was too wide and would overlap a pie chart, the legend would not show. Since 1.11.0, the legend is shown overlapping the pie chart.
This can be replicated very easily with the following data declaration (default everything else):
var data = [{
labels:['hello','this is a very long string and bad things are likely to happen', 'short string','moderately long string'],
values:[4,4,4,4],
type:'pie'
}];
Of these two behaviours, not showing the legend is preferred. The ideal solution (feature request I guess) would be to scale the legend to the a suitable non-overlapping size, then wrap the text within that.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:4
- Comments:19 (6 by maintainers)
Top Results From Across the Web
Text in legend overlaps - Stack Overflow
In the legend call, you should be able to add between = 5 to add spacing, and then adjust the number as needed,...
Read more >Plotly Legend Not Resizing, Causing It To Overlap Some Data
When I use Plotly without any sizing guidance legend usually covers the the subsequent elements below the Plotly chart no more overlapping! the...
Read more >Bugs and Exploits | Otherworld Legends Wiki - Fandom
Its main issue is that it cannot be performed near the top sections of the Living Room due to it being necessary to...
Read more >FacetChart.settings.chartTypes.line.valueLabels - ZoomCharts
Introduced in version 1.11.0. Controls if and how the value labels for each line is displayed on the chart. Properties. allowOverlap: boolean.
Read more >title: Changelog — Auspice documentation
The legend can no longer have duplicate entries (both for user provided color ... which also prevents the display bug where legend items...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi all,
Related to this “overlapping legend when placed at the bottom” problem,
Have you guys considered providing a JS method that returns each item in the legend and the chosen colors (
Plotly.getLegend()
for example)? Then user can draw their own legends on plain HTML.Is that a possibility?
Hi all, first I’d like to apologise for not taking care of the numerous bugs reported here sooner. I’m happy to say that the next minor release (v1.50.0) should fix the reported issues. At the very least, we will offer workarounds, most likely by adding a new legend attribute.
drop-firstRender-in-legend-draw
is the branch I’m currently using. You can give it a spin using: https://48109-45646037-gh.circle-artifacts.com/0/dist/plotly.jsNote that some of the work here overlaps with PR https://github.com/plotly/plotly.js/pull/3024 that we should close, by the way. Moreover, the work done here will make implementing https://github.com/plotly/plotly.js/issues/1340, https://github.com/plotly/plotly.js/issues/3151, https://github.com/plotly/plotly.js/issues/1199 and https://github.com/plotly/plotly.js/issues/960 (to name a few) much easier.
In brief, two things made fixing these bugs pretty tricky:
Legend.draw
constrains the legend x, y positions in order to always make the legend fit (no matter how big) inside the graph’s width/height viewport. (see 1.49.2 logic here)Both points could be considered wrong and simply dropped, but I chose to honour them (at least until a major bump).
Going through the reported examples:
https://codepen.io/etpinard/pen/dXZQGP shows the legend overlapping the plot area. Here, the constrained legend x position is wrong. See https://codepen.io/etpinard/pen/VwZjjpm which shows both a non-constrained version (using new attribute tentatively named
fitinside
) and the fixed constrained version.https://codepen.io/odow/pen/mEarpy shows a legend with a bad constrained y position and a bad computed height. See fixed version in https://codepen.io/etpinard/pen/KKPMMqb
https://jsfiddle.net/Lfxvm3zz/2/ does not honour
legend.x
whatsoever. That one still behaves badly on my dev branch.https://codepen.io/Nauss/pen/MMBdrw shows a very bad case of a wrong x position constraint. Fixed in https://codepen.io/etpinard/pen/GRKqqQO
https://codepen.io/anon/pen/KbZbRv?editors=0010 show bad behaviour on window resize, see fixed version here: https://codepen.io/etpinard/pen/MWgeeQM
From https://github.com/plotly/plotly.js/issues/2337 https://jsfiddle.net/6oq39dpy/6/ shows a messed up y constraint. Fixed in https://jsfiddle.net/2dm3y158/
From https://github.com/plotly/plotly.js/issues/2131 https://codepen.io/etpinard/pen/ZaEEyL?editors=0010 and https://codepen.io/plotly/pen/gvEaRK show bad behaviour for horizontal legends with
legend.x < 0
. See fixed versions in https://codepen.io/etpinard/pen/VwZjjxb?editors=1010 and https://codepen.io/etpinard/pen/RwbRRyLYou can also check out the image diffs off https://github.com/plotly/plotly.js/commit/7d0a5242f0250ea96166c924178a54dc28bf9763 for more before/after comparisons.
cc @plotly/plotly_js