Interactive Plotly Figures Fail to Render with ipywidget Error

[ashioyajotham]

Description

When executing cells that generate interactive Plotly visualizations in a VS Code notebook connected to a Colab runtime, the figures fail to render and display a JavaScript error instead. This completely breaks interactive exploratory data analysis workflows that depend on Plotly's hover, zoom, and interactive features.

Error Message:

Error rendering output item using 'jupyter-ipywidget-renderer': i is not a function

Environment

• VS Code version: 1.96.0
• Colab extension version: 0.0.16 (latest as of Dec 2025)
• Jupyter extension version: 2024.11.0
• OS: Windows 11
• Python version: 3.10.12 (Colab default)
• Plotly version: 5.24.1

Reproduction Steps

1. Connect VS Code to a Colab runtime (CPU or GPU)
2. Create a new notebook cell with this minimal example:

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(x=[1, 2, 3], y=[4, 5, 6]))
fig.show()

3. Execute the cell
4. Observe the error instead of the interactive plot

Expected Behavior

The Plotly figure should render as an interactive visualization with hover tooltips, zoom controls, and pan functionality, just like it does in:

• Native Google Colab web interface
• Local VS Code with local Jupyter kernels
• JupyterLab

Actual Behavior

The cell output shows:

Error rendering output item using 'jupyter-ipywidget-renderer': i is not a function

The figure does not render at all.

Workarounds Attempted (None Successful)

I've tried multiple approaches to fix this, all unsuccessful:

1. Changing Plotly renderers:

import plotly.io as pio
pio.renderers.default = 'colab'  # No effect
pio.renderers.default = 'iframe'  # No effect
pio.renderers.default = 'plotly_mimetype'  # ✓ WORKS!

2. Installing ipywidgets explicitly:

!pip install ipywidgets==8.1.5

3. Using static renderers (works but defeats purpose):

pio.renderers.default = 'png'  # Works but produces static images only

4. Saving to HTML and displaying:

fig.write_html('temp.html')
from IPython.display import IFrame
IFrame('temp.html', width=800, height=600)

This displays the chart but requires manual file downloads and breaks the notebook workflow.

Impact

This creates unnecessary friction for data science and ML workflows because:

• Users expect Plotly to "just work" like it does in native Colab
• The default renderer fails with a cryptic error message
• Users must discover the non-obvious plotly_mimetype workaround
• Every notebook needs manual renderer configuration at the top
• Breaks compatibility with notebooks written for native Colab (they use default renderer)

User Experience Issue:
When migrating from native Colab to VS Code + Colab extension, users hit this error immediately and may assume Plotly doesn't work at all, rather than discovering the workaround.

Additional Context

• This works perfectly in the native Colab web interface
• This works with local VS Code + local Jupyter kernels
• Other visualizations (matplotlib, seaborn) work fine with the Colab extension
• The issue appears to be specific to widget-based interactive outputs (Plotly, ipywidgets)

Suggested Fix

Since plotly_mimetype works, the extension should either:

Option 1 (Preferred): Auto-configure the correct renderer

• Detect when connected to Colab runtime
• Automatically set plotly.io.renderers.default = 'plotly_mimetype'
• Make Plotly work "out of the box" like in native Colab

Option 2: Fix the default renderer

• Investigate why the default ipywidget renderer fails
• Ensure compatibility with Colab's widget implementation
• This would benefit other interactive libraries too (ipywidgets, altair, etc.)

Option 3 (Minimum): Documentation

• Add a troubleshooting section to the README
• Document the plotly_mimetype workaround
• Include example setup cell for notebooks

Related Issues

• A handful of google.colab libraries (e.g. drive.mount and userdate.get) are unsupported (for now!) #215 mentions google.colab library incompatibilities (userdata, drive.mount)
• Similar widget rendering issues might affect other interactive libraries (ipywidgets, altair, bokeh)

[kevineger]

Thanks for the very detailed bug report @ashioyajotham ! Sorry it's taken me a week to get back to you, I took some time off over the winter holidays.

This took me a bit longer to get to the bottom of than I thought! I'll include my findings, as I found them, below. But feel free to jump to the bottom section to get straight to the problem.

---

I'm averse to doing one-off fixes for specific libraries in the Colab extension. To your point, similar widget rendering issues might affect other interactive libraries (ipywidgets, altair, bokeh). Instead, let's try and get to the bottom of where the problem is.

When rendering a plotly figure when connected to a remote Colab server, I'm observing blank cell output. In VS Code, if I copy the cell output (screenshot below), it looks like there's an HTML block that's trying to load Plotly from the CDN.

