Plotly.js: Ability to Provide Title to Legend/ Legend Groups

[alexander-alvarez]

I'm :cry: that I can add a heading to the different groups generated by legendgroup.

I'd like to group my traces by a particular property on the input data, and also display a label.

Imagine data:

[{ 'group': 'A', name: 'thing 1'}, 
{ 'group': 'A', name: 'thing 2'}, 
{ 'group': 'B', name: 'thing' }]

If I want the legend to include context about the group, I'd have to prefix the name with the group:

- A: thing 1
- A: thing 2

- B: thing

Whereas if we had the ability to add an overarching legend headings (and for each group) we could do this:

 - thing 1
 - thing 2
B
 - thing

you can see where this is an issue with longer group names

[etpinard]

That would be nice!

It won't be a priority for us though as legend headings can easily be mocked using with properly placed annotations.

That said, it would a great opportunity for a community contributor.

The patch should be in src/components/legend/draw.js. Currently the has-legend-group logic is in this block.

[bluprince13]

Wondered if there's been any progress on this. I posted a question on stackoverflow, and got a couple of good short term solutions, but it'd be good to have it native in the future.

[daattali]

Legend headings can be hacked using annotations, but it's far from an ideal solution. Getting the perfectly right is tough, and even worse is the fact that if the plotly doesn't account for space taken by the heading, so if the title is longer than the legend labels, it will run off the screen.

Would be awesome to at least support a basic title without groupings as a first step

[seansfkelley]

AFAICT, using absolute positioning annotations doesn't work if you have legend groups with varying lengths. I have two legend groups of unknown size, so I can't safely position a label at all times so as to be readable and not misleading. Unfortunately, that makes the legend significantly less useful, since many of the traces are named similarly. Unless there's a different workaround for this case?

[Braintelligence]

Also looking for a way to get this working if your plot varies in height/width in some situations (different plot layout for downloads or varying screen size).
I already have to account for the legend not clipping on 360px wide screens (still the mostly used width for smartphones globally), but hand-placing legend group titles for every occasion is just too much...

If we could somehow anchor annotations to legend groups this specific problem would be instantly solved.

[strass]

That plotly.py issue above says legend titles were added in v4.5. Is there a similar feature for JS? I have the same issue as sean where my legend groups have variable sizes

[nicolaskruchten]

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: $10k-$15k

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.