Search code examples
vega-lite

Share x axes in a vega-lite concatenated plot when one subplot is using timeunit and aggregation in the encoding

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

enter image description here

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

enter image description here

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.

Solution

  • 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