Can't seem to change default Height on Graph

That height is set automatically by plotly.js to be the size of the container. There are two ways to set the height:

  1. Set the height of the container of the graph element by passing in style to dcc.Graph, e.g. dcc.Graph(style={'height': '700px'}, id='my-graph', figure={...})
  2. Set the height of the graph itself and let the container expand to that height. This is configured by setting the height of the figure.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)
9 Likes