✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

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

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)

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.

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)

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:

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

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

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?

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

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

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