MathJax not loaded in plotly offline

[rreusser]

plotly.offline.plot fails (shows an unstyled plot after bailing out early due to errors) if latex is used since MathJax is not loaded in the default html. Short of getting fancy, it seems like plotly.offline.plot might need a manual option to inject MathJax from a cdn into the head tag.

[yankev]

Thanks Ricky, I'll check this out.

[physinet]

#105 addresses this as well. When using plotly.offline.iplot, the plot looks all right, except that LaTeX is not rendered in any of the text labels.

[mmlanger]

This is actually the only reason that stops me using plotly for my publication graphics.
No LaTeX in offline plotly is a serious issue, is there any news on this?
#444 and #445 also addresses latex problems with plotly.

[szsiddiq]

FYI, sometimes after executing iplot, the LaTeX I have else where in my notebook (outside of plotly) breaks and stops rendering. I'm having trouble replicating this on sample data that I can share, but will update with code if I'm able to do so.

[jjaraalm]

EDIT: Actually, this might not be the right place for this since the original issue did not explicitly specify Jupyter notebooks, might be more closely related to #105 or #444

This is not really an issue with plotly.py per-se, but is the result of issues upstream at plotly.js.

plotly.js does not encapsulate mathjax but instead relies on it being loaded globally and configured in a specific way. The problem is that there are multiple different output renderers for mathjax. Juypter globally loads mathjax with HTML output, but plotly.js requires SVG output. A quick and easy fix is just to change the output renderer for mathjax globally as this does not affect Juypter's markdown rendering.

In order to address #445, mathjax should also be configured to set displayAlign = center since plotly.js explicitly sets this to left align. As far as I can tell in simple testing, the display alignment actually has no bearing on the output rendered by plotly.

Right now the code block I'm using to fix all these issues is:

# Startup plotly
init_notebook_mode(connected=True)

# The polling here is to ensure that plotly.js has already been loaded before
# setting display alignment in order to avoid a race condition.
display(HTML(
    '<script>'
        'var waitForPlotly = setInterval( function() {'
            'if( typeof(window.Plotly) !== "undefined" ){'
                'MathJax.Hub.Config({ SVG: { font: "STIX-Web" }, displayAlign: "center" });'
                'MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "SVG"]);'
                'clearInterval(waitForPlotly);'
            '}}, 250 );'
    '</script>'
))

[flo-compbio]

@jjaraalm's piece of code (above) fixed the problem for me. Thank you!

[chriddyp]

Thanks for posting @jjaraalm ! I tried to add that snippet to the offline code but was getting some errors from Mathjax. Here is the PR: #683.

Has anyone else been successful in adding this?

[yihengli]

Hi, are we still working on a fix for this issue?

I tried the code block posted by @jjaraalm but unfortunately it doesn't work for me.

import plotly
plotly.offline.init_notebook_mode(connected=True)
from IPython.core.display import display, HTML
# The polling here is to ensure that plotly.js has already been loaded before
# setting display alignment in order to avoid a race condition.
display(HTML(
    '<script>'
        'var waitForPlotly = setInterval( function() {'
            'if( typeof(window.Plotly) !== "undefined" ){'
                'MathJax.Hub.Config({ SVG: { font: "STIX-Web" }, displayAlign: "center" });'
                'MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "SVG"]);'
                'clearInterval(waitForPlotly);'
            '}}, 250 );'
    '</script>'
))

I used nbconvert to html, but the latex will still show as $$ code $$. I am not sure if I used this code correctly.