Height aspect ratio

Dash Python
1

Hi,

I am re-implementing the uber ride example from:
https://github.com/plotly/dash-uber-rides-demo/blob/master/app.py

I am using the same css with containers defined and I like the autoscaling of the figure width depending on the desktop it runs at. What I am wondering though is, whether I can change the height of the figure depending on the auto-detected width?

Some figures of mine need a certain aspect ratio for their height:width.

Any idea on how to do that?

If that doesn’t work, I would like to manually set the width and height, and then center the figure somehow.

2

If you need a fixed aspect ratio because it has meaning in your data, then you can use scaleanchor and scaleratio, which will keep the yaxis a certain proportion of the xaxis.

dcc.Graph(
            id='my-graph',
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [3, 1, 2]
                }],
                'layout': {
                    'yaxis': {
                        'scaleanchor': 'x',
                        'scaleratio': 0.2
                    },
                }
            }
        )
  • However, this doesn’t affect the container of the chart or the actual size of the chart itself.
  • You can fix the chart’s size with height and width inside layout.
  • If you want the height and width to be a constant aspect ratio, then you have to resort to some CSS tricks: https://css-tricks.com/aspect-ratio-boxes/
3

I am looking for an aspect ratio setting for the graph size. I want always a square-shaped graph, for example.

1 Like