Only show ticks at integer values in Vega Lite

Question

In a graph I'm making using Vega Lite, I'm seeing ticks at 0.5 steps, even though the data will only include integer values. Is there a way to set this in Vega Lite? I tried looking for something like "minimum tick step", or something similar in the docs, but I couldn't find anything like that.

Answer 1

There are a couple ways to do this, depending on what your situation is. For example, consider this chart:

{
  "data": {
    "values": [
      {"x": 1, "y": 1},
      {"x": 2, "y": 3},
      {"x": 3, "y": 4},
      {"x": 4, "y": 2}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"type": "quantitative", "field": "x"},
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 400
}

If all of your values are integers and you only care about integers, it might be that your data are better represented by ordinal values (i.e. ordered categorical data). If so, you can remove the ticks by specifying an ordinal type:

{
  "data": {
    "values": [
      {"x": 1, "y": 1},
      {"x": 2, "y": 3},
      {"x": 3, "y": 4},
      {"x": 4, "y": 2}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"type": "ordinal", "field": "x"},
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 400
}

If you want your data to be represented as quantitative, but just want to adjust the tick spacing, you can use the axis.tickMinStep property:

{
  "data": {
    "values": [
      {"x": 1, "y": 1},
      {"x": 2, "y": 3},
      {"x": 3, "y": 4},
      {"x": 4, "y": 2}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"type": "quantitative", "field": "x", "axis": {"tickMinStep": 1}},
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 400
}