Update Plotly Charts in JupyterLab with ipywidgets Sliders

Why rebuild the chart by hand?

You open a Jupyter notebook to explore a dataset, but every time you want to see a different slice—say, the last 30 days instead of the last 7—you edit a variable, rerun the cell, and wait for the chart to redraw. That loop works, but it interrupts exploration.

The practical takeaway: you can bind JupyterLab’s ipywidgets controls directly to a Plotly figure so the chart updates in place when you move a slider or change a dropdown. The callback runs in the same Python kernel, so your data stays in memory and you never leave the notebook.

What ipywidgets adds to a Plotly notebook

ipywidgets provides browser controls—sliders, dropdowns, checkboxes—that talk to the Python kernel behind your notebook. Plotly Express is the high-level interface for building Plotly figures. An Output widget is a container that captures generated plots and displays them in a fixed area of the page.

Because the widget callback executes in the kernel, the filtered DataFrame and the new figure are created in the same Python session where your data already lives. You do not export data to a separate dashboard or write JavaScript.

Worked example: filter a scatter plot with a slider

Install the packages in your terminal, outside JupyterLab:

python -m pip install jupyterlab ipywidgets plotly pandas

Where to run: a terminal with the same Python environment that launches JupyterLab. Permissions: normal user account; use a virtual environment to avoid changing system packages. Risk: installing into the wrong environment means JupyterLab cannot import the packages.

In a notebook cell, confirm the widget extension is active:

%load_ext ipywidgets

Expected check: the cell runs without error. If it fails, the extension may not be installed or enabled (see the diagnostic section below).

Now create a slider that filters a DataFrame and redraws a Plotly scatter plot:

import pandas as pd
import plotly.express as px
import ipywidgets as widgets
from IPython.display import display

df = pd.DataFrame({
    "x": range(1, 101),
    "y": [i * 2 + (i % 7) for i in range(1, 101)]
})

threshold_slider = widgets.IntSlider(
    min=1, max=100, value=50, description="Max x:"
)
output = widgets.Output()

def redraw(change):
    with output:
        output.clear_output(wait=True)
        filtered = df[df["x"] <= threshold_slider.value]
        fig = px.scatter(
            filtered,
            x="x",
            y="y",
            title=f"Points where x <= {threshold_slider.value}"
        )
        fig.show()

threshold_slider.observe(redraw, names="value")
display(threshold_slider, output)
redraw(None)

Expected result: moving the slider updates the scatter plot inside the Output widget without reloading the page. The kernel retains df between interactions, so the filter applies to data already in memory.

When the widget does not appear

If the slider renders but the chart never updates, or the UI element is empty, check these items:

• Run jupyter labextension list in your terminal. Look for @jupyter-widgets/jupyterlab-manager in the list.
• Run %load_ext ipywidgets in a notebook cell and watch for import errors.
• Open the browser console (usually F12) and reload the page. JavaScript errors there often mean the widget extension failed to load or a content security policy is blocking it.
• Older browsers or strict CSP settings can prevent widget JavaScript from executing.

Trade-offs and limits

Every slider movement filters the DataFrame and rebuilds the figure in the kernel. With a large DataFrame, that round-trip can feel sluggish. Output widgets also retain rendered figures in memory, so too many widgets in one notebook can increase memory use.

Practical check: open your browser’s developer tools, go to the Performance or Memory tab, and move the slider repeatedly. If frame rate drops or memory climbs, downsample your data before plotting, or reduce how often the callback runs. Widget state also resets when the kernel restarts.

Start with one control

Add a single slider or dropdown to your next notebook and measure responsiveness with your actual data. Only add more controls once the first update feels instant. If it does not, downsample first rather than assuming the notebook is broken.