Text is cut-off in Plotly horizontal bar chart

Question

I created horizontal bar chart in Plotly-dash, but bar text size doesn’t fit to the figure size, so part of the text is cut (please see red-framed area on the screenshot attached).

I tried the following:

Changing left and right margin in figure layout. The whole figure is moving, but the text remains cut.
Setting ‘offset’ in figure data. I’ve got vertical offset of bars, but not horizontal offset of the figure area.

I will highly appreciate if somebody could advice how to fix it.

Dash bar chart with the text cut

Then I tried to add option cliponaxis = False. Text become visible, but overlaps axis labels, still not expected behaviour:

cliponaxis = False

The code I used to make the bar chart:

dcc.Graph(
    id="dashboard2-graph1",
    figure={
        "data": [
            go.Bar(
                x=x2_data,
                y=y2_data,
                text=x2_text,
                cliponaxis = False,
                hoverinfo='skip',
                hovertemplate="Филиал: %{y} <br>Оборот, тыс. руб.:{text}",
                name='',
                orientation='h',
                textposition='auto',
                marker={
                    "color": df_merged['Color1'],
                    "line": {
                        "color": "rgb(255, 255, 255)",
                        "width": 2,
                        },
                },
            ),
        ],
        "layout": go.Layout(
            autosize=True,
            title_text='Оборот, тыс. руб.',
            margin={
                "r": 0,
                "t": 50,
                "b": 20,
                "l": 70,
            },

        ),
     },
     config={"displayModeBar": False},
     style={'align':'left'},
 ),

Asked By: Alexander

||

Source

Answer 1

Unlike minuses on SO, I gained real help from Plotly community. Hope it will help not only me.

To avoid behaviour described xaxis range could be set manually:

fig = fig.update_layout(
    xaxis_range=[-1.0e5, 1.3e5]
)

Now my dashboard looks much better. Finally I used the following expression to fit xaxis range:

xaxis = dict(range=[-abs(min(map(float, x2_data))*2 - max(map(float, x2_data))*0.25), max(map(float, x2_data))]),

Resulted image

Answered By: Alexander

Answer 2

I had a similar problem with some Dash/Plotly charts and y axis label 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: Instead of changing the x axis range, you can 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.

Answered By: Donald S

Text is cut-off in Plotly horizontal bar chart

Question:

Answers: