diff --git a/examples/compiled/bar_size_relative_band.png b/examples/compiled/bar_size_relative_band.png
new file mode 100644
index 00000000000..abf0ef6164c
Binary files /dev/null and b/examples/compiled/bar_size_relative_band.png differ
diff --git a/examples/compiled/bar_size_relative_band.svg b/examples/compiled/bar_size_relative_band.svg
new file mode 100644
index 00000000000..933f99129e2
--- /dev/null
+++ b/examples/compiled/bar_size_relative_band.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/compiled/bar_size_relative_band.vg.json b/examples/compiled/bar_size_relative_band.vg.json
new file mode 100644
index 00000000000..c4385a9a2da
--- /dev/null
+++ b/examples/compiled/bar_size_relative_band.vg.json
@@ -0,0 +1,122 @@
+{
+ "$schema": "https://vega.github.io/schema/vega/v5.json",
+ "description": "A simple bar chart with embedded data.",
+ "background": "white",
+ "padding": 5,
+ "height": 200,
+ "style": "cell",
+ "data": [
+ {
+ "name": "source_0",
+ "values": [
+ {"a": "A", "b": 28},
+ {"a": "B", "b": 55},
+ {"a": "C", "b": 43},
+ {"a": "D", "b": 91},
+ {"a": "E", "b": 81},
+ {"a": "F", "b": 53},
+ {"a": "G", "b": 19},
+ {"a": "H", "b": 87},
+ {"a": "I", "b": 52}
+ ]
+ },
+ {
+ "name": "data_0",
+ "source": "source_0",
+ "transform": [
+ {
+ "type": "stack",
+ "groupby": ["a"],
+ "field": "b",
+ "sort": {"field": [], "order": []},
+ "as": ["b_start", "b_end"],
+ "offset": "zero"
+ },
+ {
+ "type": "filter",
+ "expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
+ }
+ ]
+ }
+ ],
+ "signals": [
+ {"name": "x_step", "value": 20},
+ {
+ "name": "width",
+ "update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
+ }
+ ],
+ "marks": [
+ {
+ "name": "marks",
+ "type": "rect",
+ "style": ["bar"],
+ "from": {"data": "data_0"},
+ "encode": {
+ "update": {
+ "fill": {"value": "#4c78a8"},
+ "ariaRoleDescription": {"value": "bar"},
+ "description": {
+ "signal": "\"a: \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; b: \" + (format(datum[\"b\"], \"\"))"
+ },
+ "xc": {"scale": "x", "field": "a", "band": 0.5},
+ "width": {"value": {"band": 0.5}},
+ "y": {"scale": "y", "field": "b_end"},
+ "y2": {"scale": "y", "field": "b_start"}
+ }
+ }
+ }
+ ],
+ "scales": [
+ {
+ "name": "x",
+ "type": "band",
+ "domain": {"data": "data_0", "field": "a", "sort": true},
+ "range": {"step": {"signal": "x_step"}},
+ "paddingInner": 0.1,
+ "paddingOuter": 0.05
+ },
+ {
+ "name": "y",
+ "type": "linear",
+ "domain": {"data": "data_0", "fields": ["b_start", "b_end"]},
+ "range": [{"signal": "height"}, 0],
+ "nice": true,
+ "zero": true
+ }
+ ],
+ "axes": [
+ {
+ "scale": "y",
+ "orient": "left",
+ "gridScale": "x",
+ "grid": true,
+ "tickCount": {"signal": "ceil(height/40)"},
+ "domain": false,
+ "labels": false,
+ "aria": false,
+ "maxExtent": 0,
+ "minExtent": 0,
+ "ticks": false,
+ "zindex": 0
+ },
+ {
+ "scale": "x",
+ "orient": "bottom",
+ "grid": false,
+ "title": "a",
+ "labelAngle": 0,
+ "labelBaseline": "top",
+ "zindex": 0
+ },
+ {
+ "scale": "y",
+ "orient": "left",
+ "grid": false,
+ "title": "b",
+ "labelOverlap": true,
+ "tickCount": {"signal": "ceil(height/40)"},
+ "zindex": 0
+ }
+ ]
+}
diff --git a/examples/compiled/bar_width_relative_band_size.png b/examples/compiled/bar_width_relative_band_size.png
new file mode 100644
index 00000000000..95a29f5e808
Binary files /dev/null and b/examples/compiled/bar_width_relative_band_size.png differ
diff --git a/examples/compiled/bar_width_relative_band_size.svg b/examples/compiled/bar_width_relative_band_size.svg
new file mode 100644
index 00000000000..91f38da71af
--- /dev/null
+++ b/examples/compiled/bar_width_relative_band_size.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/compiled/bar_width_relative_band_size.vg.json b/examples/compiled/bar_width_relative_band_size.vg.json
new file mode 100644
index 00000000000..dd80f86cb8e
--- /dev/null
+++ b/examples/compiled/bar_width_relative_band_size.vg.json
@@ -0,0 +1,122 @@
+{
+ "$schema": "https://vega.github.io/schema/vega/v5.json",
+ "description": "A simple bar chart with embedded data.",
+ "background": "white",
+ "padding": 5,
+ "height": 200,
+ "style": "cell",
+ "data": [
+ {
+ "name": "source_0",
+ "values": [
+ {"a": "A", "b": 28},
+ {"a": "B", "b": 55},
+ {"a": "C", "b": 43},
+ {"a": "D", "b": 91},
+ {"a": "E", "b": 81},
+ {"a": "F", "b": 53},
+ {"a": "G", "b": 19},
+ {"a": "H", "b": 87},
+ {"a": "I", "b": 52}
+ ]
+ },
+ {
+ "name": "data_0",
+ "source": "source_0",
+ "transform": [
+ {
+ "type": "stack",
+ "groupby": ["a"],
+ "field": "b",
+ "sort": {"field": [], "order": []},
+ "as": ["b_start", "b_end"],
+ "offset": "zero"
+ },
+ {
+ "type": "filter",
+ "expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
+ }
+ ]
+ }
+ ],
+ "signals": [
+ {"name": "x_step", "value": 20},
+ {
+ "name": "width",
+ "update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
+ }
+ ],
+ "marks": [
+ {
+ "name": "marks",
+ "type": "rect",
+ "style": ["bar"],
+ "from": {"data": "data_0"},
+ "encode": {
+ "update": {
+ "fill": {"value": "#4c78a8"},
+ "ariaRoleDescription": {"value": "bar"},
+ "description": {
+ "signal": "\"a: \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; b: \" + (format(datum[\"b\"], \"\"))"
+ },
+ "x": {"scale": "x", "field": "a", "band": 0.25},
+ "width": {"signal": "max(0.25, 0.5 * bandwidth('x'))"},
+ "y": {"scale": "y", "field": "b_end"},
+ "y2": {"scale": "y", "field": "b_start"}
+ }
+ }
+ }
+ ],
+ "scales": [
+ {
+ "name": "x",
+ "type": "band",
+ "domain": {"data": "data_0", "field": "a", "sort": true},
+ "range": {"step": {"signal": "x_step"}},
+ "paddingInner": 0.1,
+ "paddingOuter": 0.05
+ },
+ {
+ "name": "y",
+ "type": "linear",
+ "domain": {"data": "data_0", "fields": ["b_start", "b_end"]},
+ "range": [{"signal": "height"}, 0],
+ "nice": true,
+ "zero": true
+ }
+ ],
+ "axes": [
+ {
+ "scale": "y",
+ "orient": "left",
+ "gridScale": "x",
+ "grid": true,
+ "tickCount": {"signal": "ceil(height/40)"},
+ "domain": false,
+ "labels": false,
+ "aria": false,
+ "maxExtent": 0,
+ "minExtent": 0,
+ "ticks": false,
+ "zindex": 0
+ },
+ {
+ "scale": "x",
+ "orient": "bottom",
+ "grid": false,
+ "title": "a",
+ "labelAngle": 0,
+ "labelBaseline": "top",
+ "zindex": 0
+ },
+ {
+ "scale": "y",
+ "orient": "left",
+ "grid": false,
+ "title": "b",
+ "labelOverlap": true,
+ "tickCount": {"signal": "ceil(height/40)"},
+ "zindex": 0
+ }
+ ]
+}