Update : version 2.4.1 has been released since this was posted.
Hey Community Members,
Weâ€™re excited to annouce that Dash 2.3.0 has been released.
pip install dash==2.3.0
Official Changelog Dash v2.3.0
Highlights
1. Added:
Builtin MathJax support to both dcc.Markdown
and dcc.Graph

A new boolean prop
mathjax
was added to the dcc.Markdown and dcc.Graph components, defaulting toFalse
. To enable math rendering, setmathjax=True
. For example,
dcc.Markdown('$E=mc^2$', mathjax=True)

dcc.Markdown('# An h1 tag with MathJax: $x=\\int_0^a a^2+1$', mathjax=True)

dcc.Graph(mathjax=True, figure=px.line(x=[1, 2, 3, 4], y=[1, 4, 9, 16]).update_layout(xaxis_title=r'$\sqrt{(n^2(tT_))}$'))
These examples use MathJax v3, although
dcc.Graph
and Plotly.js can also be used with MathJax v2.Letâ€™s see a complete app, comparing content with and without MathJax:

Show Code! (Click to expand)
from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
false = False
true = True
fig = {
"data":[{
"x": [0, 1],
"y": [0, 1.414],
"name": "$E^2=m^2c^4+p^2c^2$"
}, {
"x": [0, 1],
"y": [1.4, 0.1],
"type": "bar",
"name": "$x=\\frac{b \\pm \\sqrt{b^24ac}}{2a}$"
}, {
"type": "pie",
"values": [1, 9],
"labels": ["$\\frac{1}{10}=10\\%$", "$\\frac{9}{10}=90\\%$"],
"domain": {"x": [0.3, 0.75], "y": [0.55, 1]}
}, {
"type": "heatmap",
"z": [[1,2],[3,4]],
"xaxis": "x2",
"yaxis": "y2",
"colorbar": {"y": 0.225, "len": 0.45}
}],
"layout": {
"yaxis":{"domain": [0, 0.45], "title": {"text": "$y=\\sin{2 \\theta}$"}},
"xaxis":{
"domain": [0, 0.45],
"title": {"text": "$x=\\int_0^a a^2+1$"},
"tickvals": [0, 1],
"ticktext": ["$\\frac{0}{100}$", "$\\frac{100}{100}$"]
},
"xaxis2": {"domain": [0.85, 1], "anchor": "y2"},
"yaxis2": {
"domain": [0, 0.45],
"anchor": "x2",
"title": {"text": "$(01\\rangle+10\\rangle)/\\sqrt2$"}
},
"height":500,
"width":800,
"margin": {"r": 250},
"title": {"text": "$i\\hbar\\frac{d\\Psi}{dt}=[V\\frac{\\hbar^2}{2m}\\nabla^2]\\Psi$"},
"annotations":[
{
"text":"$(top,left)$","showarrow":false,"xref":"paper","yref":"paper",
"xanchor":"left","yanchor":"top","x":0,"y":1,"textangle":10,
"bordercolor":"#0c0","borderpad":3,"bgcolor":"#dfd"
},
{
"text":"$(right,bottom)$","xref":"paper","yref":"paper",
"xanchor":"right","yanchor":"bottom","x":0.2,"y":0.7,"ax":20,"ay":20,
"textangle":30,"bordercolor":"#0c0","borderpad":3,"bgcolor":"#dfd",
"opacity":0.5
},
{"text":"$notvisible$", "visible": false},
{
"text":"$^{29}Si$","x":0.7,"y":0.7,"showarrow":false,
"xanchor":"right","yanchor":"top"
},
{
"text":"$^{17}O$","x":0.7,"y":0.7,"ax":15,"ay":15,
"xanchor":"left","yanchor":"bottom"
}
]
}
}
app.layout = dbc.Container(children=[
dbc.Row([
dbc.Col([
html.H1("With MathJax", className="border roundedpill borderprimary mt3", style={'textAlign': 'center'}),
dcc.Markdown('$E=mc^2$', mathjax=True),
dcc.Markdown('''
## h2 tag with MathJax block:
$$
\\frac{1}{(\\sqrt{\\phi \\sqrt{5}}\\phi) e^{\\frac25 \\pi}} =
1+\\frac{e^{2\\pi}} {1+\\frac{e^{4\\pi}} {1+\\frac{e^{6\\pi}}
{1+\\frac{e^{8\\pi}} {1+\\ldots} } } }
$$
## Next line.
''', mathjax=True),
dcc.Graph(
mathjax=True,
id='graphwithmath',
figure=fig
),
], width=6),
dbc.Col([
html.H1("NO MathJax", className="border roundedpill borderprimary mt3", style={'textAlign': 'center'}),
dcc.Markdown('$E=mc^2$'),
dcc.Markdown('''
## h2 tag with No MathJax:
$$
\\frac{1}{(\\sqrt{\\phi \\sqrt{5}}\\phi) e^{\\frac25 \\pi}} =
1+\\frac{e^{2\\pi}} {1+\\frac{e^{4\\pi}} {1+\\frac{e^{6\\pi}}
{1+\\frac{e^{8\\pi}} {1+\\ldots} } } }
$$
## Next line.
''', mathjax=False),
dcc.Graph(
id='graphwithoutmath',
figure=fig
)
], width=6)
]),
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=True)

Important notes:

In
dcc.Markdown
, inline math is any content between single dollar signs, for example"$E=mc^2$"
, and â€śdisplayâ€ť math (on its own line, potentially multiline) is delimited by double dollar signs. 
In
dcc.Graph
, most text fields (graph and axis titles, trace names, scatter and bar text) can use math, and itâ€™s enabled with single dollar sign delimiters. However, if math is found, everything outside the delimiters is ignored. Thus, to combine text with math you would need to use\text{}
and insert the text within the curly brackets. Make sure to use the raw string format by addingr
before the string. Read more at Latex in Python. Hereâ€™s an example:dcc.Graph(figure=px.scatter(df, x=df[0], y=df[1]) .update_layout(title=r'$d, r^2 \text{ (solar radius)}$'), mathjax=True)


We recommend reading this intro to LaTex math if you are not familiar with the topic.

Big thanks to Equinor for sponsoring this development, including the related work in Plotly.js! If youâ€™d like to sponsor a new Dash feature, get in touch with our advanced development team.
2. Updates:
The version of Plotly.js that is built in here is the same one that is bundled with the recently released Plotly.py 5.7.0, so we recommend that you upgrade to Plotly 5.7.0 to get the full benefit of all of these libraries working together.
Upgraded Plotly.js to v2.11.1 (from v2.9.0)
 Regenerate functions of traces in the â€śstrictâ€ť bundle [#6141]

An anonymous company sponsor has funded the development to make Plotly.js compatible in â€śCSP Safeâ€ť environments. Some of our security concious customers want to run all of their websites in a CSP Safe mode that disallows JavaScriptâ€™â€śs evalâ€ť. Plotly.js had several eval methods as part of itâ€™s WebGL trace types (scattergl, surface) and weâ€™ve recently created a new Plotly.js bundle that removes all of these evals at the expense of a slightly larger (slower) bundle size.
We do not believe that there is any security issue with the use of eval within Plotly.js as these code paths do not have any pathways towards code injection. So, weâ€™ve kept eval within our default Plotly.js distribution included in Dash but offered a separate CSP Safe bundle for our customers that have strict CSP policies. To use this bundle in your app, you must either download it and put it in yourassets/
folder, or include it as anexternal_script
from the CDN: https://cdn.plot.ly/plotlystrict2.11.0.min.js. All other trace types are strict in the normal bundle. 
Add
scattersmith
trace to the â€śstrictâ€ť bundle #6135

Add support to use version 3 of MathJax and add
typesetMath
attribute to config. Thanks to Equinor for sponsoring this. 
Add
fillpattern
options toscatter
trace. Thanks to @s417lama for the contribution!
3. Notable Fixes:

#1915 Fix bug #1474: when both dcc.Graph and go.Figure have animation â€“ and once the second animation in Figure is executed â€“ the Frames from the first animation are played instead of the second one.

#1953 Fix bug #1783 in which a failed hot reloader blocks the UI with alerts.

#1942 Fix bug #1663, in which
clickData
for graph pie charts haspointNumbers
but notcustomdata
.
4. Previous Releases:
Dash 2.2.0 Release
Dash 2.1.0 Release
Dash 2.0 Prerelease Candidate Available!
Dash v1.21.0  Plotly.js 2.0, Icicle Charts, Bar Chart Patterns, Clipboard Component, Bug Fixes