Multi Series Line Chart with Tooltips
The plot displays tooltips for all stock prices of the hovered time. The example is forked/modified from @jakevdp’s block
View this example in the online editor
Vega-Lite JSON Specification
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "data/stocks.csv",
"format": {
"type": "csv",
"parse": {
"date": "date"
}
}
},
"width": 800,
"height": 400,
"layer": [
{
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
},
"layer": [{
"mark": "line"
},{
"selection": {
"tooltip": {
"type": "single",
"nearest": true,
"on": "mouseover",
"encodings": [
"x"
],
"empty": "none"
}
},
"mark": "point",
"encoding": {
"opacity": {
"condition": {
"selection": "tooltip",
"value": 1
},
"value": 0
}
}
}]
},
{
"transform": [
{
"filter": {
"selection": "tooltip"
}
}
],
"layer": [{
"mark": {
"type": "rule",
"color": "gray"
},
"encoding": {
"x": {
"type": "temporal",
"field": "date"
}
}
}, {
"mark": {
"type": "text",
"align": "left",
"dx": 5,
"dy": -5
},
"encoding": {
"text": {
"type": "quantitative",
"field": "price"
},
"color": {
"type": "nominal",
"field": "symbol"
},
"x": {
"type": "temporal",
"field": "date"
},
"y": {
"type": "quantitative",
"field": "price"
}
}
}]
}
]
}