How do I get complete interval tick grid for top most value in VegaLite

Question

I found a scenario in which grid lines not come if highest value is more than the last tick value on y axis.

How do I dynamically make it complete interval? Max value is 110, but tick grid is only up to 100 - how can I make it such that complete interval is form and grid visible for upper max value dynamically

Editor link

Answer 1

Try this. Adjust the value 1.05 to suit your requirements.

{"name": "max", "expr": "extents[1] * 1.05"}

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 110},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53},
      {"a": "G", "b": 19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52}
    ]
  },
  "params": [
    {"name": "extents", "expr": "extent(pluck(data('source_0'), 'b'))"},
    {"name": "max", "expr": "extents[1] * 1.05"}
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {
      "field": "b",
      "type": "quantitative",
      "scale": {"domain": {"expr": "[0,max]"}}
    }
  }
}