Black Lives Matter. Please consider donating to Black Girls Code today.

Horizontal Legend Overlaps Graph

Currently, my legend is overlapping with my graph like this:

I’m using Dash to display this graph through a callback. On startup it looks like this, but otherwise it looks fine. My callback returns this:

dict(
        data=[dict(
            labels= ...,
            type='pie', textinfo='none'
        )],
        layout=dict(
            showlegend=True, legend=dict(orientation='h'),
            colorway=px.colors.qualitative.Pastel1,
            margin=dict(l=0, r=0, t=0, b=0)
        )
    )

Any help would be appreciated!

Hi, change the legend position to wherever you need:

layout=dict(
            showlegend=True,
            legend=dict(orientation='h',x=0.9, y=0.15),
            colorway=px.colors.qualitative.Pastel1,
            margin=dict(l=0, r=0, t=0, b=0),
        )

Unfortunately, I don’t think that worked. I set x = 0, y = 0, and combinations of those.

This issue only happens occasionally. When I interact with the graph e.g. toggle one of the legend items, the legend moves to its desired spot (underneath the pie chart). Does that indicate it’s a bug with Dash itself?

If so, what would be the code for workarounds? E.g. force a scroll on the legend