Vega-lite - show marks in label area when having brushed domain

Question

I have a chart that is zoomed by an overview

to which I added point marks between the x-axis and the x-axis labels.

The points should also be zoomed by the overview. However when I add "scale": {"domain": {"param": "brush"}}, to the point marks encoding for x, the points disappear.

They can be made visible if I position the points above the x-axis, however I need them under the x-axis as shown above.

Here's the code with the points not visible: (you may have to remove the \\ comments depending on your vega-lite editor)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 200,
      "layer": [
        {
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": "", "labelPadding": 20}
            },
            "y": {"field": "price", "type": "quantitative"}
          }
        },
        {
          "mark": "point",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}}, \\ <- removing this makes the points visible but removes the ability to zoom
              "axis": {"title": ""}
            },
            "y": {"value": 210}, \\ <- setting this below 200 makes the points visible, but I need it to be above 200 and keep the dots visible
            "color": {"value": "black"}
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

Answer 1

Set clip to false.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 200,
      "layer": [
        {
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": "", "labelPadding": 20}
            },
            "y": {"field": "price", "type": "quantitative"}
          }
        },
        {
          "mark": {"type": "point", "clip":false} ,
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}}, 
              "axis": {"title": ""}
            },
            "y": {"value": 210}, 
            "color": {"value": "black"}
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}