Plotly resize bug using html.Details / hidden Div and width=100%

Dash Python
1

I have a dash app that uses bootstrap to create a dynamic layout depending on screen size. This means that I can usually just set the width of my dcc.Graph objects to 100% to fill the width of the dynamic container. I came across a bug that when hiding content in a html.Details div that is closed on page load the plotly figure does not resize to fill the parent container. Is there any other way of achieving this without hardcoding the width? This may be an issue with the way that the plotly auto resize works?

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np

app = dash.Dash(__name__)

trace = go.Scatter(
    x=np.random.random(size=100),
    y=np.random.random(size=100),
)

fig = go.Figure(data=[trace])


app.layout = html.Div([
    html.Details([
        html.Summary('Show / hide'),
        dcc.Graph(id='mygraph', figure=fig, style={'width': '100%'})
    ], open=False)
], style={'width': 1000})

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8050, debug=True)

details-bug
details-bug1149×589 170 KB

3

Hm, my guess is that the html.Details tag isn’t providing it’s children content with the dimensions when it is closed. So, the dcc.Graph tries to infer its dimensions but those dimensions aren’t supplied.

I’m actually not sure what the solution is. Maybe there is some event listener on dimension properties of html elements that we could listen to and then resize the graph appropriately.

4

The same thing happens on Divs that are initially loaded with display=hidden:

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np

app = dash.Dash(__name__)

trace = go.Scatter(
    x=np.random.random(size=100),
    y=np.random.random(size=100),
)

fig = go.Figure(data=[trace])


app.layout = html.Div([
    html.Button('Show / hide', id='button', n_clicks=0),
    html.Div([
        dcc.Graph(id='mygraph', figure=fig, style={'width': '100%'})
    ], style={'display': 'hidden'}, id='container')
], style={'width': 1000})

@app.callback(Output('container', 'style'),
              [Input('button', 'n_clicks')])
def show(n_clicks):
    print(n_clicks % 2)
    if n_clicks % 2 == 1:
        return {'display': 'block'}
    else:
        return {'display': 'none'}

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8050, debug=True)

hidden-bug
hidden-bug.gif1152×667 190 KB

5

Is this an issue for plotly.js rather than dash? Is the best thing for this to create an issue on the plotly.js repo? I should really learn some java script so I can contribute :slight_smile:

6

ahh…i bump into same issue as well :neutral_face:

7

Hard to say which library will end up making the fix. But yeah, why don’t you create an issue in plotly.js and reference this issue (and tag me) and we can all discuss there. The solution might be some extra code around Dash’s plotly.js component (dash_core_components.Graph).

1 Like
8

Having this issue while embedding Plotly.js into Reveal.js, so thinking this is going to be an issue with a lot of frameworks, if we can fix it in plotly all the better.

Was an issue opened?

9

Yes there is a plotly.js issue: https://github.com/plotly/plotly.js/issues/2769

10

Hi!
could you tell me if there are any changes on this issue?

11

Bumped into the issue but can’t find a good solution… does anyone knows the solution to this problem?