The output is:

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG"></script><script type="text/javascript">if (window.MathJax && window.MathJax.Hub && window.MathJax.Hub.Config) {window.MathJax.Hub.Config({SVG: {font: "STIX-Web"}});}</script>                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script charset="utf-8" src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>                <div id="64168718-912b-45d0-acb1-9860406ee2a2" class="plotly-graph-div" style="height:525px; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("64168718-912b-45d0-acb1-9860406ee2a2")) {                    Plotly.newPlot(                        "64168718-912b-45d0-acb1-9860406ee2a2",                        [{"hovertemplate":"x=%{x}\u003cbr\u003ey=%{y}\u003cbr\u003etext=%{text}\u003cextra\u003e\u003c\u002fextra\u003e","legendgroup":"","marker":{"color":"#636efa","symbol":"circle"},"mode":"markers+text","name":"","orientation":"v","showlegend":false,"text":["hello","world","!","!","!"],"x":[1,2,3,4,5],"xaxis":"x","y":[1,2,4,8,16],"yaxis":"y","type":"scatter","textposition":"top center"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"xaxis":{"anchor":"y","domain":[0.0,1.0],"title":{"text":"x"}},"yaxis":{"anchor":"x","domain":[0.0,1.0],"title":{"text":"y"}},"legend":{"tracegroupgap":0},"title":{"text":"Hello World Plotly Express"}},                        {"responsive": true}                    ).then(function(){
                            
var gd = document.getElementById('64168718-912b-45d0-acb1-9860406ee2a2');
var x = new MutationObserver(function (mutations, observer) {{
        var display = window.getComputedStyle(gd).display;
        if (!display || display === 'none') {{
            console.log([gd, 'removed!']);
            Plotly.purge(gd);
            observer.disconnect();
        }}
}});

// Listen for the removal of the full notebook cells
var notebookContainer = gd.closest('#notebook-container');
if (notebookContainer) {{
    x.observe(notebookContainer, {childList: true});
}}

// Listen for the clearing of the current output cell
var outputEl = gd.closest('.output');
if (outputEl) {{
    x.observe(outputEl, {childList: true});
}}

                        })                };                            </script>        </div>
</body>
</html>

Since it's blank, it's likely because the JS is blowing up (network blocked, CSP or VS Code note allowing the renderer). That would cause the <div> to stay blank and not show a Python error.

If I set pio.renderers.default = "vscode", everything works as expected:

This causes the cell output to look like this:

<script type="text/javascript">
        window.PlotlyConfig = {MathJaxConfig: 'local'};
        if (window.MathJax && window.MathJax.Hub && window.MathJax.Hub.Config) {window.MathJax.Hub.Config({SVG: {font: "STIX-Web"}});}
        if (typeof require !== 'undefined') {
        require.undef("plotly");
        requirejs.config({
            paths: {
                'plotly': ['https://cdn.plot.ly/plotly-2.35.2.min']
            }
        });
        require(['plotly'], function(Plotly) {
            window._Plotly = Plotly;
        });
        }
        </script>

"notebook_connected" also works.

Setting the default rendered seems to be what Plotly recommends in their documentation: https://plotly.com/python/renderers#setting-the-default-renderer.

---

The default renderer which outputs text/html fails because VS Code's notebook webview is sandboxed. It allows inline scripts but will block external script sources to prevent things like exfiltration or malicious injection. Because the script fails to load, the Plotly global is never defined. Setting the renderer to "vscode" works because of the built-in renderer.

With that said, I'm experiencing the same thing as you... If I have a local Python environment (e.g. .venv w/ uv), I don't need to set the renderer. It's automatically inferred and renders as expected.

Why? Well... looks like there's been some special-sauce handling in Plotly (source pointer) for Colab.

if not default_renderer:
    try:
        import google.colab  # noqa: F401

        default_renderer = "colab"
    except ImportError:
        pass

Left undefined, the default_renderer will be set to "colab" if the google.colab module exists. This is problematic for a few reasons:

1. As mentioned above, the colab renderer isn't going to work in VS Code because of how VS Code sandboxes (which is correct to do).
2. A user could import google.colab in non-Colab runtimes. This would have the side-effect of electing a likely undesirable renderer.

I'd like to chat with a few Colab teammates first before proposing a path forward. Possibly reach out to the Plotly maintainers too. Give me a few days once folks are back from vacation and I'll circle back. Thanks for your patience! Hopefully setting the default_renderer manually for the time being is a reasonable workaround. I've added this to our wiki of known issues with the workaround.

[ashioyajotham]

Hey Kev @kevineger, No problem; holidays can be crazy! Yeah, I totally hear you about avoiding one-off fixes. Looking back, I was thinking too narrowly—"make "Plotly work" instead of "fix why auto-detection fails."
The proper fix is upstream in Plotly, like you mentioned. Since their auto-detection assumes google.colab
'Module' means Colab UI, but it could be VS Code, PyCharm, etc. Fixing that helps
everyone, not just this extension.
For now, VS Code for the default renderer should be good!

Anyway, I am really looking forward to what you and the team figure out :D