Ability to Provide Title to Legend/ Legend Groups

[alexander-alvarez]

I'm 😢 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:

A
 - 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.

[rithwikjc]

I was looking for exactly the same thing @alexander-alvarez was looking for. That is,

A
 - thing 1
 - thing 2
B
 - thing

I used some hack to achieve a semi-desirable result, which seems much much more straightforward than trying to make a annotation align perfectly next to the legend.
For me each group shares the same color, and the traces within the group have different marker or dash property.

I did this by adding a dummy trace, which essentially contains no data (and hence no effect on the plot).

 fig.add_trace(go.Scatter(x=[0], y=[0], name='GroupTitle', legendgroup='GroupTitle',
                                     line_color=color_of_group , mode='lines',  line_width=10))

This essentially creates a new item in legend, but has it's name as the group title. The big block (line of width 10), represents the color of the group for me.

You can also remove the color block next to the group title by changing line_width=0 or opacity=0, creating the legend as shown below. However I prefer a solid color block instead of a misaligned group title.

[nicolaskruchten]

A short update on this issue: it covers legend titles (which was implemented last year) and legend group titles which we are working on now, tracked in #5260

[nicolaskruchten]

We received anonymous sponsorship for this item and implemented legend group titles in #5752 (to be released in v2.2). Clickable legend group titles are now tracked separately here: #5765 and separately toggle-able grouped items are tracked here #3135

Finally, it seems is if part of the desire to group legend items with titles stems from actually wanting multiple separate, titled legends. We added legend titles last year, and the idea of having multiple independently-positionable legends is tracked here #5098.

I'm closing this issue as 'resolved' and locking it for now and encouraging folks with follow-up or related comments to use one of the issues above please :)