How to make a Tick the same width as a Bar - vega-lite

Question

I have this spec : Direct-link to spec
I would like to make the tick as large as the bar in a generic way (If the size of the view change I’d like that the width of the tick changes as well). Is it a way to do this ? By doing some transform or accessing some hidden variable (stepWidth ?) ? I don’t want to set my view size by setting the step size because I want that my chart fits in an already defined DOM element.

Answer 1

I am not aware of any way to configure tick marks in this way. But one way to achieve what you want is to overlay a zero-height bar with the stroke (i.e. outline) configured to look how you want. For example (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"datasets": {
"$ly1": [
{
"Continent": "Asia",
"Population": 4467162
},
{
"Continent": "Europe",
"Population": 622209
},
{
"Continent": "Africa",
"Population": 1157519
},
{
"Continent": "Oceania",
"Population": 36944
},
{
"Continent": "North America",
"Population": 564626
},
{
"Continent": "Antarctica",
"Population": 6
},
{
"Continent": "South America",
"Population": 410308
}
]
},
"data": {
"name": "$ly1"
},
"autosize": {
"type": "fit",
"contains": "padding"
},
"width": {"step": 60},
"encoding": {
"x": {
"field": "Continent",
"type": "nominal"
},
"y": {
"field": "Population",
"type": "quantitative"
}
},
"layer": [
{
"mark": {
"type": "bar",
"color": "#ccc"
}
},
{
"mark": {
"type": "bar", "strokeWidth": 3
},
"encoding": {
"y2": {"field": "Continent"},
"stroke" : {
"field": "Continent",
"type": "nominal"
},
"color" : {
"field": "Continent",
"type": "nominal"
}
}
}
]
}