Legend overlaps since 1.11.0

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

[didip]

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?

[etpinard]

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

Note 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:

• how 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)
• how our auto-margin algo drops “push” values greater than half of the graph’s width or height (that’s done 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/RwbRRyL

You 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