¿Cómo puedo cambiar el tamaño de mi Dash Graph?

Hola usuario de nuestra página, encontramos la respuesta a tu búsqueda, desplázate y la verás aquí.

Solución:

A Graph objeto contiene un figure. Cada figure posee data y layout attributes.

Puede configurar el height en el 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
        ,
    ,
)

De acuerdo con Plotly figure esquema de objetos, height debe ser un número mayor o igual a 10, y su valor predeterminado es 450 (px).

Tenga en cuenta que puede crear un Graph objeto y conjunto figure más tarde, en una devolución de llamada de guión.

Por ejemplo, si el value de un dcc.Slider afecta el figure attribute de tu Graph usted tendrá:

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

Hice esto colocando el div de la trama como un subdiv dentro de un div principal y luego configurando el tamaño del div principal. Algo como esto:

# main parent div for the app
main_div = html.Div(children = [
    # sub-div for the plot
    html.Div(children = [
                dcc.Graph(id = 'my-plot'),
    ])
    ],
    # set the sizing of the parent div
    style = 'display': 'inline-block', 'width': '48%')

A medida que su aplicación crezca en complejidad, probablemente necesitará configurar más anidamiento de div para que esto funcione. Y probablemente también podría configurar el style en el subdiv de la trama directamente, dependiendo de cómo haya configurado las cosas.

Además, podría sugerir seguir los foros oficiales de Dash aquí, ya que probablemente habrá más usuarios allí, junto con el propio desarrollador de Dash publicando con frecuencia: https://community.plot.ly/c/dash

Alternativamente, puede cambiar el tamaño de la ventana gráfica en el contenedor principal como:

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

Eso cambiará el gráfico para que sea el 90% de la altura de la ventana gráfica del navegador. Puedes ver más información de viewport en este enlace.

Si entiendes que te ha resultado de ayuda nuestro artículo, te agradeceríamos que lo compartas con el resto programadores de este modo contrubuyes a extender nuestro contenido.

---

---

Utiliza Nuestro Buscador