📣 Dash 2.3.0 Released

Update : version 2.4.1 has been released since this was posted.

Hey Community Members,

:rocket: We’re excited to annouce that Dash 2.3.0 has been released.

pip install dash==2.3.0

Official Changelog :arrow_forward: Dash v2.3.0

Highlights :arrow_down_small:

1. Added:

:writing_hand: Built-in 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 to False . To enable math rendering, set mathjax=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.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 = {
        "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}$"}},
            "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$"}
        "margin": {"r": 250},
        "title": {"text": "$i\\hbar\\frac{d\\Psi}{dt}=-[V-\\frac{-\\hbar^2}{2m}\\nabla^2]\\Psi$"},
            {"text":"$not-visible$", "visible": false},

app.layout = dbc.Container(children=[
            html.H1("With MathJax", className="border rounded-pill border-primary mt-3", style={'textAlign': 'center'}),
            dcc.Markdown('$E=mc^2$', mathjax=True),

                ## 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),

        ], width=6),

            html.H1("NO MathJax", className="border rounded-pill border-primary mt-3", style={'textAlign': 'center'}),

                ## 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),

        ], width=6)

], fluid=True)

if __name__ == '__main__':

  • 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 adding r 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)}$'), 

image 4

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.

:writing_hand: Upgraded Plotly.js to v2.11.1 (from v2.9.0)

  • Regenerate functions of traces in the “strict” bundle [#6141]

:writing_hand: Feature release 2.11.0

  • 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 your assets/ folder, or include it as an external_script from the CDN: https://cdn.plot.ly/plotly-strict-2.11.0.min.js. All other trace types are strict in the normal bundle.

  • Add scattersmith trace to the “strict” bundle #6135

:writing_hand: Feature release 2.10.0:

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 has pointNumbers but not customdata.

4. Previous Releases:

:mega: Dash 2.2.0 Release
:mega: Dash 2.1.0 Release
:mega: Dash 2.0 Prerelease Candidate Available!
:mega: Dash v1.21.0 - Plotly.js 2.0, Icicle Charts, Bar Chart Patterns, Clipboard Component, Bug Fixes