Enlarging graphs inside a popup/dialog window

Dash Python
1

I created a pop-up window using the sd_material_ui package. Sample code is below:

import sd_material_ui as sd
import dash
import dash_html_components as html
import dash_core_components as dcc
from plotly import graph_objs as go
from dash.dependencies import Input, Output, State

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.scripts.config.serve_locally = True

trace= go.Bar(
x=[‘a’, ‘b’, ‘c’,‘d’],
y=[4.2,1.3,2.5,2.4],
name=‘A3’
)

app.layout = html.Div([

sd.Dialog(
    html.Div(children=[
        dcc.Graph(id='bar_plot',
                      figure=go.Figure(data=[trace],
                                       layout=go.Layout(barmode='stack', hovermode='closest')),
                      style={'vertical-align': 'middle', 'height': '30vh'}
                      ),
        html.P(id='closer', children='Close window'),
    ]),
    id='output2',
    modal=True,
    open=True),



html.Div(id='input2', children=[
    dcc.Graph(id='bar_plot1',
              figure=go.Figure(data=[trace],
                               layout=go.Layout(barmode='stack', hovermode='closest')),
              style={'vertical-align': 'middle', 'height': '30vh'}
              ),
              ])

])

Callback for SDDialog (modal)

@app.callback(
Output(‘output2’, ‘open’),
[Input(‘input2’, ‘n_clicks’),
Input(‘closer’, ‘n_clicks’)],
[State(‘output2’, ‘open’)])
def show_modal_dialog(modal_click: int, close_button: int, open_state: bool):
if modal_click and modal_click > 0:
if not open_state:
return True
elif close_button:
if open_state:
return False
else:
return False

if name == ‘main’:
app.css.append_css({‘external_url’: ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’})
app.run_server(debug=True)

Is there an easier way to do it in Dash? It would be great to have it as an option in the floating toolbar.

2

Hello! I just wanted to follow up with you and see if you found another solution to this?

3

unfortunately, haven’t looked at it since then