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
}