Vega-lite limiting the number of ticks with ordinal type

Question

I have used an example of Vega-lite bar chart in which I have a Major Genre on x-axis and y-axis is showing the count.

Below is the vega-lite configuration:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A dashboard with cross-highlighting.",
  "data": {"url": "data/movies.json"},
  "width": 330,
  "height": 120,
  "mark": "bar",
  "selection": {"pts": {"type": "single", "encodings": ["x"]}},
  "encoding": {
    "x": {
      "field": "Major Genre",
      "type": "ordinal",
      "axis": {"labelAngle": 0, "labelOverlap": "parity"}
    },
    "y": {"aggregate": "count"},
    "color": {
      "condition": {"selection": "pts", "value": "steelblue"},
      "value": "grey"
    }
  }
}

In this, I have used labelOverlap config in x-axis to avoid overlapping of labels, so with this now am having limited number of label names. I want to reduce the number of ticks of x-axis which should be equal to the labels. I tried using tickCount config but it seems to work on quantitative and temporal types of field. Also when we use temporal then the date fields show limited no. of labels and ticks. So this type of behaviour is what I want to achieve with nominal and ordinal type.

Answer 1

The only way I'm aware of to reduce the number of ticks in a nominal or ordinal axis is to either set "ticks": false to hide all ticks, or to explicitly set the visible ticks using the "values" entry. Here is an example of the latter (open in editor):

{
  "data": {"url": "data/movies.json"},
  "width": 330,
  "height": 120,
  "mark": "bar",
  "selection": {"pts": {"type": "single", "encodings": ["x"]}},
  "encoding": {
    "x": {
      "field": "Major Genre",
      "type": "ordinal",
      "axis": {
        "labelAngle": 0,
        "labelOverlap": "parity",
        "values": [null, "Comedy", "Horror", "Western"]
      }
    },
    "y": {"aggregate": "count"},
    "color": {
      "condition": {"selection": "pts", "value": "steelblue"},
      "value": "grey"
    }
  }
}

Answer 2

I had to create another layer with x-axis in which am hiding the label names and added another data object which will have some dummy records. This is not a proper approach but it seems to satisfy my use case. So the extra layer will do the job of showing the ticks no matter the main data labels. Below is the modified vega-lite config:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A dashboard with cross-highlighting.",
  "data": {"url": "data/movies.json"},
  "width": 320,
  "height": 120,
  "layer": [
    {
      "mark": "bar",
      "selection": {"pts": {"type": "single", "encodings": ["x"]}},
      "encoding": {
        "x": {
          "field": "Major Genre",
          "type": "ordinal",
          "axis": {
            "labelAngle": 0,
            "labelOverlap": "parity",
            "ticks": false,
            "labelPadding": 10
          }
        },
        "y": {"aggregate": "count"},
        "color": {
          "condition": {"selection": "pts", "value": "steelblue"},
          "value": "grey"
        }
      }
    },
    {
      "mark": "text",
      "data": {
        "values": [
          {"Major Genre": "a"},
          {"Major Genre": "b"},
          {"Major Genre": "c"},
          {"Major Genre": "d"}
        ]
      },
      "encoding": {
        "x": {
          "field": "Major Genre",
          "type": "ordinal",
          "axis": {"labels": false, "orient": "bottom", "title": null}
        }
      }
    }
  ],
  "resolve": {"axis": {"x": "independent"}, "scale": {"x": "independent"}}
}