Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Edges of line graph/mouse markers not displaying fully via Dash

I imagine this is a common issue – feel free to direct me to another thread if appropriate.

As you can see from the image, the top y-axis labels get cut off since they are 3+ characters long, and the x-axis mouse marker/flag also gets cut off at the bottom of the image.

I’m not familiar with web development, but what’s the right way to make the container the graph resides in larger so that the graph isn’t cut off?

Thanks,
ZT

@thomzi12 - I suspect that you’re margins are too small. You can set the properties of the margin within the layout property within the figure attribute of the dcc.Graph component. For example:

dcc.Graph(
    id='my-graph',
    figure={
        'data': [{'x': [1, 2, 3}],
        'layout': {
                'margin': {
                        'l': 40, # left margin, in px
                        'r': 40, # right margin, in px
                        't': 40, # top margin, in px
                        'b': 80, # bottom margin, in px
                }
    }
)

I suggest keeping the margins as small as possible (while keeping the text readable) so that the graph takes up as much space as is available. The margins don’t shrink when the page gets smaller (e.g. on a mobile device) so 80px of side margins could end up occupying most of the screen’s real estate.

Awesome, that works. Thanks for the advice!