Mathjax & LaTeX in dash

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

2 Likes

Thanks @jessexknight!

This works for me, including inside a dcc.Markdown (if escaping delimiters appropriately, using backticks for in-line equations seems easiest). It looks like there may be some changes required for MathJax 3+ however.

Hello everyone,
I’ve noticed that graph labels seem to render almost seamlessly meanwhile when a div text is changed you can see for a split second the original text before it gets rendered to latex and it takes about the same time you set on setInterval but no matter how small you set it there’s always that twitching from text to latex. Is there a way to render it as fast as plotly label titles or at least hide the text until latex is rendered? Or maybe I’m doing something wrong. I can manage an example if needed.

Mathjax 3 rocks with Dash v2.3.0 which includes Plotly.js v2.10.0. Thanks Plotly and Equinor.

3 Likes

For everyone: Please note the release notes, which states that you need to add mathjax=True to dcc.Markdown and dcc.Graph. However, now I didn’t need any external_scripts in my Dash app.

Hi Christian @wc4
I am working on a new Dash v2.3.0 release post that explains all the updates, which I hope we can get out on Friday or early next week.

But thank you for sharing this with everyone and giving them a heads up :slight_smile:

Ah, cool, @adamschroeder! I was just annoyed about why my code suddenly didn’t work :stuck_out_tongue: