Legend item wrap with layout.legend.orientation = h #1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…tarting new row of legend items
|
|
|
|
|
I used this test data: (DATA.data and DATA.layout): |
| @@ -568,18 +568,32 @@ function computeLegendDimensions(gd, groups, traces) { | |||
| else { | |||
| opts.width = 0; | |||
| 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Should help with plotly#769: