Legendgroup with horizontal legend items?

Dash Python
1

I have 2 groups of legends. I want to be able to display the legend groups vertically below the plot, but I want to display the legend items horizontally .

Right now when I use “orientation=‘h’” I get:
group 1 group 2
-item 1 -item 4
-item 2 -item 5
-item 3 -item 6

But I want it to look like this:
group 1
-item 1 -item 2 -item 3
group 2
-item 4 -item 5 -item 6

1 Like
2

Hi @PBandCamJam welcome to the forums. Could you add some information? Are you talking about plotly charts? A dash app? :upside_down_face:

3

Thank you, it’s great to be posting! It’s a go.Scatter chart within a Dash app, I tried to update my layout by doing fig.update_layout(legend=dict(orientation=‘h’), but that only gave me the first result that I posted about

4

Basically what I would want to use is something like fig.update_layout(legend=dict(orientation=‘v’, item_orientation=‘h’)), I know there is no such thing as item_oritentation but maybe that logic is helpful as far as what I’m asking

5

Hi @PBandCamJam,
just to make sure we are talking about the same thing:

import pandas as pd
import plotly.graph_objects as go
import random

random.seed(42)

categories = 7
samples = 100

# create DataFrame
df = pd.DataFrame(
    {
        'x': [*range(samples)], 
        'y': [f'string_{i}' for i in range(samples)], 
        'color': [random.choice([f'cat_{i}' for i in range(categories)]) for _ in range(samples)]
    }
)

# groupby colors
gb = df.groupby('color')

# create figure, add traces 
fig = go.Figure(layout={'height': 500, 'width': 700})
for cat, frame in gb:
    group = random.choice(['A', 'B'])
    fig.add_scatter(
        x=frame.x, 
        y=frame.y, 
        legendgroup=group, 
        legendgrouptitle_text=group
    )

fig.show()

creates:

newplot (6)
newplot (6)700×500 32.8 KB

You would like to have the traces to be stacked horizontal instead of vertical as in the above image?

6

Yes exactly!

7

Hi @PBandCamJam, I tried playing around with CSS but without success. My CSS skills are quite limited, though :wink:

1 Like
8

Thank you for taking a look at it, I appreciate it!

1 Like