Why does creating a layered bar chart remove sorting?

Question

I'm trying to use Altair to create a stacked bar chart. I would like to label each bar with the percent of the total of all bars in descending order. Here's how I create two layers (one for the bars, one for the labels):

import pandas as pd
import altair as alt

df1 = pd.DataFrame({'a': list('AAAABBBB'),
                    'b': list('xxyyxxyy'),
                    'c': [2, 7, 4, 1, 2, 6, 8, 4]})

df2 = df1.groupby('a', as_index=False).sum()
df2['pct'] = (df2['c'] / df2['c'].sum()).round(2)

bars = alt.Chart(df1).mark_bar().encode(
    x=alt.X('c', scale=alt.Scale(domain=[0, 22])),
    y=alt.Y('a', sort=alt.EncodingSortField(field='c', order='descending')),
    color='b',
)
text = alt.Chart(df2).mark_text(dx=15).encode(
    x='c',
    y=alt.Y('a', sort=alt.EncodingSortField(field='c', order='descending')),
    text='c'
)

Each layer is sorted in the correct order and looks good. But when I combine them, the sorting is reset and they are no longer sorted descending.

both = bars + text
both

How can I keep the bars sorted when combining layers?

jakevdp jakevdp · Accepted Answer · 2019-10-02T20:09:29

Sorting of unioned domains is not supported in Vega-Lite. If you open the javascript console for your chart, or if you view it in the vega editor, you'll see the warning that Vega-Lite produces:

[Warning] Dropping sort property {"field":"c","op":"sum","order":"descending"} as unioned domains only support boolean or op "count".
[Warning] Dropping sort property {"field":"c","op":"mean","order":"descending"} as unioned domains only support boolean or op "count".

The relevant Vega-Lite bug is here: https://github.com/vega/vega-lite/issues/5048.

You can avoid this if you build both layers from the same dataset; for example:

bars = alt.Chart(df1).mark_bar().encode(
    x=alt.X('c:Q', scale=alt.Scale(domain=[0, 22])),
    y=alt.Y('a:N', sort=alt.EncodingSortField(field='c', op='sum', order='descending')),
    color='b:N',
)

text = alt.Chart(df1).mark_text(dx=15).encode(
    x='sum(c):Q',
    y=alt.Y('a:N', sort=alt.EncodingSortField(field='c', op='sum', order='descending')),
    text=alt.Text('sum(c):Q')
)

bars + text

Why does creating a layered bar chart remove sorting?

1 Answers