Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash Latex with Download HTML -- is not formatted

I’ve taken the “HTML export in Dash” example program from Interactive Html Export and added a few lines for here: Latex

fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$'
)

Now when I use the ‘Download HTML’ button and display the exported/downloaded HTML file the Latex strings are no longer formatted. I could add more code and images if needed to demonstrate this.

More details … this is the complete program – the titles added are just for demonstration:

#  11/23/21
#  https://plotly.com/python/interactive-html-export/
#  plus https://plotly.com/python/LaTeX/

import io
from base64 import b64encode

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

buffer = io.StringIO()

df = px.data.iris()
fig = px.scatter(
    df, x="sepal_width", y="sepal_length",
    color="species")

# lines added from ttps://plotly.com/python/LaTeX/  :
fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$'
    )

fig.write_html(buffer)

html_bytes = buffer.getvalue().encode()
encoded = b64encode(html_bytes).decode()

# app = dash.Dash(__name__)
app = dash.Dash(__name__, external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" ])

app.layout = html.Div([
    dcc.Graph(id="graph", figure=fig),
    html.A(
        html.Button("Download HTML"),
        id="download",
        href="data:text/html;base64," + encoded,
        download="express_download.html"
        )
])

# fig.show()

app.run_server(debug=True)


The web server output is:

Note the displayed Latex.

When I use the Download HTML button I get this file:

www.wvwelectric.com/testing/express_download.html

Note the raw Latex directives for x and y titles. Obviously I’d like to see the formatted Latex here also. How can I do this?