Explicit figure height replaced with autosize=True in callback
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- Python
- Sterne
- 18.8k
- Forks
- 2.8k
- Ø Merge
- 16 Std. 26 Min.
- Gemergte PRs (30 T.)
- 21
Beschreibung
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...
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Führe die mitgelieferte Python-Reproduktion aus und konzentriere dich auf die Callbacks add_chart und observe_chart sowie auf das dcc.Graph figure, das zwischen ihnen übergeben wird. Vergleiche das figure layout vor und nach der Callback-Serialisierung; abgeschlossen ist die Aufgabe, wenn eine explizite Höhe von 300 in den Daten des beobachteten Callbacks verfügbar bleibt, anstatt durch autosize=True ersetzt zu werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- plotly, python
- Bereich
- api
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100