How to sort stacked bar chart in descending order?

[levinaanora]

Hi all, currently I am creating a stacked bar chart and I don't have any idea why my chart cannot be sorted in descending order eventhough I already use the .sort(-x).
Is there any solution for this? This is the code sample to reproduce:

import pandas as pd
import streamlit as st
import altair as alt

data = {"Country": ['Indonesia', 'Indonesia', 'Japan', 'Japan', 'Korea', 'Korea'],
    "Unit": [5,5,6,10,1,4],
    "Variant": ['Lemon', 'Vanilla', 'Chocolate', 'Vanilla', 'Lemon', 'Chocolate']}
dummy = pd.DataFrame(data)
chart = alt.Chart(dummy).mark_bar().encode(
    x=alt.X('sum(Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    color=alt.Color('Variant:N', title='Variant', legend=None),
    tooltip=[alt.Tooltip('sum(Unit):Q', title='Total Unit', format=',d'),
            alt.Tooltip('Variant:N', title='Variant'),
            alt.Tooltip('Country:N', title='Country')],
    order=alt.Order('sum(Unit):Q', sort='descending')
).properties(height=350)

chart_data = dummy.groupby('Country')['Unit'].sum().reset_index(name = 'Total Unit')
text = alt.Chart(chart_data).mark_text(align='center', dx=10).encode(
    x=alt.X('sum(Total Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    text=alt.Text('sum(Total Unit):Q')
)
st.altair_chart(chart + text, use_container_width=True)

The result with this code is in the picture below:

[d-trigo]

So not entirely sure about the underlying causes of how it occurred, but I think there was a conflict between the two datasets created (the first one being the per-variant sales per-country and the other being the all-variant sales per country) where Altair got confused when merging them for the image output in terms of getting the sorting; running the chart and text graphs separately the countries do appear in descending order in either case, but the incorrect sorting order only occurs when you combine the graph and text elements into one. Assuming I'm interpreting your request to get the countries sorted by their Total Units in descending order, I used this in order to see if I could get the total unit calculation into the original dataframe so that Altair could have a single DF to rely on (note that I didn't use Streamlit here but I believe the results should be replicable when you pass it into there):

dummy['Total Unit'] = dummy.groupby('Country')['Unit'].transform('sum')

chart = alt.Chart(dummy).mark_bar().encode(
    x=alt.X('sum(Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    color=alt.Color('Variant:N', title='Variant', legend=None),
    tooltip=[alt.Tooltip('sum(Unit):Q', title='Total Unit', format=',d'),
            alt.Tooltip('Variant:N', title='Variant'),
            alt.Tooltip('Country:N', title='Country')],
    order=alt.Order('sum(Unit):Q', sort='descending')
).properties(height=350)

text = alt.Chart(dummy).mark_text(align='center', dx=10).encode(
    x=alt.X('Total Unit:Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    text=alt.Text('Total Unit:Q')
)

chart + text

In this case I passed the total unit calculations into a separate column within the original dummy dataframe and I think that did the job:

[levinaanora]

Thank you for your help!!! I applied your provided example in my real case and it works well!

[levinaanora]

btw, it seems that the text is stacked each other, I wonder if the Japan one have more than 2 variants, will the text be more bold? I feel that in my case the bar that have stack will be more bold than the bar with no stack.

[d-trigo]

You're right, it's subtle but it does get a bit bolder when we add another variant due to the overlap:

data = {"Country": ['Indonesia', 'Indonesia', 'Japan', 'Japan', 'Japan', 'Korea', 'Korea'],
    "Unit": [5,5,6,10,4,1,4],
    "Variant": ['Lemon', 'Vanilla', 'Chocolate', 'Vanilla', 'Pistachio', 'Lemon', 'Chocolate']}

dummy = pd.DataFrame(data)

dummy['Total Unit'] = dummy.groupby('Country')['Unit'].transform('sum')

chart = alt.Chart(dummy).mark_bar().encode(
    x=alt.X('sum(Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    color=alt.Color('Variant:N', title='Variant', legend=None),
    tooltip=[alt.Tooltip('sum(Unit):Q', title='Total Unit', format=',d'),
            alt.Tooltip('Variant:N', title='Variant'),
            alt.Tooltip('Country:N', title='Country')],
    order=alt.Order('sum(Unit):Q', sort='descending')
).properties(height=350)

text = alt.Chart(dummy).mark_text(align='center', dx=10).encode(
    x=alt.X('Total Unit:Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    text=alt.Text('Total Unit:Q')
)

chart + text

(picture with zoom)

A potential solution here would be similar to your original version in using sum(Column):Q; it might be something where for table display purposes you keep the total sum column to show the amount of sales per country (you could also use .agg to do this if you prefer a separate summary) but if you're making the actual graph, you would ask Altair to do the sum only per country rather than fetching duplicate values had we used a column instead:

data = {"Country": ['Indonesia', 'Indonesia', 'Japan', 'Japan', 'Japan', 'Korea', 'Korea'],
    "Unit": [5,5,6,10,4,1,4],
    "Variant": ['Lemon', 'Vanilla', 'Chocolate', 'Vanilla', 'Pistachio', 'Lemon', 'Chocolate']}

dummy = pd.DataFrame(data)

dummy['Total Unit'] = dummy.groupby('Country')['Unit'].transform('sum') #in this for display only, not for graph
#alternatively: dummy_agg = dummy.groupby('Country')['Unit'].agg('sum') if you want to create sep. display table like you first did


chart = alt.Chart(dummy).mark_bar().encode(
    x=alt.X('sum(Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    color=alt.Color('Variant:N', title='Variant', legend=None),
    tooltip=[alt.Tooltip('sum(Unit):Q', title='Total Unit', format=',d'),
            alt.Tooltip('Variant:N', title='Variant'),
            alt.Tooltip('Country:N', title='Country')],
    order=alt.Order('sum(Unit):Q', sort='descending')
).properties(height=350)

text = alt.Chart(dummy).mark_text(align='center', dx=10).encode(
    x=alt.X('sum(Unit):Q', title='Total Unit', axis=alt.Axis(format='d')),
    y=alt.Y('Country:N', title='Country').sort('-x'),
    text=alt.Text('sum(Unit):Q')
)

chart + text

Assuming I'm looking at this correctly, the overlap should be fixed:

Edit note: Edited to provide the correct version of the code where the text had overlapped.

[levinaanora]

Thank you for your help!! It works well!