Explicit figure height replaced with autosize=True in callback
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- Python
- Estrellas
- 18.8k
- Forks
- 2.8k
- Merge medio
- 16 h 26 min
- PR fusionados (30 d)
- 21
Descripción
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...
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Ejecuta la reproducción de Python proporcionada, centrándote en los callbacks add_chart y observe_chart y en la figure de dcc.Graph que se pasa entre ellos. Compara el layout de la figure antes y después de la serialización del callback; se considerará terminado cuando una altura explícita de 300 siga disponible en los datos del callback observado en lugar de ser reemplazada por autosize=True.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- plotly, python
- Área
- api
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100