Mathjax & LaTeX in dash

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/consulting-and-oem/

2 Likes

This makes me sad. Any timeline for inclusion of Latex for Dash?

2 Likes

In the absence of mathjax of LaTeX, is there any way to render mathematical formulae in the text of a dash app?

2 Likes

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=TeX-MML-AM_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=TeX-MML-AM_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)

related github issue

1 Like

Legend! Thanks for that @jessexknight. I only need static content so that’s perfect.

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.

  1. 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.
  2. 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:

  1. 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.
  2. Now that you can use inline math, for left / centre / right -aligning equations, you can just use a html.P element with style={'text-align':' ... '} 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=TeX-MML-AM_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={'text-align':'left'}, children='\(\\leftarrow \pi\)'),
  html.P(style={'text-align':'left'}, children='not much left.'),
  html.P(style={'text-align':'right'},children='\(\pi \\rightarrow\)'),
  html.P(style={'text-align':'right'},children='but it feels so right.'),
])

if __name__ == '__main__':
  app.run_server(debug=True)

and the result:

dash-math-align

2 Likes

@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.
:wink:

There is also dash-katex, 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/dash-core-components/pull/194.

It looks like dash-katex 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 dash-daq. 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:

  1. adding mathjax external js
    app = dash.Dash(__name__, external_scripts=[
      'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML',
    ])
  1. configuring mathjax to re-run* 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 re-process as needed

3 Likes