How to effectively adjust graph margin or padding in dash plotly

Question

I have plotted two graphs using plotly dash. But when the y-axis / x-axis tick size is more it gets cut off.

Y-axis :

Code :

data = [go.Scatter(x = df[df['S2PName-Category']==category]['S2BillDate'],
                       y = df[df['S2PName-Category']==category]['totSale'],
                       mode = 'markers+lines',
                       name = category) for category in df['S2PName-Category'].unique()]

    layout = go.Layout(title='Category Trend',
        xaxis = dict(title = 'Time Frame', tickformat = '%d-%b-%y'),
        yaxis = dict(tickprefix= '₹', tickformat=',.2f',type='log'),
        hovermode = 'closest',

        plot_bgcolor =  colors['background'],
        paper_bgcolor = colors['background'],
        font = dict(color = colors['text'])
        )

X-Axis :

Code :

data = [go.Scatter(x = df[df['S2PName']==item]['S2BillDate'],
                   y = df[df['S2PName']==item]['totSale'],
                   mode = 'markers+lines',
                   name = item) for item in items]

layout = go.Layout(title='Category Trend',
    xaxis = dict(title = 'Time Frame' , tickformat = '%d-%b'),
    yaxis = dict(tickprefix= '₹', tickformat=',.2f',type='log',autorange = True),
    hovermode = 'closest',
    plot_bgcolor =  colors['background'],
    paper_bgcolor = colors['background'],
    font = dict(color = colors['text'])
    )

In the above 2 graphs , as the length of the tick value increases, it gets cut off . Is there a better way to handle this ?

Answer 1

Credit for @Flavia Giammarino in comments for the reference to the docs. I'm posting the answer for completeness.

https://plotly.com/python/setting-graph-size/

From that link the example below shows how to set margin:

fig.update_layout(
    margin=dict(l=20, r=20, t=20, b=20),
)

Where l r t b correspond to left, right, top, bottom.

Answer 2

I had a similar problem with some Dash/Plotly charts and long y axis labels being truncated or hidden. There didn't seem to be much information or documentation on this issue, so it took a while to solve.

Solution: add this code to the layout settings to prevent truncation of the y axes labels:

fig.update_layout(
    yaxis=dict(
        automargin=True
    )
)

or you can update the yaxes setting specifically:

fig.update_yaxes(automargin=True)

Update: I tried another version of Plotly (5.10 or above) which mentions setting the automargin setting to any combination of automargin=['left+top+right+bottom'] with similar results. This still seems a bit unstable and doesn't solve all possible scenarios or corner cases, but works fine in most cases, especially when the browser window is maximized.