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.
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
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 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)
@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.
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 ?
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 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?
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?
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…
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.
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
