ScatterGL will not always plot text that comes from a custom font. When the dashboard is first loaded up, nothing appears on the plots at all. Once I refresh the page, the text will appear on the plot in the custom font. Ideally, the text would show up the first time the dashboard is loaded up. Below are a couple screenshots, the first one indicating what happens on the first load, the second one indicating what happens once I refresh the page. Note on the first one the points are being plotted as hover labels are present, the text just isn’t visible.
I have created a fully reproducible example of this issue.
The text I’m using is in a custom font package that is not installed on my computer. I don’t want to have to install the font on the computer, instead simply download the font package and use it. I’m using @font-face in a CSS in an ‘assets’ folder that exists in the same directory the script is in. The font package is also in this ‘assets’ folder.
The python script is as follows:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import random
app = dash.Dash(__name__, show_undo_redo=False)
app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.layout = html.Div(
id='top_level',
children=[
html.Div(
id='plot_div',
children=[],
),
html.Button(
id='update',
children="Update",
),
]
)
@app.callback(
Output('plot_div', 'children'),
[Input('update', 'n_clicks')]
)
def plot_update(clicked):
if clicked:
x = [random.randint(1, 101) for i in range(100)]
y = [random.randint(1, 101) for j in range(100)]
text = [chr(random.randint(65, 126)) for k in range(100)]
figure = {'data': [go.Scattergl(x=x, y=y, mode='text', text=text, textfont={'family': 'PlayfairDisplay'})],
'layout': {
'xaxis': {
'fixedrange': True,
'zeroline': False,
},
'yaxis': {
'fixedrange': True,
'zeroline': False,
},
'plot_bgcolor': 'rgba(180, 180, 180, 0.5)',
}
}
return [
dcc.Graph(
id='plot_output',
figure=figure,
)
]
if __name__ == '__main__':
app.run_server(debug=True, port=1000)
The CSS looks like this:
@font-face {
font-family: 'PlayfairDisplay';
src: url('PlayfairDisplay-Black.ttf');
}
I got the font package from the following website: https://www.1001freefonts.com/
(Any font file should work as long as the ‘src’ in the CSS is the correct file name).
Any insight anyone has into this issue is greatly appreciated! Thanks!