# 📣 Dash 2.3.0 Released

**URL:** <https://community.plotly.com/t/dash-2-3-0-released/62041>\
**Category:** Dash Python\
**Tags:** announcements\
**Created:** [April 8, 2022, 3:58pm UTC](https://community.plotly.com/t/dash-2-3-0-released/62041 "2022-04-08T15:58:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [April 8, 2022, 3:58pm UTC](https://community.plotly.com/t/dash-2-3-0-released/62041/1 "2022-04-08T15:58:39Z")

</div>

> **Update** : [version 2.4.1 has been released](https://community.plotly.com/t/dash-2-4-1-released-improved-callback-context-clientside-callback-promises-typescript-components/64203) 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](https://github.com/plotly/dash/releases/tag/v2.3.0)**

# Highlights 🔽

## 1. Added:

✍ **[Built-in MathJax support to both `dcc.Markdown` and `dcc.Graph`](https://github.com/plotly/dash/pull/1949)**

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

> **Show Code! (Click to expand)**
>
> ```auto
> 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)
> 
> ```

 ![mathjax-image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/3/43c6f18f5c811e7c1b8279ad28052651bd09338f.png)

- **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](https://plotly.com/python/LaTeX/). Here’s an example:

 ![image 4](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/9/d91b0113dfcc37145a7472c05cc5fe64b721e569.png)

- We recommend [reading this intro to LaTex math](https://en.wikibooks.org/wiki/LaTeX/Mathematics) if you are not familiar with the topic.

- Big thanks to [Equinor](https://www.equinor.com/) 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](https://plotly.com/consulting-and-oem/).

## 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](https://community.plotly.com/t/announcing-plotly-py-5-7-0-text-on-histograms-and-heatmaps-patterns-on-areas-plotly-js-version-number-access-smith-charts/62735), 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)](https://github.com/plotly/plotly.js/releases/tag/v2.11.1)**

- Regenerate functions of traces in the “strict” bundle [[#6141](https://github.com/plotly/plotly.js/pull/6141)]

✍ **[Feature release 2.11.0](https://github.com/plotly/plotly.js/releases/tag/v2.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](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](https://github.com/plotly/plotly.js/pull/6135)

✍ **[Feature release 2.10.0](https://github.com/plotly/plotly.js/releases/tag/v2.10.0):**

- Add support to use [version 3 of MathJax and add `typesetMath` attribute to config](https://github.com/plotly/plotly.js/pull/6073). Thanks to [Equinor](https://www.equinor.com/) for sponsoring this.

- Add [`fillpattern` options to `scatter` trace](https://github.com/plotly/plotly.js/pull/6101). Thanks to [@s417-lama](https://github.com/s417-lama) for the contribution!

## 3. Notable Fixes:

- [#1915](https://github.com/plotly/dash/pull/1915) Fix bug [#1474](https://github.com/plotly/dash/issues/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](https://github.com/plotly/dash/pull/1953) Fix bug [#1783](https://github.com/plotly/dash/issues/1783) in which a failed hot reloader blocks the UI with alerts.

- [#1942](https://github.com/plotly/dash/pull/1942) Fix bug [#1663](https://github.com/plotly/dash/issues/1663), in which `clickData` for graph pie charts has `pointNumbers` but not `customdata`.

## 4. Previous Releases:

[📣 Dash 2.2.0 Release](https://community.plotly.com/t/dash-2-2-0-released/61336)  
[📣 Dash 2.1.0 Release](https://community.plotly.com/t/dash-2-1-0-released/60548)  
[📣 Dash 2.0 Prerelease Candidate Available!](https://community.plotly.com/t/dash-2-0-prerelease-candidate-available/55861)  
[📣 Dash v1.21.0 - Plotly.js 2.0, Icicle Charts, Bar Chart Patterns, Clipboard Component, Bug Fixes](https://community.plotly.com/t/dash-v1-21-0-plotly-js-2-0-icicle-charts-bar-chart-patterns-clipboard-component-bug-fixes/54892)