problem getting MathJax to work (need more documentation)

[LucaMaurelliC]

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?