interaction1.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "config": {
        "scale": {
            "bandPaddingInner": 0.2
        }
    },
    "data": {
        "values": [
            {
                "a": "A",
                "b": 28
            },
            {
                "a": "B",
                "b": 55
            },
            {
                "a": "C",
                "b": 43
            },
            {
                "a": "D",
                "b": 91
            },
            {
                "a": "E",
                "b": 81
            },
            {
                "a": "F",
                "b": 53
            },
            {
                "a": "G",
                "b": 19
            },
            {
                "a": "H",
                "b": 87
            },
            {
                "a": "I",
                "b": 52
            }
        ]
    },
    "description": "A bar chart with highlighting on hover and selecting on click. Inspired by Tableau's interaction style.",
    "encoding": {
        "fillOpacity": {
            "condition": {
                "selection": "select",
                "value": 1
            },
            "value": 0.3
        },
        "strokeWidth": {
            "condition": [
                {
                    "test": {
                        "and": [
                            {
                                "selection": "select"
                            },
                            "length(data(\"select_store\"))"
                        ]
                    },
                    "value": 2
                },
                {
                    "selection": "highlight",
                    "value": 1
                }
            ],
            "value": 0
        },
        "x": {
            "field": "a",
            "type": "ordinal"
        },
        "y": {
            "field": "b",
            "type": "quantitative"
        }
    },
    "mark": {
        "cursor": "pointer",
        "fill": "#4C78A8",
        "stroke": "black",
        "type": "bar"
    },
    "selection": {
        "highlight": {
            "empty": "none",
            "on": "mouseover",
            "type": "single"
        },
        "select": {
            "type": "multi"
        }
    }
}