Skip to content

Conversation

@camdecoster
Copy link

@camdecoster camdecoster commented Nov 7, 2025

Description

Update Graph component to avoid infinite chart growth issue.

Supersedes #3418

Changes

  • Refactor JSX to reduce repeated code
  • Use isResponsive function to check for responsiveness

Demo video or screenshots

Before:

Screencast.From.2025-11-07.14-16-06.mp4

After:

Screencast.From.2025-11-07.14-18-02.mp4

Testing

  • Be on dev
  • Build the Dash core components
  • Run the following Dash app with your local dev environment installed as Dash:
    from dash import Dash, dcc, html
    import plotly.express as px
    
    app = Dash(__name__)
    
    app.layout = html.Div(
        children=[
            html.Div(
                children=[
                    html.Div(
                        children=[
                            html.P('Dash: A web application framework for Python!'),
                            dcc.Graph(
                                id='example-graph',
                                figure=px.bar(x=["a", "b", "c"], y=[2, 3, 1]),
                            )
                        ],
                    ),
                    html.P("A flex sibling"),
                ],
                style={
                    "display": "flex",
                }
            ),
            html.P("A distant relative"),
        ]
    )
  • Note that the graph height grows infinitely
  • Switch to this branch
  • Rebuild the Dash core components
  • Run the same Dash app
  • Note that the height is set to the plotly.js default of 450px

Notes

  • The underlying issue stems from the fact that, with the current logic, a height of 100% is applied to the Graph container (which holds the chart element) when it shouldn't be
  • Setting the Graph prop responsive to True or False fixes the behavior, but the default is 'autosize'
  • The current logic interprets this value as truthy, which applies the style in error
  • The Graph has a resize observer tracking resize events
  • When the Graph has a sibling, the 100% height increases the height of the Graph to the combination of the sibling height and the Graph height
  • This then increases the height of the parent, which leads to an increase in the Graph height and so on
  • This issue is the cause of plotly/dash-design-kit#1489

TODO

  • Update changelog

@camdecoster camdecoster marked this pull request as ready for review November 7, 2025 21:39
@camdecoster camdecoster changed the title fix: Fix infinite resize loop fix: Fix dcc.Graph infinite resize loop Nov 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants