i need to ask how can i render latex using mathjax on callbacks.
Dash doesnâ€™t support mathjax
or LaTeX
yet. However, this would be a great addition to the library.
If you or your company need the feature and can sponsor the work, please reach out: https://plot.ly/products/consultingandoem/
This makes me sad. Any timeline for inclusion of Latex for Dash?
In the absence of mathjax of LaTeX, is there any way to render mathematical formulae in the text of a dash app?
Any reason whyâ€¦
mathjax = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js'
app.scripts.append_script({ 'external_url' : mathjax })
â€¦doesnâ€™t work? (just tried  EDIT: it did not)
EDIT 2: the above didnâ€™t work because no MathJax configuration was specified (... ?config=TeXMMLAM_CHTML
)
Are you saying it does work @jessexknight? Iâ€™m much more a data analyst than a web developer any chance of an example of how you might use it in practice?
Update: it is possible to use MathJax on static content, but not on dynamically generated content (as noted by the OP).
Here is a MWE demonstrating both:
import dash
import dash_html_components as html
app = dash.Dash(__name__)
mathjax = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeXMMLAM_CHTML'
app.scripts.append_script({ 'external_url' : mathjax })
app.layout = html.Div(id='main',children=[
html.Div(id='static',children='$$ x=1 $$'),
html.Div(id='dynamic',children=''),
html.Button('Add Math',id='button'),
])
@app.callback(
dash.dependencies.Output('dynamic','children'),
[dash.dependencies.Input('button','n_clicks')]
)
def addmath(n_clicks):
if n_clicks:
return '$$ x=1 $$'
else:
return None
if __name__ == '__main__':
app.run_server(debug=True)
I am using the approach that you suggested above @jessexknight and it is working like a charm in general. However, there are two things that I would like to change.
 Enabling inline mathjax expressions (using $ â€¦ $ instead of $$ â€¦ $$) which is disabled by default. There is a method for doing this in normal HTML code as explained in this post but I canâ€™t work out how to embed that code into a Dash app.
 Mathjax exressions are always centered by default and I would like to align them to the left. Again there is a solution but how to implement it in a Dash app I donâ€™t know.
Any ideas?
Another strange bit of behaviour is that when I deploy the app locally (http://127.0.0.1:8050/) mathjax expressions, as described above, render fine, but when I deploy the app to Heroku the mathjax expressions only sometimes render.
If I reload the page on the machine where I am developing the app, using ctrl+F5 the mathjax expressions somethimes render correctly, but if I use F5 they do not render.
If I look at the Heroku app on another machine, that I have not used to develop the app, the mathjax expressions never render whether reloading using F5 or ctrl+F5.
This link may not stay relevant forever but you can see the page here
@TheDza
RE. first post:
 MathJax supports inline math, but you need to use
\( math \)
instead of the usual TeX$ math $
, apparently because$
is too common in page content. I tried loading a local mathjax config file to change the delimiters without success, but at least inline math is possible.  Now that you can use inline math, for left / centre / right aligning equations, you can just use a
html.P
element withstyle={'textalign':' ... '}
for each equation you need.
Here is another MWE:
import dash
import dash_html_components as html
app = dash.Dash(__name__)
mathjax = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeXMMLAM_CHTML'
app.scripts.append_script({ 'external_url' : mathjax })
app.layout = html.Div(id='main',children=[
html.P(children='Delicious \(\pi\) is inline with my goals.'),
html.P(children='$$ \lim_{t \\rightarrow \infty} \pi = 0$$'),
html.P(style={'textalign':'left'}, children='\(\\leftarrow \pi\)'),
html.P(style={'textalign':'left'}, children='not much left.'),
html.P(style={'textalign':'right'},children='\(\pi \\rightarrow\)'),
html.P(style={'textalign':'right'},children='but it feels so right.'),
])
if __name__ == '__main__':
app.run_server(debug=True)
and the result:
@TheDza
RE. Heroku deployment (from your link â€“ thanks), I can confirm that:
 First page load always renders MathJax correctly

ctrl+F5
refresh page always renders MathJax correctly also 
F5
refresh page alone inconsistently renders MathJax correctly
Perhaps it is an issue with async page / script loading?
@jessexknight your formatting stuff worked great, thanks for your help on that. I still havenâ€™t been able to get mathjax to render on Heroku (as described above) unfortunately so if anyone has any ideas on that it woudl be great to hear them.
Hello everyone,
I am trying to use dash to make a report with graphs and equations.
When I includes plotly graphs, mathjax is not rendering anymore even if the graphs are not in the div element of the equations I try to display. It means that the solution you provide only work when there is no graphs in the whole document.
PS: Even though I put in the config staticplot: True. Mathjax is still not rendering
Anyone has a solution for this ?
Thank you in advance.
Has anyone found a solution for rendering mathjax on an Heroku app?
This seems to be a long lasting issue, but I canâ€™t find a solution anywhere. The only one I found doesnâ€™t seem to work for me: here
Any thought?
Many thanks
The best solution I found so far is not using MathJax.
Here is a website to automatically create image from Latex equation:
http://latex2png.com/
All you need to do is hosting this image somewhere else and add to your HTML.
There is also dashkatex
, an alternative LaTeX renderer in Dash. This doesnâ€™t work add LaTeX support to dcc.Graph
but it does provide a component for rendering LaTeX expressions.
Hello all. Iâ€™m new to Dash and am trying to see what options there are for rendering LaTeX code. Iâ€™m trying to build an app that shows regression output tables written in LaTeX within an app.
@jessexknight
The MWE that you posted last year doesnâ€™t work for me (Iâ€™m using Chrome). Has something changed?
@chriddyp
Thanks for your responses online, particularly here https://github.com/plotly/dashcorecomponents/pull/194.
It looks like dashkatex hasnâ€™t been updated since it was originally committed. Are there any other options? What about writing to a latex file, compiling to pdf, then trying to display the pdf? Is PyLaTeX useful here?
If none of these are options, then perhaps Iâ€™ll need to look at writing regression output to html. Has anyone seen this done in a dash app?
Thanks!
Hmm, the MWE still worked for me on Chrome until I ran sudo pip install dashdaq
. I donâ€™t have the time to look into this now, but hopefully that helpsâ€¦
I think a solution has been found here. It involves:
 adding mathjax external js
app = dash.Dash(__name__, external_scripts=[
'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeXMMLAM_CHTML',
])
 configuring mathjax to rerun* every x (e.g. 1000) milliseconds via js script in
assets/
setInterval("MathJax.Hub.Queue(['Typeset',MathJax.Hub])",1000);
* latest MathJax is smart enough to only reprocess as needed