My Note on Plotly Dash

2 min readMay 4, 2021

Part 1: Introduction to Dash

Every Dash app requires a layout. The layout includes:

dash core components dcc.Graph
dash html components html.Div, html.H3

app.layout = html.Div(
    children=[
        html.Div(
            className="data-class",
            children=[
                html.H3("head"),
                dcc.Graph(id="my-id"),
            ],
        ),
    ]
)

html.Div is more like a wrapper, and it can contain other components like dcc.Graph etc.

Part 2: Notes

(1) if the ouput is html.Div, then its property is children

html.Div(id="my-div")@app.callback(Output("my-div", "children"))
def fun()
  return html.Div([dcc.Graph(figure=fig)])

(2) if the output is dcc.Graph, then its property is figure

dcc.Graph(id="my-graph")@app.callback
def fun()
  fig={
     "data": [go.Bar()],
     "layout":{ }  }or 
@app.callback
def fun()
 from plotly.subplots import make_subplots
 fig = make_subplots(rows=2, cols=1, shared_xaxes=True,   )

 fig.add_trace(go.Scatter(x=x_ax, y=a),
              row=1, col=1)
 fig.add_trace(go.Scatter(x=x_ax, y=b),
              row=2, col=1)
 fig.update_layout(height=900, width=900,
                  title_text="process")
 return fig

(3) Support file downloading

The best way I have found is to use flask, and here is an example downloadable_dash.py

This solution is based on Downloading dynamically generated files from a Dash/Flask app Stackoverflow question.

The second way of support file downloading is to put the generated files in /assets/ directory, then use the following code to access the file:

step 1: generate file in the denoted directory

file_to_be_dowload = ""
if os.path.exists(file_to_be_dowload):
   pass 
else:
   # generate the file

This step is important because the generated files are located in assets directory, if every time we change files kept there, the Dash will refresh.

step 2: generate the file link as html content

text =  html.A(link_name, href=href_cont, target="_blank")
return html.Div([text])

Part 3: Figure

3. 1 Figure.Data

There are several ways of generating figures:

(1) make_subplots

from plotly.subplots import make_subplots
fig = make_subplots()

fig.add_trace()
fig.add_trace(go.Scatter())
fig.update_layout()

(2) fig dict

fig = {
   'data': [ go.Bar(), ]
   'layout':{
       'title': title_name, 
   }
}

(3) go.Figure

fig = go.Figure()
fig.add_trace()

(4) figure_factory

import plotly.figure_factory as ff
fig = ff.create_table(df)

return html.Div([dcc.Graph(figure=fig)])

or an example Figure Factory Tables in Python

3.2 Figure.Layout

The properties in the figure that can be updated include:

height=
width=
title_text=
yaxis={‘visible’: False, ‘showticklabels’: False}
xaxis=
showlegend=False