plotly / plotly/plotly.py

problem getting MathJax to work (need more documentation)

Open
#4,551 0 comments 0 reactions 1 assignee View on GitHub

@Coding-with-Adam is already working on this.

Since Jul 11, 2024.

documentation feature P3
Dominant language
Python
Stars
18.8k
Forks
2.8k
Avg merge
16h 26m
Merged PRs (30d)
21

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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.