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!
Automatically Adjust MarginsSet automargin=true (reference) and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
Automatically Adjust Margins Set automargin to True and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With