Sizing a graph in dash crops the plot

Dash Python
1

I am trying to size a plotly chart in dash and no matter where I apply the sizing property, it is cropping the chart rather than resizing it. I am really missing something here. The original metrics plot looks like the below image

Chart_crop1
Chart_crop11903×828 48.6 KB

When I try the style: height property, I see this -
Chart-crop2
Chart-crop21919×626 42.6 KB

The code I used for the metrics plot is given below:

html.Div([html.H2("Aggregate Metrics"),
                    dcc.Graph(
                        figure=push_metrics()
                        )
]
)
def push_metrics():
    fig = go.Figure()

    a = 313,300
    b = 30,980

    fig.add_trace(go.Indicator(
        title = "Metric-1",
        mode = "number",
        value = a,
        domain = {'row': 0, 'column': 0}))

    fig.add_trace(go.Indicator(
        title = "Metric-2",
        mode = "number",
        value = b,
        domain = {'row': 0, 'column': 1}))

    fig.add_trace(go.Indicator(
        title = "Metric-3",
        mode = "number",
        value = round((a-b)*100/a,2),
        domain = {'row': 0, 'column': 2}))

    fig.update_layout(grid = {'rows':1, 'columns':3, 'pattern':"independent"})

    return fig

I tried applying the style property to the graph at dcc.graph, at html.Div, at fig.update_layout. No matter where I apply it, the plot gets cropped instead of resizing.

2

Morning!
You should be able to adjust the height, width, margins and padding using

fig.update_layout(
    autosize=False,
    width=500,
    height=500,
    margin=dict(
        l=50,
        r=50,
        b=100,
        t=100,
        pad=4
    )
)

Chart resizing does take some trial and error, i pulled the above from Setting Graph Size
Just confirming none of these options work?

2 Likes
3

I added the code to the fig.update_layout block and I was still seeing a cropped plot. The values I used for width and height were 1000 and 200.

Corrected-1
Corrected-11003×298 8.86 KB

However, when I changed the height to 300, I was able to see the metrics. properly.

Corrected-2
Corrected-21011×295 18.6 KB

The container size changed but the size of the numbers didn’t change relatively. I later discovered that piece is handled by adding font size property to the go.Indicator function.

4

Ah yea there are several properties for changing the size of various things. I tend to remove the padding/margins from most things (that aren’t cards) and then just size it appropriately.

Did all of that solve it for you?

5

Yes. It did. Thanks you.