Interactive Legend

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300, "height": 200,
  "data": {"url": "data/unemployment-across-industries.json"},
  "mark": "area",
  "params": [{
    "name": "industry",
    "select": {"type": "point", "fields": ["series"]},
    "bind": "legend"
  }],
  "encoding": {
    "x": {
      "timeUnit": "yearmonth", "field": "date",
      "axis": {"domain": false, "format": "%Y", "tickSize": 0}
    },
    "y": {
      "aggregate": "sum", "field": "count",
      "stack": "center", "axis": null
    },
    "color": {
      "field":"series",
      "scale": {"scheme": "category20b"}
    },
    "opacity": {
      "condition": {"param": "industry", "value": 1},
      "value": 0.2
    }
  }
}