vegaEmbed({
width: 700,
height: 300,
data: { values: stocks },
encoding: {
x: { field: "date", type: "temporal" },
y: { field: "price", type: "quantitative" },
color: {
condition: { param: "highlight", field: "symbol", type: "nominal" },
value: "grey"
},
opacity: { condition: { param: "highlight", value: 1 }, value: 0.2 }
},
layer: [
{
description: "To help select the line - transparent",
params: [
{
name: "highlight",
select: {
type: "point",
on: "mouseover",
field: ["symbol"]
}
}
],
mark: { type: "line", strokeWidth: 12, stroke: "transparent" }
},
{
description: "To draw the line",
mark: { type: "line" }
}
]
})