Fix Plotly Express and ipywidgets Output in Jupyter: render multiple charts, not just the last

Troubleshoot Plotly Express with ipywidgets Output in Jupyter: only the last chart shows. Build figures without show/display and display them to render all.

When mixing Plotly Express with ipywidgets Output containers in Jupyter, a frequent surprise is that only the last chart shows up, while earlier plots vanish. The grid layout and widget sizing look fine, yet three figures simply don’t render. The culprit is not the grid but how figures are displayed.

Reproducing the issue

The example below creates four Plotly charts, places them into Output areas, and arranges them in a GridspecLayout. Despite that, only the final chart is visible.

import plotly.express as px
import ipywidgets as widgets
from ipywidgets import GridspecLayout, Layout, Output
panel_dims = Layout(
    width='100%',
    height='300px',
    border='1px solid gray',
    overflow='auto'
)
cell_bar = Output(layout=panel_dims)
cell_line = Output(layout=panel_dims)
cell_dot = Output(layout=panel_dims)
cell_bins = Output(layout=panel_dims)
iris_tbl = px.data.iris()
with cell_dot:
    chart = px.scatter(iris_tbl, x='sepal_width', y='sepal_length', color='species')
    chart.show()
tips_tbl = px.data.tips()
with cell_bar:
    chart = px.bar(tips_tbl, x='day', y='total_bill', color='sex', barmode='group')
    chart.show()
canada_tbl = px.data.gapminder().query("country == 'Canada'")
with cell_line:
    chart = px.line(canada_tbl, x='year', y='gdpPercap', title='GDP per Capita - Canada')
    chart.show()
with cell_bins:
    chart = px.histogram(tips_tbl, x='total_bill', nbins=30, color='sex')
    chart.show()
mesh = GridspecLayout(
    4, 1,
    layout=Layout(
        width='100%',
        height='auto',
        grid_gap='10px'
    )
)
mesh[0, 0] = cell_line
mesh[1, 0] = cell_bar
mesh[2, 0] = cell_dot
mesh[3, 0] = cell_bins
mesh

Why the first three plots disappear

The display method used for each figure is the reason. Calling show for every chart, one after another, leads to only the last one being present in the output. Using display on a single figure in the same way produces the same effect. Removing show for the last figure reveals the previous one; removing it for the previous reveals the one before, and so on. In short, the most recent call overrides what came before.

The fix that works consistently

Build each Plotly figure without calling show or display inside the Output contexts, and then display all figures together in a single call. This approach renders all four charts at once. It even works without the grid.

import plotly.express as px
import ipywidgets as widgets
from ipywidgets import GridspecLayout, Layout, Output
panel_box = Layout(
    width='100%',
    height='300px',
    border='1px solid gray',
    overflow='auto'
)
box_bar = Output(layout=panel_box)
box_line = Output(layout=panel_box)
box_scatter = Output(layout=panel_box)
box_hist = Output(layout=panel_box)
iris_data = px.data.iris()
with box_scatter:
    fig_a = px.scatter(iris_data, x='sepal_width', y='sepal_length', color='species')
bill_data = px.data.tips()
with box_bar:
    fig_b = px.bar(bill_data, x='day', y='total_bill', color='sex', barmode='group')
ca_data = px.data.gapminder().query("country == 'Canada'")
with box_line:
    fig_c = px.line(ca_data, x='year', y='gdpPercap', title='GDP per Capita - Canada')
with box_hist:
    fig_d = px.histogram(bill_data, x='total_bill', nbins=30, color='sex')
layout_grid = GridspecLayout(
    4, 1,
    layout=Layout(
        width='100%',
        height='auto',
        grid_gap='10px'
    )
)
layout_grid[0, 0] = box_line
layout_grid[1, 0] = box_bar
layout_grid[2, 0] = box_scatter
layout_grid[3, 0] = box_hist
# layout_grid
display(fig_a, fig_b, fig_c, fig_d)

Why this matters for your notebooks

When building dashboards or analysis reports in Jupyter with Plotly and ipywidgets, it is easy to assume that rendering figures sequentially in different outputs will produce multiple visible charts. In practice, the last rendering call can take over. Knowing that show or a single-figure display can hide earlier plots protects you from chasing layout or sizing issues that are not to blame.

Conclusion

If multiple Plotly figures are not showing and only the latest chart remains, avoid calling show or a single-figure display repeatedly. Create the figures, keep them in variables, and render them together with a combined display call. This simple change makes all four charts appear reliably, with or without a widget grid.