Add `tickStep` property of axis
Enhancement Description
Other dataviz tools allow the user to specify an exact value between ticks. I do not see this option in Vega-lite, and I can't find a reasonable workaround for this.
Option 1 is to manually specify the number of ticks to back into the desired size. However, this requires the user to know in advance the scale of the data, and manually update the spec if the data changes. This is not an acceptable solution. Option 2 is the "tickMinSize" property of an axis that can force the ticks to be spaced further apart than the default, but there is no way I can find to force the ticks to be spaced more closely together.
For example, this chart is rendered by default with tick distance of 10.
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
Here is an example of how I would modify this:
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y":
{
"field": "b",
"type": "quantitative",
"axis": {"tickStep": 5}
}
}
}
Another alternative would be to provide a "tickMaxStep":
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y":
{
"field": "b",
"type": "quantitative",
"axis": {"tickMaxStep": 5}
}
}
}
I searched for similar issues and found https://github.com/vega/vega-lite/issues/3969 mentioning that there used to be a tickStep property but it was removed, but I can't find any more information about that.
Instead of setting the tick step, you can set the tick count: Open the Chart in the Vega Editor. You can also use an expression if you want it to be seize dependent: Open the Chart in the Vega Editor.
Is that sufficient?
Not necessarily. Sometimes you want your ticks to be nice round numbers, e.g. 5%, 10%, 15%, 20% and you don't know in advance how big your range is going to be. Would be nice to be able to force that behavior.
Even with tickCount, Vega automatically applie nicing to the ticks (unless disabled).
An expression can also access the scale so you can get the domain. Would that be enough to do what you want?
I'm not agianst extending Vega but I want to make sure it's not already covered by another convenient enough option or at least know how we might implemnet such a feature.