Update div size with graph in it

[Peter.chumakov]

When i click Settings button, i want graph to update according to it’s new size immediately, and it doesnt. It does only if i resize slightly the window itself, or if go to different browser tab.

What am i doing wrong?

I use dash_bootstrap_componens.

Callback:

@app.callback(
    [Output("collapse_settings", "style"),
     Output("pre-graph-div", "className")],
    [Input("settings-button", "n_clicks")])        
def toggle_collapse(n):
    if not n:
        return {'display': 'block'}, "col-md-9"  #
    if n % 2 == 1:
        return {'display': 'none'}, "col-md-12"  #
    else:
        return {'display': 'block'}, "col-md-9"  #

Layout:

                html.Div(   id="pre-graph-div",
                            className="bg-light",
                            children=[
                            html.Div(
                                id="graph-div",
                                children=[
                                    dcc.Graph(
                                        id='output-graph',
                                        figure={
                                            'data': [
                                                {'x': [], 'y': [], 'type': 'line', 'name': ''},
                                            ],
                                            'layout': {
                                                'title': ''
                                            }
                                        })
                                ])
                        ])

[Peter.chumakov]

Found answer on my question in this theme:

@chriddyp

Note that if the container itself is resizable, the graph will not be replotted/resized. There isn’t a reliable way to tell if a graph’s container has changed size in JavaScript yet, so we’re just checking if the window is resized.

Well, as far as i see, no way to replot/resize graph by changing bs classes.

[mbkupfer]

This got me thinking about adding a synthetic window resize event which will trigger the graph div listener. This work around can be done in pure js using event listeners.

The js to create a window resize event is just three lines. You can wrap it in a function and add as a callback to the dom event listener

function syntheticResize() {
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}

I was able to make a very simple proof of concept below. Let me know if this works!

[jaropis]

Fantastic!
I’ve used it in the R/shiny context and it works like a charm.
Thank you so much!