How to make ticks fill the band width in Vega-lite - vega-lite

Question

I'm trying to use tick marks to separate a stacked bar but I can't figure out how to make the tick marks full width of the responsive bar mark (example).
The reason I am doing this is I want the ticks to look like separators between the stacked bars. Another approach I have tried is setting stroke (example) on the bar mark but this adds a border to the left and right of the bars which I don't want. I only want the separator to be between two bars vertically.

Answer 1

You can simply add the width config inside your mark objects.
Refer the below config or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
"width": "container",
"data": {"url": "data/cars.json"},
"layer": [
{
"mark": {"type": "bar", "width": 50},
"encoding": {
"y": {"field": "Horsepower", "type": "quantitative"},
"x": {"field": "Cylinders", "type": "ordinal"}
}
},
{
"mark": {"type": "tick", "color": "tomato", "width": 50},
"encoding": {
"y": {"field": "Horsepower", "type": "quantitative", "stack": true},
"x": {"field": "Cylinders", "type": "ordinal"}
}
}
]
}