plotly / plotly/plotly.py

Explicit figure height replaced with autosize=True in callback

Aberta
#3,936 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

bug P3
Linguagem predominante
Python
Estrelas
18.8k
Forks
2.8k
Merge médio
16h 26min
PRs com merge (30d)
21

Descrição

I'm creating a plotly express line chart and seeing an explicit height=300 being replaced with autosize=True in the layout when used as an Input or State to a callback. This causes size issues when trying to serialize the chart and load it back later.

I'm using Plotly 5.10.0, Dash 2.6.2 with Python 3.10.7.

The following demonstrates the problem.

import plotly.express as px
import dash
from dash import Dash, dcc, html, Output, Input, State
import dash_bootstrap_components as dbc


@dash.callback(
    Output("main-content", "children"),
    Output("loaded-values", "children"),
    Input("load-button", "n_clicks"),
    prevent_initial_call=True
)
def add_chart(clicks):
    df = px.data.stocks()
    df = df.melt(id_vars="date", value_name="price", var_name="stock")

    fig = px.line(
        df,
        x="date",
        y="price",
        color="stock",
        title="Stock Prices",
        height=300,
    )

    info = {
        "width": fig.layout.width,
        "height": fig.layout.height,
        "autosize": fig.layout.autosize,
    }

    return dcc.Graph(figure=fig, id="plot"), f"{clicks}: {info}"


@dash.callback(
    Output("callback-values", "children"),
    # Note: height=300 is seen when triggered by main-content, but autosize=True
    #  is seen when triggered by observe-button
    Input("observe-button", "n_clicks"),
    Input("main-content", "children"),
    prevent_initial_call=True
)
def observe_chart(clicks, content):
    ctx = dash.callback_context
    info = {}
    for k in ["width", "height", "autosize"]:
        try:
            info[k] = content["props"]["figure"]["layout"][k]
        except Exception as e:
            info[k] = None

    return f"{clicks}: {info}"


app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
    dbc.Button("Load", id="load-button", class_name="m-2"),
    dbc.Button("Observe", id="observe-button", class_name="m-2"),
    html.Br(),
    dbc.Label("Loaded Chart"),
    dbc.Container([], id="main-content"),
    dbc.Label("Loaded Layout Values"),
    dbc.Container(id="loaded-values"),
    dbc.Label("Callback Layout Values"),
    dbc.Container(id="callback-values"),
])
app.run_server(debug=True)

Click the "Load" button to "load" the chart. The layout parameters of interest will be shown under "Loaded Layout Values" and the "Callback Layout Values" will be correct. Then click the "Observe" button to update the "Callback Layout Values". Instead of a height=300 there will be an autosize=True.

With the explicit height being discarded the user selected size can't be serialized and loaded later...

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Execute a reprodução Python fornecida, concentrando-se nos callbacks add_chart e observe_chart e na figure de dcc.Graph passada entre eles. Compare o layout da figure antes e depois da serialização do callback; estará concluído quando uma altura explícita de 300 continuar disponível nos dados do callback observado, em vez de ser substituída por autosize=True.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
plotly, python
Domínio
api
Tipo de issue
Bug
Dificuldade
3/5
Tempo estimado
1-2 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.