Multi Series Line Chart with Tooltip

This plot requires the data to have different series in different fields. See #1274 and #1552 for relevant future syntax improvements.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/seattle-weather.csv"},
  "encoding": {
    "x": {"timeUnit": "yearmonthdate", "field": "date"},
    "tooltip": [
      {"timeUnit": "yearmonthdate", "field": "date"},
      {"field": "temp_max", "type": "quantitative"},
      {"field": "temp_min", "type": "quantitative"}
    ]
  },
  "layer": [{
    "mark": {"type": "line", "color": "orange"},
    "encoding": {
      "y": {"field": "temp_max", "type": "quantitative"}
    }
  }, {
    "mark": {"type": "line", "color": "red"},
    "encoding": {
      "y": {"field": "temp_min", "type": "quantitative"}
    }
  }, {
    "mark": "rule",
    "params": [{
      "name": "hover",
      "select": {"type": "point", "on": "pointerover"}
    }],
    "encoding": {
      "color": {
        "condition": {
          "param": "hover",
          "empty": false,
          "value": "black"
        },
        "value": "transparent"
      }
    }
  }],
  "config": {"axisY": {"minExtent": 30}}
}