Black Lives Matter. Please consider donating to Black Girls Code today.

Need help on python dash bar text label is cut off from the graph!

Hi all,

I am building a scatter plot and wanted to show the data label in the chart. However, some of the data point is cut off from the graph, how can I display it correctly?

my current code:

@app.callback(Output('time-series-graph', 'children'),
          [Input('data-timeseries', 'children')])
def update_time_series_graph(data):
    df = pd.read_json(data, orient='split')
    widget = html.Div([
        dcc.Graph(
            figure= go.Figure(
                data=[go.Scatter(
                    x=df['Date'],
                    y=df['Active Risk'],
                    mode='lines+text',
                    text=df['Active Risk'],
                    textposition = 'auto',
                    textfont=dict(
                        size=13,
                        color='#323b47'),
                    marker={'size': 15, 'line': {'width': 0.5, 'color': 'white'}})],
                layout=go.Layout(margin={'l': 40, 'b': 20, 't': 10, 'r': 20}, height=100)),
            style={'vertical-align': 'middle'},
            id = 'time-series-graph-figure'
        )
    ])
    return widget

Here is my graph:

Thanks!

We can close this! Found a solution by adding cliponaxis=False after assigning the text and textposition!

1 Like