Horizontal Bar chart collapsed in 5.16.1

[kmcgrady]

Bug Description

We noticed an issue with our horizontal bar charts after upgrading Vega-Lite to the latest version. Doing some Git bisecting, we can tie the change to 5.16.1 which makes me think something is going on from #9135 @kanitw perhaps you have some idea on what's going on?

For what it's worth, this chart is generated in Altair in Streamlit with a Y Offset (See streamlit/streamlit#9604).

df = pd.DataFrame([
	{ 'name': 'x', 'value': 10 	},
	{ 'name': 'y', 'value': 30 	}
])

ch = alt.Chart(df).mark_bar().encode(
	x = alt.Y('value:Q'),
	yOffset=alt.YOffset('name:N').title(None),
	color = alt.Color('name:N').legend(None)
)

The generated vega-lite spec is below.

{

  "data": {
    "values": [
    {
      "(index)": 0,
      "name": "x",
      "value": 10
    },
    {
      "(index)": 1,
      "name": "y",
      "value": 30
    }
  ]
},
  "mark": {
    "type": "bar"
  },
  "encoding": {
    "color": {
      "field": "name",
      "legend": null,
      "type": "nominal"
    },
    "x": {
      "field": "value",
      "type": "quantitative"
    },
    "yOffset": {
      "field": "name",
      "title": null,
      "type": "nominal"
    }
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.16.1.json",
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "config": {
    "font": "\"Source Sans Pro\", sans-serif",
    "background": "#0e1117",
    "fieldTitle": "verbal",
    "autosize": {
      "type": "fit",
      "contains": "padding"
    },
    "title": {
      "align": "left",
      "anchor": "start",
      "color": "#fafafa",
      "titleFontStyle": "normal",
      "fontWeight": 600,
      "fontSize": 16,
      "orient": "top",
      "offset": 26
    },
    "header": {
      "titleFontWeight": 400,
      "titleFontSize": 16,
      "titleColor": "#e6eaf1",
      "titleFontStyle": "normal",
      "labelFontSize": 12,
      "labelFontWeight": 400,
      "labelColor": "#e6eaf1",
      "labelFontStyle": "normal"
    },
    "axis": {
      "labelFontSize": 12,
      "labelFontWeight": 400,
      "labelColor": "#e6eaf1",
      "labelFontStyle": "normal",
      "titleFontWeight": 400,
      "titleFontSize": 14,
      "titleColor": "#e6eaf1",
      "titleFontStyle": "normal",
      "ticks": false,
      "gridColor": "#31333F",
      "domain": false,
      "domainWidth": 1,
      "domainColor": "#31333F",
      "labelFlush": true,
      "labelFlushOffset": 1,
      "labelBound": false,
      "labelLimit": 100,
      "titlePadding": 16,
      "labelPadding": 16,
      "labelSeparation": 4,
      "labelOverlap": true
    },
    "legend": {
      "labelFontSize": 14,
      "labelFontWeight": 400,
      "labelColor": "#e6eaf1",
      "titleFontSize": 14,
      "titleFontWeight": 400,
      "titleFontStyle": "normal",
      "titleColor": "#e6eaf1",
      "titlePadding": 5,
      "labelPadding": 16,
      "columnPadding": 8,
      "rowPadding": 4,
      "padding": 7,
      "symbolStrokeWidth": 4
    },
    "range": {
      "category": [
        "#83c9ff",
        "#0068c9",
        "#ffabab",
        "#ff2b2b",
        "#7defa1",
        "#29b09d",
        "#ffd16a",
        "#ff8700",
        "#6d3fc0",
        "#d5dae5"
      ],
      "diverging": [
        "#7d353b",
        "#bd4043",
        "#ff4b4b",
        "#ff8c8c",
        "#ffc7c7",
        "#a6dcff",
        "#60b4ff",
        "#1c83e1",
        "#0054a3",
        "#004280"
      ],
      "ramp": [
        "#004280",
        "#0054a3",
        "#0068c9",
        "#1c83e1",
        "#3d9df3",
        "#60b4ff",
        "#83c9ff",
        "#a6dcff",
        "#c7ebff",
        "#e4f5ff"
      ],
      "heatmap": [
        "#004280",
        "#0054a3",
        "#0068c9",
        "#1c83e1",
        "#3d9df3",
        "#60b4ff",
        "#83c9ff",
        "#a6dcff",
        "#c7ebff",
        "#e4f5ff"
      ]
    },
    "view": {
      "columns": 1,
      "strokeWidth": 0,
      "stroke": "transparent",
      "continuousHeight": 350,
      "continuousWidth": 400
    },
    "concat": {
      "columns": 1
    },
    "facet": {
      "columns": 1
    },
    "mark": {
      "tooltip": true,
      "color": "#83C9FF"
    },
    "bar": {
      "binSpacing": 4,
      "discreteBandSize": {
        "band": 0.85
      }
    },
    "axisDiscrete": {
      "grid": false
    },
    "axisXPoint": {
      "grid": false
    },
    "axisTemporal": {
      "grid": false
    },
    "axisXBand": {
      "grid": false
    }
  },
  "padding": {
    "bottom": 20
  }
}

Before (5.16.0)

After (5.16.1)

[joelostblom]

I'll let @kanitw chime in with more details about the previous PR, but I'm curious about the use case for having yOffset without y encoding as in your example. Is there any advantage to this versus using y instead of yOffset, which makes the example look as desired?

[kmcgrady]

@joelostblom Good question (And thanks for the fast response!). I reached out to the original poster of the issue for their reasoning since Streamlit just passes down the altair chart to vega-lite with minor modifications. The example seems like a toy example, so perhaps their use case will be more clear.

[domoritz]

Without a y we should probably treat the y offset as y and show a warning. This could be done in preprocessing. But maybe the original poster had a case with both.