- Published on
Dash (Plotly) tips - Latex, Google Fonts, and more
- Authors
- Name
- Nelson Tang
- @ThisIsAffine
Dash applications need a lot of work to make them look good. Here's a few 'how to' extras that can help out
Latex in Markdown
The latest release of Dash made it much easier to add Latex to your markdown elements. Here's an example:
dcc.Markdown(children="""
This is Latex:
$$
\\begin{align}
y &= x \\\\
&= 0
\\end{align}
$$
""", mathjax=True)
Which gives us:
There were only two tricky bits now: you must set the mathjax=True
in order to enable it, and you need to add an extra backslash (i.e. \ becomes \\).
This is just an artifact of how it's rendering escape characters.
Add Custom Google Fonts
You can use CSS for everything in your Dash app except for the charts that Plotly generates. So, adding in Google fonts is relatively straightforward - you can either follow the @import instructions add a new css file to your /assets/ folder or you can add it in as an external stylesheet.
- Load it in to assets:
# \assets\fonts.css
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
font-family: 'Press Start 2P';
}
- Add it as an external stylesheet
from dash import Dash, html
external_stylesheets = [
"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
]
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
# Title
html.H1(children="Dashboard Title", id="db-name",
style={"font-family": "'Press Start 2P'"}),
])
if __name__ == '__main__':
app.run_server(debug=True)