Plotly: How to handle overlapping colorbar and legends?

Question

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?

Answer 1

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:

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:

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!