How can I change the size of my Dash Graph?

Question

I'm running into layout difficulties with the plots on Dash. All the plots I generate with Dash seem to be auto sized to be very narrow, which makes it hard to actually view the data without some creative zooming.

As an example, when I view the source on one of my dashes, it looks like it computes the height of the main plot container (svg-container) to be 450px and the height of the graph itself to be 270px (looking at the subplots). It would be nice if I could make the graph, say, 700px.

My question is: what is the best way to adjust the dimensions of the graphs on Dash? My first guess would be to somehow attach a stylesheet, but I'm not sure how or what the appropriate css selectors would be.

Thank you!

Answer 1

A Graph object contains a figure. Each figure has data and layout attributes.

You can set the height in the layout.

dcc.Graph(
    id="my-graph",
    figure={
        "data": [
            {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar"},
            {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar"},
        ],
        "layout": {
            "title": "My Dash Graph",
            "height": 700,  # px
        },
    },
)

According to the Plotly figure object schema, height must be a number greater than or equal to 10, and its default is 450 (px).

Keep in mind that you can create a Graph object and set figure later, in a dash callback.

For example, if the value of a dcc.Slider affects the figure attribute of your Graph you will have:

import plotly.graph_objs as go

dcc.Graph(id="my-graph")

@app.callback(
    output=Output("my-graph", "figure"),
    inputs=Input("slider", "value")])
def update_my_graph(value):
    data = go.Data(
        [
            go.Bar(x=[1, 2, 3], y=[4, 1, 2]),
            go.Bar(x=[1, 2, 3], y=[2, 4, 5]),
        ]
    layout = go.Layout(
        title="My Dash Graph",
        height=700
        )
    figure = go.Figure(data=data, layout=layout)
    return figure