dash-core-components: [BUG] Graph(style='height=100%') fails when reducing window size on Firefox

PIP

dash (1.0.2)
dash-bootstrap-components (0.7.0)
dash-core-components (1.0.0)
dash-daq (0.1.7)
dash-html-components (1.0.0)
dash-renderer (1.0.0)
dash-table (4.0.2)

Describe the bug

Writing: Graph(..., style=dict(height='100%'))

Expected behavior

The graph should fill the full height of the div, which will obey normal CSS rules, that is, span all the available space in the layout. It should not cause any overflow, and respond to window resize (also on Firefox 😉.

Actual behavior

A scrollbar appears for a small amount of overflow (both Chrome and Firefox). Since the amount is small, it is possible to work around this with overflow=hidden, but it may cause clipping (e.g. if using long labels for the X axis, etc.).
Reducing window size does not cause graph resize (Firefox only). That is strange, one would expect that any resize event is handled the same way, regardless if the new size is higher or lower than the original size.

Edit

The following example almost works, except for the two issues above. This threw me off, originally I thought that the feature does not work at all. I edited the issue title and content accordingly.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (12 by maintainers)

Most upvoted comments

@orenbenkiki I too have experienced some frustrations using Flexbox layouts with dcc.Graph — there is more work to be done on complex flex layouts. For your simple example, I think this may work:

...
        dcc.Graph(
            figure=dict(layout=dict(autosize=True)),
            config=dict(responsive=True),
            style={
                'height': '100%',
            },
        ),

Behaviour on Firefox without my suggestion (cut-off x-axis)

x-axis-cutoff

With my suggestion (responsive=True)

x-axis-visible

That is, add responsive=True to the config argument in dcc.Graph(). You can thank @antoinerg for that. Related issue plotly/plotly.js#3034 and PR: plotly/plotly.js#3056

Does that solve your problem? The documentation for this could probably be higher-profile, sorry about that. There is a section on it here.

I also want to echo @alexcjohnson that we appreciate your clear and well-defined issues with examples!

wbrgss on Aug 22, 2019

@antoinerg Too fast! I updated the comment above with responsive=True 😀

Marc-Andre-Rivet on Nov 19, 2019

Using a slightly more complex UI I get a graph that can grow but can’t get smaller in both Chrome and Firefox.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(
    style={
        'display': 'flex',
        'flexFlow': 'column',
        'backgroundColor': 'green',
        'height': 'calc(100vh - 16px)',
        'width': 'calc(100vw - 16px)'
    },
    children=[
        html.Div(
            style={
                'backgroundColor': 'blue',
                'flex': '0 0 100px'
            }
        ),
        html.Div(
            style={
                'backgroundColor': 'red',
                'display': 'flex',
                'flex-direction': 'row',
                'flex': '1'
            },
            children=[
                html.Div(
                    style={
                        'backgroundColor': 'yellow',
                        'flex': '0 0 300px'
                    }
                ),
                html.Div(
                    style={
                        'backgroundColor': 'orange',
                        'flex': '1'
                    },
                    children=[
                        dcc.Graph(
                            figure=dict(layout=dict(autosize=True)),
                            style={
                                'height': '100%',
                                'width': '100%'
                            },
                        ),
                    ]
                )
            ]
        )
    ]
)
app.run_server(debug=True)

Adding responsive=True as suggested by @wbrgss improves the behavior and makes it resize consistently when both growing/reducing, down to sizes smaller than 100x100px in both Chrome and Firefox.

The latest versions of plotly.js introduced some fixes to better handle small graphs, so maybe this is why the behavior is better? Or maybe the page structure needs to be more complex, or specific graphs are needs to expose the problem?

@antoinerg Any insight into the latest comments, what would the next steps be?

Marc-Andre-Rivet on Nov 19, 2019