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