I am trying to fix a graph size in a dash application, so that it is the desired size and that it doesn't change when resizing the browser page.
The code for my graph and dash application is as such:
distplot = ff.create_distplot(hist_data, group_labels, bin_size=50000, show_hist=False)
distplot = distplot.update_layout(
title_text='Kernel Density Plot of House Price Data',
title_x=0.5,
xaxis_showgrid=False,
yaxis_showgrid=False,
hoverlabel=dict(font_size=10, bgcolor='rgb(69, 95, 154)'),
legend=dict(title='Year of data',
x=1,
y=1,
traceorder='normal',
xanchor = 'auto')
)
#Dash application
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
##Creating Dash server ##
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions=True
url_bar_and_content_div = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content', style={'font': 'Georgia, sans-serif'})
]
)
layout_index = html.Div([
html.H1('Webpage Information', style={'textAlign': 'center'}),
html.H2('Distplot', style={'font-size': '40px'}),
html.Br(),
dcc.Graph(id='distplot', figure=distplot),
],
style={'margin-top': '20px', 'margin-bottom': '20px',
'margin-right': '80px', 'margin-left': '80px'}
)
## Creating HTML style ##
# index layout
app.layout = url_bar_and_content_div
# "complete" layout
app.validation_layout = html.Div([
url_bar_and_content_div,
layout_index
])
# Index callbacks
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
return layout_index
## Run ##
if __name__ == '__main__':
app.run_server(debug=True)
I have tried several methods to achieve this, firstly putting the graph in it's own html.Div()
and using style{'height' : '700', 'width' : '700' }
but it hasn't worked. I have tried using style
directly to the dcc.Graph
object but this has also not worked.
Does anyone know how I would go about this? Thanks
EDIT
I can now properly set the size of the graph height using height=700
in the .update_layout()
method. However when resizing my browsing window, the graph rescales and changes size incorrecty to browser window size.
If anyone knows how to do this, it would be appreciated.