The graph size didn't work correctly if there are multiple dcc.graph in one page

Dash Python
1

Only the size of the last dcc.graph is as expected. Can anybody explain why?
…
import pandas as pd
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
#from finlab.data import Data
import talib

app = dash.Dash()

html_tmp1 = dcc.Graph(
figure=go.Figure(
data=[
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name=‘Rest of world’,
marker=go.bar.Marker(
color=‘rgb(55, 83, 109)’
)
),
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
299, 340, 403, 549, 499],
name=‘China’,
marker=go.bar.Marker(
color=‘rgb(26, 118, 255)’
)
)
],
layout=go.Layout(
title=‘US Export of Plastic Scrap’,
showlegend=True,
width=600,
height=600,
legend=go.layout.Legend(
x=0,
y=1.0
),
margin=go.layout.Margin(l=40, r=0, t=40, b=30)
)
),
style={‘height’: 300},
id=‘my-graph1’
)

html_tmp2 = dcc.Graph(
figure=go.Figure(
data=[
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name=‘Rest of world’,
marker=go.bar.Marker(
color=‘rgb(55, 83, 109)’
)
),
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
299, 340, 403, 549, 499],
name=‘China’,
marker=go.bar.Marker(
color=‘rgb(26, 118, 255)’
)
)
],
layout=go.Layout(
title=‘US Export of Plastic Scrap’,
showlegend=True,
width=600,
height=600,
legend=go.layout.Legend(
x=0,
y=1.0
),
margin=go.layout.Margin(l=40, r=0, t=40, b=30)
)
),
style={‘height’: 300},
id=‘my-graph2’
)

app.layout = html.Div(children=[
html.H1(children=‘Whoa, a graph!’),
html.Div([html_tmp1,html_tmp2],className=“row”)
])

if name == ‘ main ’:
app.run_server(debug=True)
import pandas as pd
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
#from finlab.data import Data
import talib

app = dash.Dash()

html_tmp1 = dcc.Graph(
figure=go.Figure(
data=[
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name=‘Rest of world’,
marker=go.bar.Marker(
color=‘rgb(55, 83, 109)’
)
),
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
299, 340, 403, 549, 499],
name=‘China’,
marker=go.bar.Marker(
color=‘rgb(26, 118, 255)’
)
)
],
layout=go.Layout(
title=‘US Export of Plastic Scrap’,
showlegend=True,
width=600,
height=600,
legend=go.layout.Legend(
x=0,
y=1.0
),
margin=go.layout.Margin(l=40, r=0, t=40, b=30)
)
),
style={‘height’: 300},
id=‘my-graph1’
)

html_tmp2 = dcc.Graph(
figure=go.Figure(
data=[
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name=‘Rest of world’,
marker=go.bar.Marker(
color=‘rgb(55, 83, 109)’
)
),
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
299, 340, 403, 549, 499],
name=‘China’,
marker=go.bar.Marker(
color=‘rgb(26, 118, 255)’
)
)
],
layout=go.Layout(
title=‘US Export of Plastic Scrap’,
showlegend=True,
width=600,
height=600,
legend=go.layout.Legend(
x=0,
y=1.0
),
margin=go.layout.Margin(l=40, r=0, t=40, b=30)
)
),
style={‘height’: 300},
id=‘my-graph2’
)

app.layout = html.Div(children=[
html.H1(children=‘Whoa, a graph!’),
html.Div([html_tmp1,html_tmp2],className=“row”)
])

if name == ‘ main ’:
app.run_server(debug=True)

Screenshot%20from%202018-10-25%2014-33-01
Screenshot from 2018-10-25 14-33-01.png711×901 19.1 KB

2

My hunch is that your are trying to put figures of height 600px into Div containers with defined height 300px. I suppose this will trigger some overflow which is not handled well… (This is just a guess :slightly_smiling_face:)

3

Yes,Blaceus is right. I should sync all the height in go.layout. Thanks for Blaceus’s suggestion.

1 Like