-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Description
I would like to ask where I can read more abour the mathjax support/integration for latex typesetting with plotly (python + js). I'm working a proof of concept web app with django framework (backend) and bootstrap (frontent). My wish is to be able to use latex typesetting also in bootstrap components and I was thinking about using just a single library to support it, e.g. mathjax.
To date I create plotly plots and convert them with io.to_html to integrate them into the template\html of django, for instance a small example:
def index(request):
# Using graph_objects
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
# Create the Layout object
light_layout = Layout(
xaxis_title=r'$\text{Datetime }[\text{YYYY MMM}]$',
#yaxis_title="Y Axis Label",
yaxis_title=r'$\text{Prices }[\unicode{x20AC}]$',
plot_bgcolor='white',
paper_bgcolor='white',
xaxis=dict(
linecolor='black',
tickformat="%Y %b",
tickfont=dict(
color='black'
),
titlefont=dict(
color='black'
)
),
yaxis=dict(
linecolor='black',
tickfont=dict(
color='black'
),
titlefont=dict(
color='black'
)
)
)
fig = go.Figure(
[
go.Scatter(
x=df['Date'],
y=df['AAPL.High'],
line=dict(color='blue'),
)
],
layout=light_layout,
)
plot = pio.to_html(
fig,
full_html=False,
include_plotlyjs='cdn',
include_mathjax='cdn',
)
context = {
'include_plotly': False,
'include_mathjax': False,
'plot' : plot,
}
return render(request, "test/index.html", context)
I have tried, unsuccesfully to change the arguments of pio.to_html in order not to pass CDNs script links but to load them directly with a custom logic into the template/html so that I can load mathjax when I use plotly with latex typesetting or when I just put some latex typesetting without plotly:
...
plot = pio.to_html(
fig,
full_html=False,
include_plotlyjs=False,
include_mathjax=False,
)
For example, using a syntax similar to jinja2 I can add/load frontent variables/scripts from the backend logic as follows:
{% extends "base.html" %}
{% block head %}
{% if include_plotly %}
<script async src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% endif %}
{% if include_mathjax %}
<!-- Plotly requires MathJax 2.7.5 -->
<script async src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/es5/tex-mml-chtml.js"></script>
{% endif %}
{% endblock %}
{% block content %}
{{ plot|safe }}
{% endblock %}
From the developer console I can see that plotly.js and mathjax.js scripts are loaded into the html, but the plot does not show. What can I do to fix it? Also what is the right/latext version of mathjax supported with plotly python and js?