How to make a Tick the same width as a Bar

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.

Solution

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"
        }
      }
    }
  ]
}