Feature Request: Horizontal movement of `tracegroupgap` when `orientation='h'`

[MattiasMTS]

Thanks for your interest in Plotly.py!

Before opening an issue, please search for existing and closed issues :)

Please accompany bug reports with a reproducible example. Please use the latest version of plotly.py in your report unless not applicable.

Note that GitHub Issues are meant to be used for bug reports and feature requests only. Implementation or usage questions should be asked on community.plotly.com or on Stack Overflow (tagged plotly).

Request:

Dear plotly gang,

We all love plotly, it is blazingly fast and swiftly. Recently, I followed a thread on the community guidelines regarding "Subplots with individual legends" on it. This thread covered having the grouped legends divided for each horizontal subplot by using the tracegroupgap argument in the legend attribute of update_layout method.

However, if one would want to use the same methodology but now set orientation='h' for the legend, this fails since the tracegroupgap attribute only moves it vertically and not horizontally. Ergo, my request would be to also update this method to take into account that if orientation='h' then tracegroupgap should move horizontally and vice versa.

Example code

Some dummy code on how it could look like:

import pandas as pd
import plotly.express as px
from plotly.subplots import make_subplots
import plotly.graph_objects as go

def main():
    df = px.data.gapminder().query("continent=='Americas'")
    fig = make_subplots(rows=1, cols=3)

    fig.append_trace(go.Scatter(
        x=df.query("country == 'Canada'")['year'],
        y=df.query("country == 'Canada'")['lifeExp'],
        name = 'Canada',
        legendgroup = '1'
    ), row=1, col=1)
    fig.append_trace(go.Scatter(
        x=df.query("country == 'United States'")['year'],
        y=df.query("country == 'United States'")['lifeExp'],
        name = 'United States',
        legendgroup = '1'
    ), row=1, col=1)
    
    fig.append_trace(go.Scatter(
        x=df.query("country == 'Mexico'")['year'],
        y=df.query("country == 'Mexico'")['lifeExp'],
        name = 'Mexico',
        legendgroup = '2'
    ), row=1, col=2)
    fig.append_trace(go.Scatter(
        x=df.query("country == 'Colombia'")['year'],
        y=df.query("country == 'Colombia'")['lifeExp'],
        name = 'Colombia',
        legendgroup = '2'
    ), row=1, col=2)
    fig.append_trace(go.Scatter(
        x=df.query("country == 'Brazil'")['year'],
        y=df.query("country == 'Brazil'")['lifeExp'],
        name = 'Brazil',
        legendgroup = '2'
    ), row=1, col=2)
    
    fig.append_trace(go.Scatter(
        x=df.query("country == 'Argentina'")['year'],
        y=df.query("country == 'Argentina'")['lifeExp'],
        name = 'Argentina',
        legendgroup = '3'
    ), row=1, col=3)
    fig.append_trace(go.Scatter(
        x=df.query("country == 'Chile'")['year'],
        y=df.query("country == 'Chile'")['lifeExp'],
        name = 'Chile',
        legendgroup = '3'
    ), row=1, col=3)
    
    fig.update_layout(
        legend=dict(
              traceorder='normal', 
              orientation='h',
              xanchor='center',
              yanchor='bottom',
              y=1.02,
              x=0.5,
              tracegroupgap=500,  # doesn't impact the final plot anything since orientation='h', but would be nice!
)
    )

if __name__ == '__main__':
    main()

[Brian-Keith]

100% would love this feature, or generally more ability to configure legend entry padding/margins relative to the legend entries as well as the legend items. Currently, especially with smaller font sizes, the amount of padding looks terrible and can cause plots with many series to unnecessarily overflow into a new row.

I think there may be a way to modify the horizontal spacing with JS based on this post, but I haven't been able to figure out how to execute the JS needed on render with plotly.py.

[Coding-with-Adam]

Thanks for sharing your thoughts, @Brian-Keith . This would actually be a good first issue if you would like to contribute. Potentially, it could be updated to “vertical spacing for vertically-oriented legends, horizontal spacing for horizontally-oriented legends”

[Brian-Keith]

Hey @Coding-with-Adam Thank you for labeling the issue. I would love to contribute to a product I've spent so much time utilizing. I would imagine however that this change would need to be made to plotly.js and JS is a language that I have very little experience with. After looking at the code though in plotly.js/src/components/legend, it does actually look like this is something I could tackle.

Based on my reading of the contributions documentation, it seems there would need to be proposal for this. Does that proposal go into a new issue or how does that process work? Apologies if that's a stupid question, I'm new to actually contributing to open source, but eager to learn how to give back!

[Coding-with-Adam]

hi @Brian-Keith Thank you for your interest in tackling this. One way to go about this is to open a new pull request, updating the parts of the code that would lead to this new feature.

Any doubts or questions that you have can be shared in that pull request. Our team will do its best to support you with the PR along the way.

Is that helpful?

[alexcjohnson]

it seems there would need to be proposal for this

The discussion in this issue suffices as a "proposal" - we just want to ensure the general concept is something we'll approve (yep!) before you go and spend a lot of time developing the feature. We appreciate your enthusiasm!

[Brian-Keith]

Thanks @alexcjohnson and @Coding-with-Adam. I'll fork out the repo and work on the code and open a PR once it's ready!

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for a while, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson