plotly / plotly/plotly.py

problem getting MathJax to work (need more documentation)

Offen
#4,551 0 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@Coding-with-Adam arbeitet bereits daran.

Seit 11.7.2024.

documentation feature P3
Vorherrschende Sprache
Python
Sterne
18.8k
Forks
2.8k
Ø Merge
16 Std. 26 Min.
Gemergte PRs (30 T.)
21

Beschreibung

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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.