In the plot, I would like to show the sum of amount
per quarter in one subplot and in the other subplot I would like to show each data row represented as a point with the y axis being the value
and x axis being date
. Like this
But I cannot get the x axes of both subplots to be aligned automatically, after all they show dates (or date ranges) that can be aligned logically.
In the Vega editor example here the x axes are not aligned and do also not pan and zoom together. How could that be achieved?
{
"data": {
"values": [
{"date": "2024-02-15", "amount": 20, "value": 100},
{"date": "2024-05-15", "amount": 40, "value": 90},
{"date": "2024-06-15", "amount": 5, "value": 125},
{"date": "2024-08-15", "amount": 10, "value": 120},
{"date": "2024-11-15", "amount": 15, "value": 115}
]
},
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
"vconcat": [
{
"encoding": {
"x": {"field": "date", "timeUnit": {"unit": "yearquarter", "step": 1},
"type": "temporal"},
"y": {"field": "amount", "type": "quantitative", "aggregate": "sum"}
},
"mark": "bar"
},
{
"encoding": {
"y": {"field": "value", "type": "quantitative"},
"x": {"field": "date", "type": "temporal"}
},
"mark": "point"
}
]
}
This is how the plot should look like with aligned axes. I only manage to get there by manually setting axis limits and separated pan and zooming behavior for each plot. See Vega-Lite editor
The target is that zooming and panning in one subplot is also applied to the other subplots x axis. I have already tried various different combinations of encodings but did not succeed.
Found the solution, this can be done with resolve even though the documentation says that shared axes does not work for concatenated plots. I'll open an issue with Vega-Lite to adress that
...
"resolve": {"scale": {"x": "shared"}}
...
See the example in the vega online editor