Explicit figure height replaced with autosize=True in callback
Ninguém assumiu esta issue ainda.
- 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
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- 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