Legend item wrap with layout.legend.orientation = h - #1
Conversation
…tarting new row of legend items
psalmody
commented
Jul 22, 2016
psalmody
commented
Jul 22, 2016
psalmody
commented
Jul 22, 2016
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:
varrowHeight=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.
n-riesco
commented
Jul 25, 2016
@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
commented
Jul 25, 2016
n-riesco
commented
Jul 26, 2016
@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 |
psalmody
commented
Jul 26, 2016
@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: