Labels with multiple dollar signs breaks Dash

I found a weird issue where some graphs were displaying correctly but some were blank. Looking at the Javascript console output, the broken ones were showing an error: ‘MathJax is not defined’

I then realized the broken ones had multiple dollar signs. This is ok: ‘Less than $10,000’ but this breaks: ‘$10,000 to $14,999’

Best I can figure out this is because MathJax uses Latex, and dollar signs are special in Latex.

Options to fix:

  • Remove second dollar sign (’$10,000 to 14,999’)
  • HTML encode dollar sign with ‘$’

Hope this helps someone else!

Here is a super simple Dash app that demonstrates the issue. For me it broke both my Mapbox map and my Plotly chart, but this example only uses a simple chart.

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash()

title_options = ['Works with single $ sign', 'Breaks if $ multiple $ used.']

app.layout = html.Div([
    html.Div([
        html.H3('Testing weird dollar sign issue', 
        style={'width': '90%', 'float': 'center'}),
        html.Div([
            html.H6('Toggle:', style={'width': '30%'}),
            dcc.Dropdown(
                id='demo-toggle',
                options=[{'label': o, 'value': o} for o in title_options],
                value=title_options[0],
            )
        ],
        style={'width': '98%', 'float': 'center', 'display': 'inline-block'}),
        html.Div([
            dcc.Graph(id='demo-line-chart'),
        ], style={'display': 'inline-block', 'width': '98%'})
    ], style={
        'borderBottom': 'thin lightgrey solid',
        'backgroundColor': 'rgb(250, 250, 250)',
        'padding': '10px 5px'
    }),
])

@app.callback(
    Output('demo-line-chart', 'figure'),
    [Input('demo-toggle', 'value')])
#def update_map(geo_group, census_category, census_category_option, years_selected):
def update_line_chart(axis_label):

    title = axis_label+' for place from 2011-2015'

    years_selected_list = range(2011, 2016)

    data_values = [500, 550, 600, 580, 610]

    layout = go.Layout(
        paper_bgcolor='rgb(255,255,255)',
        xaxis=go.XAxis(
            title='Year',
            range=years_selected_list,
            showgrid=False,
            showline=False,
            showticklabels=True,
            tickcolor='rgb(127,127,127)',
            ticks='outside',
            zeroline=False,
            autotick=False
        ),
        yaxis=go.YAxis(
            title=axis_label,
            showgrid=True,
            showline=False,
            showticklabels=True,
            tickcolor='rgb(127,127,127)',
            ticks='outside',
            zeroline=True
        ),
        title=title  
    )

    return {
        'data': [go.Scatter(x=years_selected_list, y=data_values, mode='lines+markers')],  
        'layout': layout

    }