Multiple legends does not work with subplots

[msimoni18]

@LiamConnors

According to an email I received on June 21st regarding updates to plotly 5.15.0, I should be able to include multiple legends on a figure with subplots. I copy and pasted the example into a JupyterLab Lite notebook and confirmed I was using plotly 5.15.0 by printing plotly.__version__. When I run the code, it does not match the image in the email. Instead of having two legends, only one legend is included and moved to x: 0.4.

Any ideas as to why I cannot reproduce the example provided in the email?

Code from the email:

import plotly.graph_objects as go
from plotly import data
from plotly.subplots import make_subplots

df = data.gapminder()

subplot_1_countries = ["Germany", "France", "United Kingdom"]
subplot_2_countries = ["United States", "Canada"]

fig = make_subplots(
    rows=1,
    cols=2,
    horizontal_spacing=0.2,
    shared_yaxes=True,
)

for country in subplot_1_countries:
    filtered_data = df.loc[(df.country.isin([country]))]
    fig.add_trace(
        go.Scatter(x=filtered_data.year, y=filtered_data.lifeExp, name=country),
        row=1,
        col=1,
    )

for country in subplot_2_countries:
    filtered_data = df.loc[(df.country.isin([country]))]
    fig.add_trace(
        go.Scatter(
            x=filtered_data.year,
            y=filtered_data.lifeExp,
            name=country,
            legend="legend2",
        ),
        row=1,
        col=2,
    )

fig.update_layout(
    title="Life Expectancy Subplots with Multiple Legends",
    plot_bgcolor="#E6F1F6",
    legend={
        "x": 0.4,
    },
)

fig.show()

[nicolaskruchten]

It may be that JupyterLite is built against an older version of Plotly.js than the one targeted by Plotly.py 5.15 ... what version number do you see when hovering your cursor over the Plotly logo that appears in the top-right of the rendered figure when the cursor is above the figure?

[msimoni18]

@nicolaskruchten It says it was built with plotly.js 2.20. I also tried pip installing plotly==5.15.0, and that says it was produced with plotly.js 2.12.1. How can I install plotly 5.15.0 to make sure it uses plotly.js >=2.22?

I should note that when I installed plotly locally, I was running the example in a VS code notebook. In my conda env, I'm using:

jupyterlab=3.5.0 <-- from conda
ipywidgets=8.0.4 <-- from conda
plotly=5.15.0 <-- from pypi
notebook=6.5.2 <-- from conda

[nicolaskruchten]

Unfortunately both VSCode and JupyterLite I believe bundle their own versions of Plotly.js and don't make it possible for users to upgrade... For now the most reliable environment within which you can install Plotly.py and get the matching version of Plotly.js is Jupyter Lab.

[msimoni18]

I moved the code to a .py file and ran it. That figure uses plotly.js 2.24.1. Thank you for the help!