Height of graph inside toast does not resize automatically, width does

Dash Python
1

I’ve put a go.Scattergl inside a dcc.Toast which I made resizable. Now when resizing the width changes as it should, the height doesn’t. Please haalp :smiley:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import numpy as np

toast = {
     "position": "fixed",
     "resize": "both",
     'maxHeight':'100hv',
     'maxWidth': '100vw'
}

# stuff I've tried
style_fig = {
   # 'height': '100%' 
   # 'height': 'inherit'
}


# more stuff I've tried
config = {
    #'responsive': True
}

x, y = np.random.uniform(size=50), np.random.uniform(size=50)

fig = go.Figure(data=[go.Scattergl(x=x, y=y, mode='markers')])
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))



app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Toast(children=html.Div([dcc.Graph(id='fig', figure=fig, config=config, style=style_fig)]),
                        id="my_toast", header="title", style=toast)

if __name__ == "__main__":
    app.run_server(debug=True)

One idea would to fire a callback, when the size of the div container or the toast itself changes… but is there a way to do that?

2

You can add responsive=True to dcc.Graph(), it should take care of vertical resizing :slight_smile:

3

No unfortunately this doesn’t work as I’ve tried this before. No matter if passed to dcc.Graph, with config=… or directly

4

Still didn’t figure that one out. All sort of things that should help like height = 100%, height = inherit etc won’t work.