How can I change the size of my Dash Graph?
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
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
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.