[Python] Separating text chart and bar chart [altair, streamlit]

Currently working on a streamlit project, when I started to make a bar chart with altair, I need a grouped bar graph with a text on top, something like this: What I expect to develop, a bar graph, grouped by store and with a label on top describing the difference between the two bars on the group But what I got was something like this: What I got, it is a grouped bar chart, but all values of the labels are stacked and on every group

What I am currently coding looks something like this:

bars = alt.Chart().encode(
x=selected_actual,
y=alt.Y(" ", axis=alt.Axis(tickSize=0, labelFontSize=0, title="")),
color=" ",
tooltip= [alt.Tooltip("Nombre de Tienda", title = "Tienda"),
alt.Tooltip(shorthand=selected_actual, format=",.4r")]
).properties(height=50)

text=alt.Chart(df_Total[df_Total[" "]=='Diferencia']).encode(
y="Nombre de Tienda",
x=selected_actual,
text=alt.Text(selected_actual, format=".2%", aggregate='min'),
)

combined = alt.layer(bars.mark_bar(), text.mark_text(size=15, dx=10, dy=0, align='left'))
c = combined.facet(data=df_Total, row=alt.Row("Nombre de Tienda", title='', header=alt.Header(labelAngle=-55, labelAnchor='end')))

st.altair_chart(c)


I do not completely understand how altair works, is there a simpler way to do this? that can show a tooltip on hover, I tried matplotlib, but it does not contemplate the interactions. I would greatly appreciate your help!

Continue reading...