Skip to content

Ability to constrain legend background to the legend text #4132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
chriddyp opened this issue Aug 16, 2019 · 5 comments · Fixed by #4160
Closed

Ability to constrain legend background to the legend text #4132

chriddyp opened this issue Aug 16, 2019 · 5 comments · Fixed by #4160
Assignees
@etpinard
Labels
bug something broken

Comments

@chriddyp
Copy link
Member

In this example, the legend's background color spans the entire width of the graph. It'd be nice if it only spanned the legend text, so that the lines on the right of the graph aren't beneath the semi-transparent white legend background.

image
@etpinard etpinard self-assigned this Aug 16, 2019
@etpinard etpinard added the bug something broken label Aug 16, 2019
@etpinard
Copy link
Contributor

Fixed in https://github.com/plotly/plotly.js/compare/drop-firstRender-in-legend-draw

will be part of 1.50.0

@chriddyp
Copy link
Member Author

nice!

@etpinard
Copy link
Contributor

Actually, I can't even reproduce this bug on latest, let alone on my dev branch.

My attempt: https://codepen.io/etpinard/pen/OJLXRJa?editors=1010

Which font are you using?

@etpinard
Copy link
Contributor

https://codepen.io/etpinard/pen/OJLXRJa?editors=1010 now has a minimal reproducible example.

The problem happens with horizontal legends when legendgroup is set.

etpinard added a commit that referenced this issue Aug 19, 2019
@etpinard
add mock showing #4132 bug
208f202
etpinard added a commit that referenced this issue Aug 19, 2019
@etpinard
fix #4132 - fix grouped horizontal legend dimension computations
b324f98 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mock showing #4132 bug
bd09e7d
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix grouped horizontal legend dimension computations
2a147df 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mock showing #4132 bug
38e94ea
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix grouped horizontal legend dimension computations
2139f28 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mock showing #4132 bug
c3ff74a
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix grouped horizontal legend dimension computations
ef48b57 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mock showing #4132 bug
ea5ce89
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix grouped horizontal legend dimension computations
2e83102 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
e0518f5
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
0e06fe9 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
022b2ac
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
75efb31 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
736adcb
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
223f497 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
d4e1514
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
faeb449 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
3d261b0
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
98f423e 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
add mocks showing #4132 bug
2b2bd9b
etpinard added a commit that referenced this issue Aug 30, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
6b0befe 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
@etpinard etpinard mentioned this issue Aug 30, 2019
Merged
etpinard added a commit that referenced this issue Sep 19, 2019
@etpinard
add mocks showing #4132 bug
5bdf646
etpinard added a commit that referenced this issue Sep 19, 2019
@etpinard
fix #4132 - fix horizontal legend dimension computations
ea194fe 
- which gives better margin pushes,
  fixes legendgroup_horizontal_wrapping mock
- use per-item width for toggle-rect width in ALL horizontal legends,
  we could eventually compute "per-column" width, if
  someone finds it useful
@jensb
Copy link

jensb commented Oct 11, 2019

How do you get the semi-transparent legend background in your screenshot above?
It's possible to set bgcolor=rgba(x,y,z,128) for example but it's ignored. Only 0 (transparent) or >0 (non-transparent) seem to have any effect.
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@etpinard etpinard

Labels
bug something broken
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Multiple legend positioning and sizing fixes plotly/plotly.js
3 participants
@jensb @chriddyp @etpinard