That height is set automatically by plotly.js to be the size of the container. There are two ways to set the height:
- Set the height of the container of the graph element by passing in
style
todcc.Graph
, e.g.dcc.Graph(style={'height': '700px'}, id='my-graph', figure={...})
- Set the height of the graph itself and let the container expand to that height. This is configured by setting the
height
of thefigure.layout
property.
Here is an example of both methods.
import dash
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash()
app.layout = html.Div([
dcc.Graph(
id='graph-1',
figure={
'data': [{
'y': [1, 4, 3]
}],
'layout': {
'height': 800
}
}
),
html.Hr(),
dcc.Graph(
id='graph-2',
style={
'height': 800
},
figure={
'data': [{
'y': [1, 5, 2]
}]
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)