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?

[mdtusz]

Yep! Open a PR with your fork and we'll take a look at it!

[psalmody]

@etpinard @mdtusz See #786

[yniknafs]

@psalmody @etpinard

I understand that customizing the grid is probably more complicated than its worth. But something I noticed is that when more than one row appear, the x-positioning of the legend is lost. So if you have one row, you can center the legend with xanchor: center, x:0.5. Once you have 2 rows, it just defaults to far left and any of the xanchor, x options don't do anything.

All I did in second screenshot was make the plot narrower.

legend: {
      orientation: 'h',
      y: -0.5,
      xanchor: 'center',
      x: 0.5,
    },

[psalmody]

@yniknafs It's a great idea. Not sure I personally have the time to modify the code though... :(

[viggotw]

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?

I realize I am pretty late for this conversation, but that suggestion sounds fantastic. The problem with using legend groups to align/group the legends is that this also makes them visible/invisible together when you toggle-click the trace name in the legend. More than ones, I have wanted to group similar legends together, though be able to make them invisible seperatly.

[adibiasio]

Any updates on this?