Current Versions
Python: 3.12.11
Google Colab: 1.0.0
Plotly: 5.24.1

In [1]:
# Import libraries
import plotly.express as px # to create interactive figure
import plotly  # to show the default renderer
In [2]:
# See all renderer parameters
plotly.io.renderers
Out[2]:
Renderers configuration
-----------------------
    Default renderer: 'colab'
    Available renderers:
        ['plotly_mimetype', 'jupyterlab', 'nteract', 'vscode',
         'notebook', 'notebook_connected', 'kaggle', 'azure', 'colab',
         'cocalc', 'databricks', 'json', 'png', 'jpeg', 'jpg', 'svg',
         'pdf', 'browser', 'firefox', 'chrome', 'chromium', 'iframe',
         'iframe_connected', 'sphinx_gallery', 'sphinx_gallery_png']
In [3]:
# See the default renderer in current environment (colab)
plotly.io.renderers.default  # in colab, default renderer is colab
Out[3]:
'colab'
In [4]:
# Creating a sample interactive figure
fig = px.bar(x=["a", "b", "c"], y=[1, 3, 2], height=300, width=500)
fig.show()  # in colab, default renderer is 'colab'

# this default renderer render figures well within colab interface,
# BUT after exporting to html, it doesn't work in the html file,
# because we're using jupyter nbconvert, it would call jupyter first,
# then render it and convert to html
In [5]:
fig.show(renderer="notebook")

# this renderer is jupyter notebook renderer, which shows figures well
# in jupyter, but can't render in colab

# this renderer used to work on showing plots in exported html files,
# but not working now, don't know why

Output hidden; open in https://colab.research.google.com to view.
In [6]:
fig.show(renderer="notebook_connected")

# this is also jupyter notebook renderer, and can't show figures in colab
# BUT, this renderer works after exporting ipynb to html files

Before running the final cell to export an HTML file, remeber to restart and run all cells (except the final cell), then press Ctrl+S to save the file.

In [7]:
# Remember to restart and runall, and then save your colab
# ipynb file (press Ctrl+S), before inserting and running this shell.
# After saving, insert this shell, then run it without saving.

# Use the codes below to export html, change the path and file name to yours
# Go to the same folder in Google Drive to find the exported html file

%%shell
jupyter nbconvert --to html /content/drive/MyDrive/233.ipynb

[NbConvertApp] Converting notebook /content/drive/MyDrive/233.ipynb to html
[NbConvertApp] Writing 297990 bytes to /content/drive/MyDrive/233.html
Out[7]: