Stacked area

stacked_area.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "ts": "2021-12-07T18:30:00.000Z",
        "ts_position": "2021-12-08T06:30:00.000Z",
        "bin": 0,
        "total_records": 6527,
        "comparison.ts": "2021-11-30T18:30:00.000Z",
        "comparison.ts_position": "2021-12-01T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 1346
      },
      {
        "ts": "2021-12-08T18:30:00.000Z",
        "ts_position": "2021-12-09T06:30:00.000Z",
        "bin": 0,
        "total_records": 6696,
        "comparison.ts": "2021-12-01T18:30:00.000Z",
        "comparison.ts_position": "2021-12-02T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 1186
      },
      {
        "ts": "2021-12-09T18:30:00.000Z",
        "ts_position": "2021-12-10T06:30:00.000Z",
        "bin": 0,
        "total_records": 6721,
        "comparison.ts": "2021-12-02T18:30:00.000Z",
        "comparison.ts_position": "2021-12-03T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 1682
      },
      {
        "ts": "2021-12-10T18:30:00.000Z",
        "ts_position": "2021-12-11T06:30:00.000Z",
        "bin": 0,
        "total_records": 6141,
        "comparison.ts": "2021-12-03T18:30:00.000Z",
        "comparison.ts_position": "2021-12-04T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 1346
      },
      {
        "ts": "2021-12-11T18:30:00.000Z",
        "ts_position": "2021-12-12T06:30:00.000Z",
        "bin": 0,
        "total_records": 6841,
        "comparison.ts": "2021-12-04T18:30:00.000Z",
        "comparison.ts_position": "2021-12-05T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 1426
      },
      {
        "ts": "2021-12-12T18:30:00.000Z",
        "ts_position": "2021-12-13T06:30:00.000Z",
        "bin": 0,
        "total_records": 7262,
        "comparison.ts": "2021-12-05T18:30:00.000Z",
        "comparison.ts_position": "2021-12-06T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 4312
      },
      {
        "ts": "2021-12-13T18:30:00.000Z",
        "ts_position": "2021-12-14T06:30:00.000Z",
        "bin": 0,
        "total_records": 6867,
        "comparison.ts": "2021-12-06T18:30:00.000Z",
        "comparison.ts_position": "2021-12-07T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 5827
      },
      {
        "ts": "2021-12-14T18:30:00.000Z",
        "ts_position": "2021-12-15T06:30:00.000Z",
        "bin": 0,
        "total_records": 1860,
        "comparison.ts": "2021-12-07T18:30:00.000Z",
        "comparison.ts_position": "2021-12-08T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 6527
      },
      {
        "ts": "2021-12-15T18:30:00.000Z",
        "ts_position": "2021-12-16T06:30:00.000Z",
        "bin": 0,
        "total_records": null,
        "comparison.ts": "2021-12-08T18:30:00.000Z",
        "comparison.ts_position": "2021-12-09T06:30:00.000Z",
        "comparison.bin": 0,
        "comparison.total_records": 6696
      }
    ]
  },
  "width": "container",
  "transform": [
    {
      "timeUnit": "yearmonthdate",
      "field": "comparison\\.ts",
      "as": "comparison_ts"
    },
    {"fold": ["ts", "comparison_ts"]},
    {
      "calculate": "(datum['key'] === 'comparison_ts' ? datum['comparison.total_records'] : datum['total_records'])",
      "as": "measure"
    },
    {
      "calculate": "(datum['key'] === 'comparison_ts' ? datum['comparison_ts'] : datum['ts'])",
      "as": "time"
    }
  ],
  "encoding": {
    "x": {
      "field": "ts",
      "type": "temporal",
      "scale": {
        "domain": ["2021-12-08T18:30:00.000Z", "2021-12-15T07:41:59.999Z"]
      },
      "axis": {
        "ticks": false,
        "orient": "top",
        "title": "",
        "formatType": "time",
        "format": "%b %d"
      },
      "timeUnit": "yearmonthdate"
    },
    "y": {
      "field": "measure",
      "type": "quantitative",
      "stack": "zero",
      "axis": {"title": ""}
    },
    "color": {
      "field": "key",
      "type": "nominal",
      "legend": null,
      "scale": {"domain": ["ts", "comparison_ts"], "range": ["blue", "gray"]}
    },
    "order": {"field": "order", "type": "ordinal"}
  },
  "layer": [
    {"mark": {"type": "area", "clip": true, "opacity": 0.7}},
    {"mark": {"type": "line", "strokeWidth": 1, "clip": true}},
    {
      "mark": {"type": "rule", "clip": true},
      "encoding": {
        "color": {
          "condition": {"param": "hover", "empty": false, "value": "red"},
          "value": "transparent"
        },
        "y": {"value": -400},
        "tooltip": [
          {
            "field": "ts",
            "type": "temporal",
            "title": "Time",
            "format": "%b %d, %Y %H:%M"
          },
          {"field": "total_records", "type": "quantitative"},
          {"field": "comparison\\.total_records", "type": "quantitative"}
        ]
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "type": "point",
            "encodings": ["x"],
            "nearest": true,
            "on": "pointerover",
            "clear": "pointerout"
          }
        }
      ]
    },
    {
      "transform": [{"filter": {"param": "hover", "empty": false}}],
      "mark": {
        "type": "point",
        "filled": true,
        "opacity": 1,
        "size": 40,
        "clip": true,
        "stroke": "white",
        "strokeWidth": 1
      }
    }
  ]
}