How to write math symbols in plotly dash app?

Question

I want to plot math symbols in a plotly dash app.

For example, I've Tried this:

import dash
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.P(r'$ Area (m^{2}) $'),
        dcc.Markdown(r'$ Area (m^{2}) $')
    ]
)
app.run_server()

and this was the result:

How can I get these result?

Kaylil

Did you read this? – Sumac

About your image i.sstatic.net/sQzVR.png : Never write whole words like Area in math mode - this completely messes up the kerning – Phelloderm

@Sumac your link is broken – Kaylil

Answer 1

MathJax 3 works in Dash v2.3.0 which includes Plotly.js v2.10.0 with Markdown. Example: dcc.Markdown('$$y=x+1$$', mathjax=True)

Walker

Answer 2

You can try Mathjax. The following works at my end (Python 3.9.1, dash==1.19.0, dash-html-components==1.1.2)

First create a javascript file (anyname.js) in the assets folder of your current project. In that file have just the following line:

setInterval("MathJax.Hub.Queue(['Typeset',MathJax.Hub])",1000);

Then back to your python file:

from dash import Dash
import dash_html_components as html

MATHJAX_CDN = '''
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/
MathJax.js?config=TeX-MML-AM_CHTML'''

external_scripts = [
                    {'type': 'text/javascript',
                     'id': 'MathJax-script',
                     'src': MATHJAX_CDN,
                     },
                    ]


app = Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    children=[
        html.P('''\(Area\)(\(m^2\)) '''),
    ]
)
app.run_server()

Some caveats:

• I have never been able to get Mathjax to work in the Markdown component.
• This solution doesn't work with the latest Mathjax version (nor with 2.7.7). I am unsure which is the latest version it will work with.

If you are able to address any of the two caveats do let me know.

Gain

Answer 3

With plotly you have to use unicode. For example if you want to print a greek letter mu is "\u03bc". You can obtain some symbols from here and superscripts from here. m square will be "m\U+2072".

Vibrator

This actually worked, upvote! Not only for plotly but in straight html.Div also. Example: html.H1("beta is \u03b2") The unicodes from the links didn't work for me though, but google "Unicode Character 'GREEK SMALL LETTER BETA" or letter of choice and remove the plus-sign and use only lower-case letters and you're there! Thanks. – Vitiated

Answer 4

Install

pip install dash -U

Code

import dash
from dash import dcc, html

app = dash.Dash()
app.layout = html.Div([
    dcc.Markdown('$Area (m^{2})$', mathjax=True),
])
app.run_server()

Mossback

Answer 5

You can add "mathjax=True" to dcc.Markdown(r'$ Area (m^{2}) $')

You can find it here: https://www.youtube.com/watch?v=V6rZt7Xqb0U

Jacksnipe