Sort order of horizontal bar chart

🧩 Custom Components
1

Hi there, first time poster and beginner using Streamlit.

I’m using an Altair bar chart and I want to order the bars according to their size, i.e. the largest bar should be at the top, the smallest at the bottom. I’m using the code below but its not sorting by bar size. I can get it to sort ascending or descending by Y axis label.

        top_consuming_wh_bars = alt.Chart(top_consuming_wh_df).mark_bar(color='#29B5E8', size=7).encode(
            alt.X('CREDITS:Q', axis=None, sort='-y'),
            alt.Y('WAREHOUSE_NAME:N', axis=None),
            alt.Tooltip(['WAREHOUSE_NAME'], title="Warehouse"),
        )

        top_consuming_wh_labels = top_consuming_wh_bars.mark_text(
            align='left',
            baseline='middle',
            dx=7
        ).encode(
            text='CREDITS:Q'
        )

        top_consuming_wh_chart = top_consuming_wh_bars #+ top_consuming_wh_labels

        st.altair_chart(
            top_consuming_wh_chart.configure_view(
                strokeWidth=0
            ),
            use_container_width=True
        )
2

Hi @peter.aubrey,

What happens if you pass the chart directly to st.altair_chart rather than doing the extra work with top_consuming_wh_bars and top_consuming_wh_chart? Is it correctly sorted then? I’m wondering if the sort param is getting dropped somewhere along the way.

Caroline