interactivelinehover.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "config": {
        "view": {
            "stroke": null
        }
    },
    "data": {
        "url": "https://vega.github.io/vega-lite/data/stocks.csv"
    },
    "description": "Multi-series line chart with labels and interactive highlight on hover.  We also set the selection's initial value to provide a better screenshot",
    "encoding": {
        "color": {
            "condition": {
                "field": "symbol",
                "legend": null,
                "selection": "hover",
                "type": "nominal"
            },
            "value": "grey"
        },
        "opacity": {
            "condition": {
                "selection": "hover",
                "value": 1
            },
            "value": 0.2
        }
    },
    "layer": [
        {
            "encoding": {
                "x": {
                    "field": "date",
                    "title": "date",
                    "type": "temporal"
                },
                "y": {
                    "field": "price",
                    "title": "price",
                    "type": "quantitative"
                }
            },
            "layer": [
                {
                    "description": "transparent layer to make it easier to trigger selection",
                    "mark": {
                        "stroke": "transparent",
                        "strokeWidth": 8,
                        "type": "line"
                    },
                    "selection": {
                        "hover": {
                            "empty": "none",
                            "fields": [
                                "symbol"
                            ],
                            "init": {
                                "symbol": "AAPL"
                            },
                            "on": "mouseover",
                            "type": "single"
                        }
                    }
                },
                {
                    "mark": "line"
                }
            ]
        },
        {
            "encoding": {
                "x": {
                    "aggregate": "max",
                    "field": "date",
                    "type": "temporal"
                },
                "y": {
                    "aggregate": {
                        "argmax": "date"
                    },
                    "field": "price",
                    "type": "quantitative"
                }
            },
            "layer": [
                {
                    "mark": "circle"
                },
                {
                    "encoding": {
                        "text": {
                            "field": "symbol",
                            "type": "nominal"
                        }
                    },
                    "mark": {
                        "align": "left",
                        "dx": 4,
                        "type": "text"
                    }
                }
            ]
        }
    ],
    "transform": [
        {
            "filter": "datum.symbol!=='IBM'"
        }
    ]
}