Adding Axis padding/inner margin to Vega-Lite chart

Question

I have a created a vega-lite scatterplot chart. The data for this chart will always be positive, however it is often zero. In this application, it would be helpful for the user for points who's x or y are zero to not overlap with the lines for the axis

The straightforward solution is to try and manually adjust the domain and range to start before 0 and after the maximum value. However, I'd like to know if there is a way to do this in the configuration instead. I have read through the documentation and, to my knowledge and ability, I have not yet found such a solution.

Answer 1

If you want to ensure that the lowest point does not overlap the axis, one way to do so is to use the axis "offset" property, which allows you to specify the horizontal offset of the y-axis in pixels. For example (open in editor):

{
  "data": {
    "values": [
      {"x": 0, "y": 2},
      {"x": 1, "y": 4},
      {"x": 2, "y": 3},
      {"x": 3, "y": 5},
      {"x": 4, "y": 4}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "axis": {"offset": 20}}
  }
}