This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Area Chart with Rectangular Brush

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/unemployment-across-industries.json"},
  "encoding": {
      "x": {"timeUnit": "yearmonth", "field": "date"},
      "y": {"aggregate": "sum", "field": "count"}
  },
  "layer": [{
    "selection": {
      "brush": {
        "type": "interval",
        "encodings": ["x"]
      }
    },
    "mark": "area"
  }, {
    "transform": [
      {"filter": {"selection": "brush"}}
    ],
    "mark": {"type": "area", "color": "goldenrod"}
  }]
}