Math in Plotly Figure Labels are not rendering using Quarto provided Mathjax

[EaLeaR]

I'm writing a report using Jupyter notebook in VSCode and I'm enable to use math expressions in figure labels while writing math in markdown too!
The output I'm trying to generate is an HTML file.

Here is my observations:

• I need to add a MathJax library to be able to show math properly in plotly figure labels.
• This works well (labels show correctly and figure maintain interactivity) as long as I don't add math in markdown.
• Once I add math in markdown the labels disappear and figure loses interactivity.

Here is a MRE reproducing the issue:

---
format:
  html:
    execute: true
jupyter: python3
---

```{python}
import plotly.express as px
from IPython.display import display, HTML

display(HTML(
    '<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>'
))

fig = px.line(x=[0, 1, 2, 3, 4],
              y=[1, 2, 4, 8, 16],
              )
fig.update_layout(yaxis_title = '$2^x$',
                  xaxis_title = '$x$',
                  )
fig.show()
```

Math in Markdown:

$$x$$

[cderv]

Can you share you version of plotly ? Sharing quarto check output would be also helpful

I noticed some issues recently with new plotly v6 and Quarto. and I would like to see if this is related.

Thanks.

[EaLeaR]

I have plotly 5.24.1. Here is the output of quarto check:

[mcanouil]

Are you sure in plain Python, this works?

edit: it works in plain Python, see https://plotly.com/python/LaTeX/.

Note that by default Quarto loads MathJax, see LaTeX Equations in HTML

Also your YAML is not valid, see the execution options

format:
  html:
    execute: true

[cderv]

Definitely some conflict in JS library loaded. Here is what I get with plotly 5.24.1

I need to add a MathJax library to be able to show math properly in plotly figure labels.

This is required per documentation when Mathajx is not available in the context where graph is shown. See below

This rendering is handled by the MathJax library, which must be loaded in the environment where figures are being rendered. MathJax is included by default in Jupyter-like environments. When embedding Plotly figures in other contexts it may be required to ensure that MathJax is separately loaded, for example via a <script> tag pointing to a content-delivery network (CDN). Versions 2 and 3 are supported.

However, in Quarto mathjax can be made available but it will only be when Math syntax is found in the document. I need to check if this part of the template can be opt-in differently. We may need to detect plotly and math and add it otherwise.

So currently, when you don't add math syntax in the document, mathjax won't be made available.

When you add math, it will be available but... there is a conflict in how Mathjax is loaded, and how it applies on the math contains in the plotly graph.

This is either a configuration thing, or a version conflict of MathJax.

Thanks for the report.

[cderv]

Same conflict with Plotly R by the way. Interactivity is not lost, but math in title axis are not shown with browser console error

---
title: plotly R with math
format: html
---

```{r}
library(plotly) 

fig <- plot_ly() %>% 
  add_lines(x = c("a","b","c"), y = c(1,3,2))%>% 
  layout(title="sample figure", xaxis = list(title = r'($\sqrt{(n_\text{c}(t|{T_\text{early}}))}$)'), yaxis = list(title = r'($d, r \text{ (solar radius)}$)'), plot_bgcolor = "#c7daec") 

fig
```


Some math

$$x$$ 

[cderv]

Possibly related

• Plotly cannot be loaded if Mathjax v3 is already loaded plotly/plotly.js#4563

It seems Mathjax specific to handling SVG needs to be loaded.

As you did in shared example

display(HTML(
    '<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>'
))

We need to find a way to do both in a clever, or teach users how so setup using math in plotly when inside Quarto 🤔