Centerized some bars on ticks and outsidetextfont doesn't work

Dash Python
1

Hey there,

I’ve been looking without success on how should I centering some bars on top of its tick and to set a size on the outsidetextfont to be bigger.

Screenshot_1
Screenshot_1857×268 12.7 KB

As you see, the bars are not exactly on top of their own category. How do I make them centerized in their category like the image below.

Screenshot_1
Screenshot_1857×268 12.9 KB

Here is the snippet of the code I have:

fig.add_trace(go.Bar(x=['Employee vs Employer'], y=[dfEmp['avgTmp'].mean()], name="Avg. on employees",
                     text="Avg. Employees", marker_color='blue'))
fig.add_trace(go.Bar(x=['Employee vs Employer'], y=[dfEmr['avgTmp'].mean()], name="Avg. on employers",
                     text="Avg. Employers", marker_color='red'))

for k,v in dfEmpRole.iterrows():  
    fig.add_trace(go.Bar(x=['Attitudes by Roles'], y=[v['avgTmp']], name="Attitudes by Roles", 
                         text=v['Q7'],marker_color='yellow'))

for k,v in dfEmpCate.iterrows():    
    fig.add_trace(go.Bar(x=['Attitudes by Categories'], y=[v['avgTmp']], name="Attitudes by Categories", 
                         text=v['Q8'],marker_color='aqua')) 

fig.update_layout(
    barmode='group',
    yaxis = dict(tickmode='array', range=[0,14], linecolor='black'),    
    xaxis = dict(tickmode='array', tickangle=0, linecolor='black',tickson="labels",ticks="outside"),
    title_text='Attitude Experience', title_x=0.5,title_y=1.,
    margin=dict(l=20, r=20, t=20, b=20))

fig.update_traces(marker_line_width=1, opacity=0.7, outsidetextfont=dict(size=50),
                  textposition='outside', textangle=90)
fig.show()

Thanks all