# Adding shapes to legend does not work

**URL:** <https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596>\
**Category:** 📊 Plotly Python\
**Tags:** bug-reporter\
**Created:** [December 1, 2023, 9:05am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596 "2023-12-01T09:05:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 9:05am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/1 "2023-12-01T09:05:41Z")

</div>

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](https://plotly.com/python/shapes/) (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.

```auto
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?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 1, 2023, 9:32am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/2 "2023-12-01T09:32:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 9:39am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/3 "2023-12-01T09:39:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 9:47am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/4 "2023-12-01T09:47:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 1, 2023, 9:56am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/5 "2023-12-01T09:56:59Z")

</div>

> [@RobinWeiler](#):
>
> the plot looks as expected but the shape does not appear in the legend

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

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 10:03am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/6 "2023-12-01T10:03:38Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/f/1f09c85b7134aea457d4840ebec17e9e724dec21.png)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 1, 2023, 10:05am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/7 "2023-12-01T10:05:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 10:18am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/8 "2023-12-01T10:18:16Z")

</div>

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):

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 1, 2023, 10:20am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/9 "2023-12-01T10:20:36Z")

</div>

This works as expected on my side 🤯

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 10:36am UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/10 "2023-12-01T10:36:37Z")

</div>

Damn, the worst kind of bugs 😅

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

---

<div class="post-metadata">

**Author:** ![RobinWeiler](https://avatars.discourse-cdn.com/v4/letter/r/9fc348/32.png) [@RobinWeiler](https://community.plotly.com/u/RobinWeiler)\
**Post date:** [December 1, 2023, 1:33pm UTC](https://community.plotly.com/t/adding-shapes-to-legend-does-not-work/80596/11 "2023-12-01T13:33:50Z")

</div>

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! 😄

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

```auto
plotly=5.18.0
dash=2.14.2
pandas=2.1.3

```