Repository navigation
Horizontal legend items not visible when many legend items #769
Description
Activity
- changed the title
[-]Horizontal legend items not visible when many items[/-][+]Horizontal legend items not visible when many legend items[/+]on Jul 22, 2016 Thanks.
- added a commit that references this issue
on Jul 22, 2016 @etpinard Can you review this PR on my fork? I think it should resolves this issue. psalmody#1
@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.
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?
Reacted by Viggo Tellefsen WivestadI'm unable to test this until Monday.
Does toggling traces work in this PR?
If by toggle you mean hide/show the trace by clicking the legend item, yes.
@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.
Yep! Open a PR with your fork and we'll take a look at it!
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, },
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.
Any updates on this?
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.
