plotly / plotly/plotly.py

Explicit figure height replaced with autosize=True in callback

Offen
#3,936 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3
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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.