[Bug]: plotly plots jump (becomes smaller then larger) when re-rendered

[injo11]

Component

UI (ui.*)

Severity

P3 - Low (minor inconvenience)

Shiny Version

1.3.0

Python Version

3.12.3

Minimal Reproducible Example

from shiny.express import render, ui, input
from shinywidgets import render_plotly
import plotly.graph_objects as go
import matplotlib.pyplot as plt
import numpy as np

ui.input_numeric("amplitude", "amplitude", value=1)

with ui.card():
    @render_plotly
    def plot_plotly():
        x = np.linspace(0, 10, 100)
        y = input.amplitude()*np.sin(x)
        fig = go.Figure()
        fig.add_scatter(x=x, y=y, mode='lines')
        
        return fig
    
    @render.plot
    def plot_matplotlib():
        x = np.linspace(0, 10, 100)
        y = input.amplitude()*np.sin(x)
        fig = plt.figure()
        plt.plot(x,y)
        return fig

Behavior

When the amplitude input is changed, the matplotlib graph stays the same size, but the plotly graph becomes smaller, and then larger, so "jumping".

Error Messages (if any)

Environment

OS: Ubuntu 24.04
Browser: Chrome version 131.0.6778.264 
Dependencies: numpy

[cpsievert]

I'm pretty sure this problem goes away if you have plotly>=6.0.0 installed

[cddesja]

I can confirm this issue here with plotly installed 6.0.1. It seems to only get smaller after changing the amplitude the first time and then stays smaller.

Screen.Recording.2025-03-29.at.12.27.53.PM.mov

[cddesja]

@injo11

It looks like a work around could be to add the following to your plotly figure height (e.g. 400) just under fig.add_scatter(x=x, y=y, mode='lines')

        fig.update_layout(
            height=400
        )

You could combine this with two different ui_cards where you set min_height and max_height as well as setting the margin. This will stop the card from shrinking and growing. For example,

with ui.card(min_height=450):
    @render_plotly
    def plot_plotly():
        x = np.linspace(0, 10, 100)
        y = input.amplitude()*np.sin(x)
        fig = go.Figure()
        fig.add_scatter(x=x, y=y, mode='lines')
        fig.update_layout(
            height=400,
            margin=dict(
                l=10,
                r=10,
                b=0,
                t=0,
                pad=0
            )
        )
        return fig

with ui.card(min_height=450):
    @render.plot
    def plot_matplotlib():
        x = np.linspace(0, 10, 100)
        y = input.amplitude()*np.sin(x)
        fig = plt.figure()
        plt.plot(x,y)
        return fig