Python Dash graph line label cutoff

Question

I'm using Dash to make a line graph of a boolean Pandas series, and the label is cutoff.

Anyone know how to fix the cutoff label?

Here's my code for the layout:

    layout = dict(
        margin=dict(l=25, r=25, b=40, t=40),
        hovermode="closest",
        legend=dict(font=dict(color='#7f7f7f'), orientation="h"),
        title=gateway_obj.location,
        font=dict(
            color="#7f7f7f"
        ),
    )

and here's my code for the data:

    data = []
    for col in cols_chosen:
        data.append({
            'x': df['timestamp_local'],
            'y': df[col],
            'name': col,
            'type': 'scatter',
            'mode': 'lines',
            'line': {
                'shape': 'spline', 
                'smoothing': .2
            }, 
        })

    figure = {
        'data': data, 
        'layout': layout
    }

This chart plots other time series as well, but the boolean ones are the only ones giving me problems.

Other, possibly relevant, information:

The above code creates the figure for a Dash dcc.Graph() object, which is inside three Bootstrap HTML divs (container, row, and col). There's nothing special about the divs. I tried adding padding and margin on the divs and it just pushed the graph to the right without fixing the cutoff label.

Thanks! Sean

user_3385948 · Answer

Silly me, I just had to add more margin to the layout's "margin" dictionary on the left:

margin=dict(l=40, r=25, b=40, t=40),

Problem solved... Here's the full layout now:

layout = dict(
    margin=dict(l=40, r=25, b=40, t=40),
    hovermode="closest",
    legend=dict(font=dict(color='#7f7f7f'), orientation="h"),
    title=gateway_obj.location,
    font=dict(
        color="#7f7f7f"
    ),
)

Python Dash graph line label cutoff

1 Answers