Manipulating position of barchart on sidebar

[Bahir_Zaheri]

st.sidebar.write(“[Reload App](” + redirect_uri + “)”)
st.sidebar.write(“Credits Usage”)
st.sidebar.write(f"{credits_message}")

with st.sidebar:

fig = px.bar(df, x=['Category 1', 'Category 2'], y='Credits Remaining', barmode='stack', orientation='h',
            color_discrete_map={'Category 1': 'green', 'Category 2': 'grey'},
            height=165,width=230)

fig.update_xaxes(title='', anchor='free', showticklabels=False,position=0)
fig.update_yaxes(title='', showticklabels=False) 
fig.update_layout(showlegend=False)
fig.update_traces(
hovertemplate=None, hoverinfo='skip')


# Add the percentage as text on top of the 'Category 1' bar
fig.add_annotation(x=credits_used, y=0, text=f'{percentage_used:.2f}%', showarrow=False,
                font=dict(color='black', size=15), xshift=0, yshift=0)

st.plotly_chart(fig,config={'displayModeBar': False,"staticPlot":True})

So I am trying to create a “API credits remaining” progress bar inside the side bar and I am using a bar chart to do this. The progress bar is working fine but it is positioned awkwarldy (see image). How can I manipulate it to move it further to the left?

I am running app locally.