question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Horizontal legend layouts with long series names become vertical

See original GitHub issue

Repro cases: http://codepen.io/anon/pen/RGozGE

I’ve encountered an odd behavior on horizontal legends with long series names. If the series names are relatively short, setting layout.legend.orientation to 'h' does indeed produce a reasonably laid out horizontal legend where each line of the legend is filled with as many series as possible (first example in the codepen). If, however, a series has a very long name, each series is placed on its own row in the legend (effectively becoming a vertical legend), even though there’s clearly room for series with shorter names to be placed on the same rows (second example in the codepen). I think the more logical behavior should be something like this, where the series are packed into rows as closely as their names allow.

I’m happy to make a PR to improve this (it should just involve fiddling with the logic near legend/draw.js:603). Should the current behavior be preserved via a new legend attribute whose default is the current behavior and has an option for the new behavior, or is the current behavior never reasonable and should be replaced?

CC to @markwatabe who originally discussed this issue with me and helped with the proposed solution.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:6
  • Comments:13 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
jackparmercommented, Sep 10, 2020

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $5k-$10k

What Sponsorship includes:

  • Completion of this feature to the Sponsor’s satisfaction, in a manner coherent with the rest of the Plotly.js library and API
  • Tests for this feature
  • Long-term support (continued support of this feature in the latest version of Plotly.js)
  • Documentation at plotly.com/javascript
  • Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
  • Possibility of integrating this feature with Dash
  • Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
  • Gratification of advancing the world’s most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

0reactions
paulovieiracommented, Jun 14, 2022

The simplest workaround to avoid this problem is to slice(0, maxLengthForLegend) the trace’s name (maxLengthForLegend between 20 and 30 seem to work well and allow the trace name to be recognized).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Raster Enhancement: The Horizontal Legend - Esri
Raster enhancement: The horizontal legend · 1. Right-click on the legend, and click Properties. · 2. Click on the Items tab. · 3....
Read more >
Arrange a legend—ArcGIS Pro | Documentation
The vertical gap between the legend item heading and the classes in that item. The vertical gap between different legend items.
Read more >
plotly in R: Listing legend items horizontally and centered ...
1 Answer 1 · Thanks! · Adding y=-0.2 to the legend=list() should drop the legend below the x-axis label. · I confirm @TTS....
Read more >
legend.layout | highcharts API Reference
legend. The legend is a box containing a symbol and name for each series item or point item in the ... Can be...
Read more >
Legend - Concepts - Handbook - Apache ECharts
Layout. Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found