Horizontal legend items not visible when many legend items

[psalmody]

Was pointed out in #766 that scrolling not intended for layout.legend.orientation = 'h'. Example workaround is to use legend groups.

This is not a great solution, however, as it means clicking the legend group hides/shows ALL traces in the group (see jsfiddle).

Proposing that plotly.js implement something similar to ggplot2 which automatically wraps additional legend items on horizontal legend orientation. Especially on mobile portrait orientation, this allows the graph data to take up the entire width of the screen and push the legend below the graph which is much preferable in my view.

[etpinard]

Thanks.

[psalmody]

@etpinard Can you review this PR on my fork? I think it should resolves this issue. psalmody#1

[etpinard]

@psalmody I think that should do it.

One possible imperfection I see here:

is that the items on the second line don't line up with the items above them - unlike in the ggplot example you posted. Was that on purpose?

[psalmody]

@etpinard I did notice that but decided it's probably more complicated than it's worth. Personally, I don't have any problems with the items not appearing in columns and I think that the legend groups workaround would still be possible if a user really wanted the lined-up columns.

[etpinard]

I did notice that but decided it's probably more complicated than it's worth

Yeah. I agree. Your solution sounds like a solid fallback for extra-wide legends. If ever some users want a more fine-grained legend layout, we could always add support for something like:

layout.legend = {
  type: 'grid',
  grid: [ [ 'trace 0', 'trace 1', 'trace 2'], ['trace 4', 'trace 3'] ]
};

down the road.

@n-riesco what do you think?

[n-riesco]

I'm unable to test this until Monday.

Does toggling traces work in this PR?

[psalmody]

If by toggle you mean hide/show the trace by clicking the legend item, yes.

[n-riesco]

@etpinard , @mdtusz I think this PR is ready for review.

---

This PR is an improvement over the current behaviour. I think there is a low hanging fruit that could be implemented in another PR. With this PR, a multiline horizontal legend would look like this:

One easy way to align the traces in a grid would be to iterate over all the traces to compute the maximum width, and use this width for all the traces.

[psalmody]

@etpinard I've made a change to the pull request per @n-riesco suggestions about aligning traces in a grid. I agree that it looks much better and it was simpler to do than I originally thought.

[psalmody]

Sorry but new to this process. @etpinard or @mdtusz should I send a PR back to plotly/plotly.js from my fork?