Adding shapes to legend does not work

📊 Plotly Python
1

Hey all,

I saw that, since Plotly 5.16, it is possible to add shapes to the legend, allowing to hide them by clicking on the legend item. However, I was unable to replicate this behavior when running the code example provided in Shapes in Python (and seen below). I am using Plotly 5.18 and tried to run this code both in a Jupyter Notebook and through a small Dash app. Neither of them worked: the plot looks as expected but the shape does not appear in the legend.

import plotly.express as px

df = px.data.stocks(indexed=True)

fig = px.line(df)

fig.add_shape(
    type="rect",
    x0="2018-09-24",
    y0=0,
    x1="2018-12-18",
    y1=3,
    line_width=0,
    label=dict(text="Decline", textposition="top center", font=dict(size=20)),
    fillcolor="green",
    opacity=0.25,
)

fig.add_shape(
    showlegend=True,
    type="line",
    x0=min(df.index),
    y0=1,
    x1=max(df.index),
    y1=1,
    line_width=3,
    line_dash="dot",
    label=dict(
        text="Jan 1 2018 Baseline",
        textposition="end",
        font=dict(size=20, color="blue"),
        yanchor="top",
    ),
)

fig.show()

This functionality would be very useful for me so I really hope there is a way to fix this. Is it a known problem or does this code work for other people?

2

HI @RobinWeiler thanks for reminding me of that cool feature!

I assume you are referring to Plotly 5.16 instead of 3.16 right?

The example works for me on linux.

Python: 3.10.4
Plotly: 5.18.0
jupyterlab: 3.5.0

1 Like
3

Yes, 5.16 of course, my apologies!

Okay that’s good to know but also very strange! I’m on MacOS with Python 3.9.12 and Plotly 5.18.0

I will give it a try with another virtual environment with a higher Python version and report back

1 Like
4

No, unfortunately I am facing the same issue also with Python 3.11.5. :thinking:

5

Which shape are you referring to? I’m sure you have noticed, that the green rectangular shape does not have set showlegend=True, right?

6

Yes, I am referring to the dotted line. I also tried setting showlegend=True for the green rectangle but that did not change anything either.

Screenshot 2023-12-01 at 11.00.32
Screenshot 2023-12-01 at 11.00.322816×770 241 KB

7

Crazy. Are you using jupyter 4.x? We had some issues with that in the past.

8

Yes, I am using:
jupyter-client==7.3.4
jupyter-core==4.11.1

However, I am facing the same issue when wrapping this figure in a small Dash app (Dash 2.11.1), see code below (ultimately, I am trying to use this feature in my Dash app):

from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.stocks(indexed=True)

fig = px.line(df)

fig.add_shape(
    showlegend=True,
    type="rect",
    x0="2018-09-24",
    y0=0,
    x1="2018-12-18",
    y1=3,
    line_width=0,
    label=dict(text="Decline", textposition="top center", font=dict(size=20)),
    fillcolor="green",
    opacity=0.25,
)

fig.add_shape(
    showlegend=True,
    type="line",
    x0=min(df.index),
    y0=1,
    x1=max(df.index),
    y1=1,
    line_width=3,
    line_dash="dot",
    label=dict(
        text="Jan 1 2018 Baseline",
        textposition="end",
        font=dict(size=20, color="blue"),
        yanchor="top",
    ),
)

app.layout = html.Div(
    [
        dcc.Graph(id="graph-example", figure=fig),
    ]
)

if __name__ == "__main__":
    app.run(debug=True)
9

This works as expected on my side :exploding_head:

10

Damn, the worst kind of bugs :sweat_smile:

Interestingly, for my friend on Windows it also works… I wonder if anyone else could replicate this issue on MacOS.

1 Like
11

So after testing with another Mac (where it worked), I ended up updating some other libraries and it seems that updating pandas fixed it? Not sure why this fixed this particular feature and why there were no errors hinting to this but I’m happy nonetheless! :smile:

In case anyone else runs into this problem, I am now using:

plotly=5.18.0
dash=2.14.2
pandas=2.1.3
2 Likes