CODEWITHSUNDEEP
pythonplotplotly
Shah Rukh K
Shah Rukh K

Reputation: 599

Plotly: How to handle overlapping colorbar and legends?

I have a simple graph and I am using Plotly Express Library to draw it. The image is as follows which have two legends overlapping 'Rank' and 'Genre'.

px.scatter_ternary(data_frame = data, a='Length.', b='Beats.Per.Minute', c='Popularity',
               color = 'Rank',
               symbol = 'Genre',
               labels = {'Length.': 'Len', 'Beats.Per.Minute':'Beats'},
               color_continuous_midpoint = 15,
               symbol_sequence = ['circle-open-dot', 'cross-open','triangle-ne'])

What can be done to avoid overlapping?

Upvotes: 11

Views: 10848

Answers (3)

iKenSpatial
iKenSpatial

Reputation: 51

For some cases changing the orientation of the color bar to horizontal makes sense and is a quick fix.

fig.update_layout(coloraxis_colorbar=dict(orientation="h"))

Upvotes: 3

vestland
vestland

Reputation: 61184

Short answer:

You can move the colorbar with:

fig.update_layout(coloraxis_colorbar=dict(yanchor="top", y=1, x=0,
                                          ticks="outside"))

The details:

Since you haven't provided a fully executable code snippet with a sample of your data, I'm going to have to base a suggestion on a dataset and an example that's at least able to reproduce a similar problem. Take a look:

enter image description here

This seems to be the exact same problem that you're facing. To make the plot readable, I would simply move the colorbar using fig.update_layout(coloraxis_colorbar() like this:

enter image description here

Complete code:

# imports
import plotly.express as px

# data
df = px.data.election()

# figure setup
fig = px.scatter_ternary(df, a="Joly", b="Coderre", c="Bergeron", hover_name="district", 
    color="total", size="total", size_max=15, symbol ='Coderre',
    color_discrete_map = {"Joly": "blue", "Bergeron": "green", "Coderre":"red"},
    )

# move colorbar
fig.update_layout(coloraxis_colorbar=dict(yanchor="top", y=1, x=0,
                                          ticks="outside",
                                          ticksuffix=" bills"))
fig.show()

I hope this solves your real-world problem. Don't hesitate to let me know if not!

Upvotes: 15

bitbang
bitbang

Reputation: 2192

In my case;

fig = ...
fig.update_layout(legend_orientation="h")

solved the problem.

Upvotes: 7

Related Questions