How to force dcc.Graph to resize?

Dash Python
6

Hi, I had a similar issue. I’ve found a quick workaround, not sure if it will help anyone but in case it could I’m sharing it here:

Toy app :

self.app = html.Div([
                        html.Div(className='row',
                                 children=[

                                    html.Div(className='three columns',
                                             id='options_container',
                                             children=[...],
                                             style={'display': 'block'},
                                             ),

                                    html.Div(className='nine columns',
                                             id='charts_container',
                                             children=[

                                                html.Div([
                                                    html.Div([
                                                        html.Button('Settings', id='show_options', n_clicks=1),
                                                        ]),
                                                    html.Div([
                                                        dcc.Graph(id='map'),
                                                    ],),
                                                ], className='row'),

                                                html.Div([
                                                    html.Div([
                                                        dcc.Graph(id='scatter_plot')
                                                    ],),
                                                ], className='row'),

                                            ],
                                            ),
                                 ])
                        ])

Then to get the panel showing/hiding the options as suggested by chriddyp :

        @self.app.callback(
        dash.dependencies.Output('charts_container', 'className'),
        [dash.dependencies.Input('show_options', 'n_clicks')])
    def class_size_button(options_show):
        if options_show % 2 == 0:
            return 'twelve columns'
        else:
            return 'nine columns'

    @self.app.callback(
        dash.dependencies.Output('options_container', 'style'),
        [dash.dependencies.Input('charts_container', 'className')],
        [dash.dependencies.State('show_options', 'n_clicks')])
    def show_hide_options_button(charts_container, options_show):
        if options_show % 2 == 0:
            return {'display': 'none'}
        else:
            return {'display': 'block'}

Using this method, despite the classname of the charts/maps changing correctly to ‘nine columns’, when the panel appeared the svg-container wasn’t changing and keeping the ‘twelve columns’ value, thus filling up too much space. The responsiveness would kick in only if I changed the size of the window and then everything would fall into place.
So what I did is that I added a listener on the button in my charts/maps and each time it is clicked I send again the figure (with the same data) through a callback. Somehow, this way the responsive part is triggered and the figure size is properly recomputed without touching the window.

Something like:

    @self.app.callback(
        dash.dependencies.Output('map', 'figure'),
        [dash.dependencies.Input('show_options', 'n_clicks'),
         ],
        )
    def update_fig_mapbox(show_options):
        
        # If show options is different, then resend the figure