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

Annotation alignment issue in BAR graph

I have BAR chart using plotly. Graph is perfectly fine the way I want. I can display X-axis and Y-axis values as annotation in each bar as well. I can export the same in html file and looks good as well.

Here is issue. If I zoom out or zoom in, annotation text which marked as left aligned, gets disturbed. And from left aligned, it becomes center aligned. In fact, if I just click on graph, annontation alignment gets disturbed. Here is sample code.

bar_df1 = go.Bar(
x=df1[‘x-axis value’],
y=df1[‘y-axis value’],
name=‘testing’,
marker=dict(
color=‘rgba(55, 128, 191, 1.0)’
),
orientation = ‘h’
)

data = [bar_df1]

xcoord = df1[‘x-axis value’]
y1 = df1[‘y-axis value’]

annotationsList = [dict(
x=xi,
y=yi,
text=str(yi) + str(xi),
xanchor=‘left’,
yanchor=‘left’,
showarrow=False,
font = dict(color = ‘black’ ),
align = ‘center’,
valign = ‘middle’
) for xi, yi in zip(xcoord, y1)]

annotations = annotationsList

layout = go.Layout(annotations=annotations, width = 800,
height=800,
yaxis=dict(
title=‘Testing annotation’,
showticklabels=False,
showgrid=True,
showline=True
),
plot_bgcolor=‘rgb(248, 248, 255)’
)

fig = go.Figure(data=data, layout=layout)

iplot(fig)

Could you please suggest a way to resolve issue.