Plotly v6 does not showing in HTML with some JS conflict

[cderv]

Simple example for basic plotly example with new plotly 6.
https://plotly.com/python/figure-structure/

---
format: html
jupyter: python3
---

```{python}
import plotly.express as px

fig = px.line(x=["a","b","c"], y=[1,3,2], title="sample figure")
fig.show()
```

Error in browser console are:

plotly-3.0.0.min.js:21 Uncaught TypeError: kP.select is not a function
    at Ehe (plotly-3.0.0.min.js:21:259206)
    at Object.Yft [as _doPlot] (plotly-3.0.0.min.js:21:255283)
    at Object.Qft [as newPlot] (plotly-3.0.0.min.js:21:260707)
    at index.html:102:444

Using plotly 5.24, it works ok. So something changed in plotly that makes rendering with Quarto fails.

[mcanouil]

From plotly, the main change that is likely the source of the issue:

Change to anywidget for go.FigureWidget
go.FigureWidget now uses anywidget.

(notebook >= 7 is now required)

Source: https://plotly.com/python/v6-migration/

[cderv]

For reference similar issue with .ipynb in Positron

• Newest plotly (6.0.0) doesn't work in Positron posit-dev/positron#6154

which points to broader plotly issue

• 6.0.0 fails to export WebGL to HTML file plotly/plotly.py#5012

[danilotpnta-elsevier]

You can use pio.renderers.default = "iframe" and it renders for me. For instance:

---
title: "About"
jupyter: python3
execute:
  enabled: true
---

```{python}
import plotly.express as px

import plotly.io as pio
pio.renderers.default = "iframe"

gapminder = px.data.gapminder()
def gapminder_plot(year):
    gapminderYear = gapminder.query("year == " + 
                                    str(year))
    fig = px.scatter(gapminderYear, 
                     x="gdpPercap", y="lifeExp",
                     size="pop", size_max=60,
                     hover_name="country")
    fig.show()
    
gapminder_plot(1957)
gapminder_plot(2007)

[Schniszl]

I had the same Issue but with pio.renderers.default = "iframe I only get the last plot rendered in the HTML export, but multiple times.
I plot like 10 times different data with the same plot and it's 10 times the same image in the export, so I fixed it manually by using pio.renderers.default = "iframe+browser" and then after running the notebook I downloaded all the HTML files manually and linked them in the HTML code of the Notebook export, for sure there's a better way to do that but I really had to send something out today and didn't want to waist more time searching for solutions.
Anyone got an Idea why I always get the same Plot multiple times in the export?
In the Notebook in VS code it looks fine when I use pio.renderers.default = "plotly_mimetype+notebook_connected" and the plots opening in the browser with the browser option are correct aswell.

I'm exporting with jupyter nbconvert --to html --no-input myNotebook.ipynb

[cderv]

This is now solved in plotly. Quarto works when using plotly.py 6.0.1

See comments in

• 6.0.0 fails to export WebGL to HTML file plotly/plotly.py#5012