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.

user_2937831 · Answer

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

user_2166823 · Answer

In addition to adjusting the domain and adding an axis offset, you can use the scale config properties to add padding for all scales of a certain type. This will add some whitespace between the axis lines and the location of the closest data points:

{
  "config": {
    "scale": {"continuousPadding": 5}
  },
  "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"}
  }
}

Adding Axis padding/inner margin to Vega-Lite chart

2 Answers