Legend overlaps since 1.11.0

[lp-jonathan]

This appears to be a regression introduced in 1.11.0 - probably by: #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.

[etpinard]

Reproducible example here: http://codepen.io/etpinard/pen/dXZQGP

Is this really a bug though? To me the behaviour in latest makes more sense - where by default (when no layout.legend options have been set) the legend items are squeezed into the graph.

That said, something is up with legend positioning. Take a look at http://codepen.io/etpinard/pen/mELQPA - even by setting legend.x to something > 1, the legend refuses to be placed on the right of the graph.

I doubt that this affects only pie charts. The legend drawing code is pretty trace type agnostic. To be investigated.

[lp-jonathan]

Thanks for creating the reproduction.

Curious - in my application when I had a too-long legend, it simply
didn't show the legend, I assumed that was a design feature. But your
first 1.10 example shows the legend but mostly obscured. In that
scenario neither is ideal. The second example is the best of the three.

My suggestion would be to enable word-wrap and allow the developer to
specify the maximum width of the legend.

On 25/07/2016 18:38, Étienne Tétreault-Pinard wrote:

Reproducible example here: http://codepen.io/etpinard/pen/dXZQGP

Is this really a bug though? To me the behaviour in |latest| makes
more sense - where by default (when no |layout.legend| options have
been set) the legend items are squeezed into the graph.

That said, something is up with legend positioning. Take a look at
http://codepen.io/etpinard/pen/mELQPA - even by setting |legend.x| to
something |> 1|, the legend refuses to be placed on the right of the
graph.

I doubt that affect only pie charts. The legend drawing code is pretty
trace type agnostic. To be investigated.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#771 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATqs82JMf8dyw7MjT2kJoR6grLkiOOm-ks5qZPSigaJpZM4JTiVV.

[n-riesco]

The logic to handle oversized legends is here.

[etpinard]

Another report in #840

---

From @odow

Narrow screens cause horizontal legends with lots of entries to bug.

https://codepen.io/odow/pen/mEarpy

In this example, the three column layout is fine, but when the width forces a two column layout, the legend is no longer below the plot area but on top of, and scrolling is enabled.

---

From @n-riesco

The problem is in the current algorithm to position the legend. The algorithm goes like this:

1. Plotly tries to locate the legend at the requested x and y.
2. If the legend doesn't fit there, Plotly tries to expand the plot margins.
3. If, after expanding the margins, any of the sides of the legend box is still outside the plotting area, Plotly resizes the legend box to fit into the plotting area (This is what we're seeing in the codepen example above; the top and bottom sides of the legend box were outside the plotting area, and Plotly has moved them into the plotting area).
4. If, after resizing, the legend doesn't fit into the legend box, a vertical scrollbar is added.

In the case of horizontal legends that don't fit into the plotting area (even after trying to expand the margins), this algorithm ends up with a legend box that covers the whole plotting area.

I guess that the first question to answer is what Plotly should do with horizontal legends that don't fit the plotting area (even after expanding the plot margins).

[mattdonut]

I've been looking into the issues with legend placement and auto margins in horizontal mode, and I have found a few things.

https://jsfiddle.net/Lfxvm3zz/2/

It looks like Plotly goes through a few steps when placing the legend:

1. Compute the legend's dimensions
2. Expand the base margins to accommodate the legend if it can
3. If the legend is still passing outside the bounds of the viewport, move it to bring it into view (potentially on top of the plot)
4. Clip the legend to a rect no larger than the plot
5. Add a scrollbar if needed

Because the margins are checked before the scrollbar clipping is done, it always considers the full height of the legend. This height can easily be taller than the viewport if you have a large number of traces with any long trace names, which will cause Plotly to not be able to include the legends height in the margin spacings. In these cases, no margin is added and the legend is pushed up onto the plot, then clipped at the height of the plot, covering it almost completely.
The scrollbar axis and the margin scaling axis align for horizontal legends, so there is no way for Plotly to infer the height the legend should be clipped to.

I think a maxHeight attribute or some other method of deciding how tall the legend should be allowed to be may be needed for horizontal mode legends so that it can be included in the margin calculations.

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

[PPPW]

I have got a similar issue:
https://codepen.io/anon/pen/BdvvKV?editors=1010

When the legend text is too long, it also overlaps. You can change the "name" of the trace to see the difference.
I wonder is there a way to tell when it will overlap? If so then it's fine to me: when I know it will overlap, I can hide the legend.
I can kind of tell when it will overlap by checking whether:
$('#chartDiv g.xy').attr('transform') == $('#chartDiv g.legend').attr('transform').replace(/ /g, '')

But it'll be better if Plotly can provide some function to tell this... Thanks!

[seansfkelley]

This is still a problem on latest. I also have a pen that reproduces the issue in a manner similar to how it manifests in my project, where some plots have a large number of legend items. If you resize the window to make it narrower, you will see the legend jump around between being well-behaved, ending up above the chart or obscuring the chart entirely.

My space constraints are pretty lax, but I wasn't able to find a suitable workaround. I was hoping to find some kind of setting that would do something like preserve a fixed size for the plot area and then use up as much additional space as it needs for the legend, but such an option doesn't appear to exist.

[brylie]

As is becoming evident, this is a general issue with any Plotly chart rendered in a small container. For what it's worth, this issue is being 'wrestled with' in downstream projects, e.g. like this:

https://github.com/getredash/redash/blob/9292ae8d3fe3d22b10554a10ce4cefe76214c5d4/client/app/visualizations/chart/plotly/utils.js#L746-L807