Multi Series Line Chart with an Interactive Point Highlight

Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover.",
  "data": {"url": "data/stocks.csv"},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  },
  "layer": [{
      "mark": "line"
    }, {
      "params": [{
          "name": "hover",
          "select": {"type": "point", "on": "pointerover", "clear": "pointerout"}
        }],
      "mark": {"type": "circle", "tooltip": true},
      "encoding": {
        "opacity": {
          "condition": {"test": {"param": "hover", "empty": false}, "value": 1},
          "value": 0
        },
        "size": {
          "condition": {"test": {"param": "hover", "empty": false}, "value": 48},
          "value": 100
        }
      }
    }]
}