I would like to combine two plots on the same graph with Plotly

Anvil Q&A
1

What I’m trying to do:
I am trying to combine two graphs in the same plot in Plotly, however since Anvil has limited support to Plotly ( at least in the scope that I have tried ) I can’t manage to execute the code below in Anvil client side.

What I’ve tried and what’s not working:
I am trying to draw two graphs on the same plot, and use commands like add_trace and so on, and they are not recognized in Anvil.
This code runs perfectly in Colab
Code Sample:

import plotly.graph_objs as go
from plotly.subplots import make_subplots # not recognized by Anvil

# Define the plots
line1 = go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13], mode='lines', name='Line 1')
line2 = go.Scatter(x=[2, 3, 4, 5], y=[5, 6, 7, 8], mode='lines', name='Line 2')

# Create a figure with a single plot area
fig = make_subplots(rows=1, cols=1) # This is not recognized by Anvil

# Add both line plots to the figure
fig.add_trace(line1) # not recognized by Anvil
fig.add_trace(line2)

# Set up the layout with dropdown menus
fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                dict(label="Both",
                     method="update",
                     args=[{"visible": [True, True]},
                           {"title": "Both Lines"}]),
                dict(label="Line 1",
                     method="update",
                     args=[{"visible": [True, False]},
                           {"title": "Line 1 Only"}]),
                dict(label="Line 2",
                     method="update",
                     args=[{"visible": [False, True]},
                           {"title": "Line 2 Only"}]),
            ]),
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=1.1,
            yanchor="top"
        ),
    ]
)

# Update the layout to adjust the title and size
fig.update_layout(title_text="Interactive Line Graphs", height=600, width=800)

# Show the figure
fig.show()

Clone link:
share a copy of your app

2

Have you tried using the server side version of plotly

if you return the fig in the server function
and on the client do


self.plot_1.figure = anvil.server.call("get_figure")

that should work as expected (except when using basic python on the server)

subplots is not supported on the client
feel free to add a feature request for it