How can I change the size of my Dash Graph?
Question:
I’m running into layout difficulties with the plots on Dash. All the plots I generate with Dash seem to be auto sized to be very narrow, which makes it hard to actually view the data without some creative zooming.
As an example, when I view the source on one of my dashes, it looks like it computes the height of the main plot container (svg-container) to be 450px and the height of the graph itself to be 270px (looking at the subplots). It would be nice if I could make the graph, say, 700px.
My question is: what is the best way to adjust the dimensions of the graphs on Dash? My first guess would be to somehow attach a stylesheet, but I’m not sure how or what the appropriate css selectors would be.
Thank you!
Answers:
I did this by placing the plot’s div as a sub-div inside a parent div, then setting the size of the parent div. Something like this:
# main parent div for the app
main_div = html.Div(children = [
# sub-div for the plot
html.Div(children = [
dcc.Graph(id = 'my-plot'),
])
],
# set the sizing of the parent div
style = {'display': 'inline-block', 'width': '48%'})
As your app grows in complexity you will probably need to set up more div nesting for this to work. And you could also probably just set the style on the plot’s sub-div directly, depending on how you’ve configured things.
Also, I might suggest following the official Dash forums here since there will probably be more users there, along with the Dash dev himself posting frequently: https://community.plot.ly/c/dash
A Graph object contains a figure. Each figure has data and layout attributes.
You can set the height in the layout.
dcc.Graph(
id="my-graph",
figure={
"data": [
{"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar"},
{"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar"},
],
"layout": {
"title": "My Dash Graph",
"height": 700, # px
},
},
)
According to the Plotly figure object schema, height must be a number greater than or equal to 10, and its default is 450 (px).
Keep in mind that you can create a Graph object and set figure later, in a dash callback.
For example, if the value of a dcc.Slider affects the figure attribute of your Graph you will have:
import plotly.graph_objs as go
dcc.Graph(id="my-graph")
@app.callback(
output=Output("my-graph", "figure"),
inputs=Input("slider", "value")])
def update_my_graph(value):
data = go.Data(
[
go.Bar(x=[1, 2, 3], y=[4, 1, 2]),
go.Bar(x=[1, 2, 3], y=[2, 4, 5]),
]
layout = go.Layout(
title="My Dash Graph",
height=700
)
figure = go.Figure(data=data, layout=layout)
return figure
Alternatively, you can change the viewport sizing in the parent container like:
dcc.Graph(id='my-graph',style={'width': '90vh', 'height': '90vh'})
That will change the graph to be 90% of the viewport height of the browser. You can see more info of viewport on this link.
First I have to say that I return the element graph() from Python functions in Dash @app.callback to the app.layout elements.
Inside the element dcc.Graph( ) there is a property called "figure", to show a figure inside that property you have to assigned figure = "something" that something has to be or return a figure, for example:
figure=plot_plotly(prophet, forecast, figsize= (1500, 700)) <– (that worked for me).
As you may see inside of the element that returns a figure, in my case "plot_ploty", you can set the element or property "figsize" as I did and stablished the height and wide.
If the element that returns the figure to "figure" does not have the element "figsize", you can try to set the width and the height directly like follows:
figure=px.line(forecast, x=’ds’, y=’yhat’, title=’Prophet Predictions’, height= 700, width= 1500) <– (that worked for me).
I think that with these two cases you will have enough, if not, you can look for the figure documentation to see what property sets the width and height.
I’m running into layout difficulties with the plots on Dash. All the plots I generate with Dash seem to be auto sized to be very narrow, which makes it hard to actually view the data without some creative zooming.
As an example, when I view the source on one of my dashes, it looks like it computes the height of the main plot container (svg-container) to be 450px and the height of the graph itself to be 270px (looking at the subplots). It would be nice if I could make the graph, say, 700px.
My question is: what is the best way to adjust the dimensions of the graphs on Dash? My first guess would be to somehow attach a stylesheet, but I’m not sure how or what the appropriate css selectors would be.
Thank you!
I did this by placing the plot’s div as a sub-div inside a parent div, then setting the size of the parent div. Something like this:
# main parent div for the app
main_div = html.Div(children = [
# sub-div for the plot
html.Div(children = [
dcc.Graph(id = 'my-plot'),
])
],
# set the sizing of the parent div
style = {'display': 'inline-block', 'width': '48%'})
As your app grows in complexity you will probably need to set up more div nesting for this to work. And you could also probably just set the style on the plot’s sub-div directly, depending on how you’ve configured things.
Also, I might suggest following the official Dash forums here since there will probably be more users there, along with the Dash dev himself posting frequently: https://community.plot.ly/c/dash
A Graph object contains a figure. Each figure has data and layout attributes.
You can set the height in the layout.
dcc.Graph(
id="my-graph",
figure={
"data": [
{"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar"},
{"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar"},
],
"layout": {
"title": "My Dash Graph",
"height": 700, # px
},
},
)
According to the Plotly figure object schema, height must be a number greater than or equal to 10, and its default is 450 (px).
Keep in mind that you can create a Graph object and set figure later, in a dash callback.
For example, if the value of a dcc.Slider affects the figure attribute of your Graph you will have:
import plotly.graph_objs as go
dcc.Graph(id="my-graph")
@app.callback(
output=Output("my-graph", "figure"),
inputs=Input("slider", "value")])
def update_my_graph(value):
data = go.Data(
[
go.Bar(x=[1, 2, 3], y=[4, 1, 2]),
go.Bar(x=[1, 2, 3], y=[2, 4, 5]),
]
layout = go.Layout(
title="My Dash Graph",
height=700
)
figure = go.Figure(data=data, layout=layout)
return figure
Alternatively, you can change the viewport sizing in the parent container like:
dcc.Graph(id='my-graph',style={'width': '90vh', 'height': '90vh'})
That will change the graph to be 90% of the viewport height of the browser. You can see more info of viewport on this link.
First I have to say that I return the element graph() from Python functions in Dash @app.callback to the app.layout elements.
Inside the element dcc.Graph( ) there is a property called "figure", to show a figure inside that property you have to assigned figure = "something" that something has to be or return a figure, for example:
figure=plot_plotly(prophet, forecast, figsize= (1500, 700)) <– (that worked for me).
As you may see inside of the element that returns a figure, in my case "plot_ploty", you can set the element or property "figsize" as I did and stablished the height and wide.
If the element that returns the figure to "figure" does not have the element "figsize", you can try to set the width and the height directly like follows:
figure=px.line(forecast, x=’ds’, y=’yhat’, title=’Prophet Predictions’, height= 700, width= 1500) <– (that worked for me).
I think that with these two cases you will have enough, if not, you can look for the figure documentation to see what property sets the width and height.