Margins around graphs

Dash Python
1

Hi, am using dash to generate 3 graphs in one line and the problem is that spacing between the graphs is very big and the same goes for the distance from title.

How would it be possible to reduce margins around those graphs and place title closer to graph?

image
image.png1889×877 77.9 KB

1 Like
2

Hey @aba

Have you reduced the margins in the layout? https://plot.ly/python/setting-graph-size/#adjusting-height-width--margins

For titles you can use something like "<br><br>title" or for better control consider annotations.

2 Likes
3

@bcd thanks for an answer ! It was kinda obvious, I was setting margins in style, rather than in go.Layout

4

Hi Aba,
I saw that you have three graphs in a single row… How did you do that… I’m able to put only 2… Can you please help me

6

How to position the title directly above the chart (independently of margin):

fig.update_layout(
  title={
    "yref": "paper",
    "y" : 1,
    "yanchor" : "bottom"   
  }
)

(Or specify the same thing in go.Layout)

How does it work?

  • yref is used to position the title relative to the actual chart ("paper") and not the container (which would be "container")
  • y is a value between 0 and 1 which sets the relative position. Setting it to 1 will put the title at the top of the chart; setting it to 0 will put the title at the bottom of the chart etc.
  • yanchor sets what part of the title will touch its y location. Without this property the title would now be at the top, but inside the chart (i.e. aligned with the "top"). We set "bottom" so that the bottom of the title will be aligned with the top of the chart, i.e. the title will be located precisely above the chart.

For adding a little padding between the title and the chart use the pad property of the title (look it up in the reference). For vertically positioning the title (e.g. centering it) you can use xref, x and xanchor in the same way.

3 Likes