Axes label wrap produce incorrect bar plots when combined with offset

[dafxy]

What happened?

When we wrap the text and try to use it with layer, fill, and facet, the plot created is all incorrect.

# data
import altair as alt
import pandas as pd
import textwrap 

x = ['a long long long  long long long title', 'a long long long  long long long title',
     'a long long long  long long long title', 'a long long long  long long long title',
     'another long long long title', 'another long long long title',
     'another long long long title', 'another long long long title']
df = pd.DataFrame({
    'y': [10, 20, 30 , 40] * 2,
    'x': x,
    'fill' :  ['a', 'b', 'a', 'b'] * 2,
    'facet' : ['case 1', 'case 1', 'case 2', 'case 2'] * 2
})
df_wrapped = df.copy()
df_wrapped['x'] = [s.split(' ') for s in df['x']]

This works as intended for the bar and text in the plot, but the labels are not readable:

# without wrapping the labels
x         = 'x'
y         = 'y'
fill      = 'fill'
facet     = 'facet'
dodge     = 0.6
base = (alt.Chart(df))
bar = (base.mark_bar()
       .encode(
           x       = alt.X(x).axis(labelAngle=0),
           y       = alt.Y(y),
           fill    = alt.Fill(fill),
           xOffset = alt.XOffset(fill),
       ))
txt = (base.mark_text(dy=-5, size=10)
       .encode(
           x       = alt.X(x),
           y       = alt.Y(y),
           text    = alt.Text(y).format(f'.2f'),
           fill    = alt.Fill(fill),
           xOffset = alt.XOffset(fill),
       ))
g = (alt.layer(bar, txt)
     .properties(width=300, height=250)
     .facet(facet=alt.Facet(facet), columns=2)
     .resolve_scale(
         x='independent',
         xOffset = 'independent'
     )
     )

If we wrap the labels, the bars and text are incorrectly placed in the plot:

# wrapping the labels
x         = 'x'
y         = 'y'
fill      = 'fill'
facet     = 'facet'
dodge     = 0.6
base = (alt.Chart(df_wrapped))
bar = (base.mark_bar()
       .encode(
           x       = alt.X(x).axis(labelAngle=0),
           y       = alt.Y(y),
           fill    = alt.Fill(fill),
           xOffset = alt.XOffset(fill),
       ))
txt = (base.mark_text(dy=-5, size=10)
       .encode(
           x       = alt.X(x),
           y       = alt.Y(y),
           text    = alt.Text(y).format(f'.2f'),
           fill    = alt.Fill(fill),
           xOffset = alt.XOffset(fill),
       ))
g = (alt.layer(bar, txt)
     .properties(width=300, height=250)
     .facet(facet=alt.Facet(facet), columns=2)
     .resolve_scale(
         x='independent',
         xOffset = 'independent'
     )
     )

What would you like to happen instead?

No response

Which version of Altair are you using?

No response

[dafxy]

Any news on this?

[mattijn]

Reproducible in Vega-Lite.
This works:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.21.0.json",
  "data": {
    "values": [
        {"x": "lorem ipsum", "y": 1, "offset": "foo"},
        {"x": "dolor sit", "y": 2, "offset": "foo"},
        {"x": "lorem ipsum", "y": 3, "offset": "bah"},
        {"x": "dolor sit", "y": 4, "offset": "bah"}
 ]
  },
  "mark": {"type": "bar"},
  "encoding": {
    "color": {"field": "offset", "type": "nominal"},
    "x": {"axis": {"labelAngle": 0}, "field": "x", "type": "nominal"},
    "xOffset": {"field": "offset", "type": "nominal"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

Open the Chart in the Vega Editor

---

This doesn't:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.21.0.json",
  "data": {
    "values": [
      {"x": [["lorem "], ["ipsum "]], "y": 1, "offset": "foo"},
      {"x": [["dolor "], ["sit "]], "y": 2, "offset": "foo"},
      {"x": [["lorem "], ["ipsum "]], "y": 3, "offset": "bah"},
      {"x": [["dolor "], ["sit "]], "y": 4, "offset": "bah"}
    ]
  },
  "mark": {"type": "bar"},
  "encoding": {
    "color": {"field": "offset", "type": "nominal"},
    "x": {"axis": {"labelAngle": 0}, "field": "x", "type": "nominal"},
    "xOffset": {"field": "offset", "type": "nominal"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

Open the Chart in the Vega Editor

[domoritz]

Still repros but shouldn't it be Open the Chart in the Vega Editor?