close

How can I change the size of my Dash Graph?

Hello Guys, How are you all? Hope You all Are Fine. Today We Are Going To learn about How can I change the size of my Dash Graph in Python. So Here I am Explain to you all the possible Methods here.

Without wasting your time, Let’s start This Article.

Table of Contents

How can I change the size of my Dash Graph?

  1. How can I change the size of my Dash Graph?

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

  2. change the size of my Dash Graph

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

Method 1

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

Method 2

Alternatively, you can change the viewport sizing in the parent container like:

dcc.Graph(id='my-graph',style={'width': '90vh', 'height': '90vh'}) 

That will change the graph to be 90% of the viewport height of the browser. 

Summery

It’s all About this issue. Hope all Methods helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which Method worked for you? Thank You.

Also, Read