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:
Built-in MathJax support to both dcc.Markdown and dcc.Graph
-
A new boolean prop
mathjaxwas 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(t|T_))}$'))
These examples use MathJax v3, although
dcc.Graphand 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^2-4ac}}{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":"$not-visible$", "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 rounded-pill border-primary mt-3", 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='graph-with-math',
figure=fig
),
], width=6),
dbc.Col([
html.H1("NO MathJax", className="border rounded-pill border-primary mt-3", 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='graph-without-math',
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 multi-line) 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 addingrbefore 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_scriptfrom the CDN: https://cdn.plot.ly/plotly-strict-2.11.0.min.js. All other trace types are strict in the normal bundle. -
Add
scattersmithtrace to the “strict” bundle #6135
-
Add support to use version 3 of MathJax and add
typesetMathattribute to config. Thanks to Equinor for sponsoring this. -
Add
fillpatternoptions toscattertrace. Thanks to @s417-lama 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
clickDatafor graph pie charts haspointNumbersbut 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