CSS style + graph keeps growing eternally

[ghost]

this style.css makes your graph thus page grow indefinitely; dump the style.css into assets for auto load:

div {
    border:1px dotted gray;
     padding:.5em
}

example from you to try yourself:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=False)

all latest version, chromium

[SorokaGF]

This is a funky bug haha

[brifordwylie]

I think might be fun to put bounties on some of these issues. My little company https://github.com/SuperCowPowers already sponsors plotly, but I'm happy to chip in another $200 when this issue gets fixed. :)

[gvwilson]

thanks for the offer @brifordwylie - the problem is finding someone who isn't tied up doing critical stuff for customers. I hope the plotly.js 3.0 / plotly.py 6.0 releases, and the upcoming dash 3.0 release, will make it a bit easier for other people to get into the code, but we won't know until they're out…

[behrisch]

Just for the record. I hit this or a very similar bug today. It was present in dash 3.1.1 and 3.2.0 but not in 3.0.3 and 3.0.4

[gvwilson]

thanks for the update @behrisch - we're going to see if we can get to the bottom of this.

[camdecoster]

The reason this happens is due to a few things:

• The Graph component prop responsive defaults to 'auto'. This means that the function that gets called when an element resize event occurs will call the plotly.js function resize, which enables the autosize attribute. That attribute being enabled means that plotly.js will attempt to fill the parent container with the chart element. This also happens if responsive is True.
• The parent has no style set that fixes the height, so it's sized to the height of the chart element. Because no height is provided for the chart, it uses the default of 450px.
• The border and padding applied to every div means that the chart element also has that applied (it could be any style that affects the size of the chart element). The size of the chart element is initially 0 (before plotly.js has added everything), then increases to the default size of 450px. This triggers a resize event which increases the chart height to the parent height, but then the styles affect the size of the parent, which triggers another resize event, and so on.

To avoid this issue, you can do one of the following:

• Use a more specific style that doesn't affect the chart element
• Add a height to the Graph component using the style prop
• Set responsive to False
• Set responsive to True with a height on the parent

So, I don't consider this to be a bug so much as overbroad styles creating a weird situation. I'm going to close the issue, but thank you for bringing this up.

[behrisch]

@camdecoster Can you explain why it only happens with certain versions?

[camdecoster]

@behrisch, in my testing, this issue does occur on the versions that you mention. You may have been dealing with a similar bug. Was your Graph inside a div with a sibling element?

[AnnMarieW]

Looks like https://github.com/plotly/dash/pull/3496 will fix this.
Will be available in Dash 3.5

[camdecoster]

Looks like #3496 will fix this. Will be available in Dash 3.5

That's not quite true. The original issue is the result of styles being applied to all divs and that will still be a problem. The solutions that I mentioned above should address that. The changes in #3496 should address some issues where autosizing was being handled improperly (such as when sibling elements exist in certain circumstances).