Legend item wrap with layout.legend.orientation = h#1
Conversation
…tarting new row of legend items
|
I used this test data: (DATA.data and DATA.layout): |
| opts.height = 0; | ||
| var rowHeight = 0; | ||
| var maxTraceHeight = 0; | ||
| var startX = 0; |
There was a problem hiding this comment.
The convention in Plotly.js is to write this using a single var:
var rowHeight = 0,
maxTraceHeight = 0,
startX = 0;There was a problem hiding this comment.
Also, I'd rename startX to offsetX to be consistent with the naming used here.
|
@psalmody I can see a problem when I set the width of your example to 500px (one the traces gets truncated). I'm still trying to understand why this happens. |
|
@n-riesco I think I actually found the problem - it wasn't calculating the margin width based on BOTH the left AND right margins. See e7a286f and now it works with 500px width. (Incidentally, I can't figure out in the Plotly test environment how to set the width of the graph... hacking it with jQuery from the console before plotting. Help?) |
|
@psalmody I think e7a286f is a good compromise. The condition if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) {
// ...
}limits the width of horizontal legends so that they cannot extend into the margins (unlike vertical legends). I think if reproducing the behaviour of vertical legends is really needed, this could be done in another PR. This PR is already an improvement. To answer your question about setting width. The easiest way is to set |
|
@n-riesco Thanks. Assuming this PR is merged and approved, I'll work next on extending into the margins and iterating over all traces to line up horizontal legend items in a column. |
Horizontal legend in columns



Should help with plotly#769: