interaction1.vl

{
    "config": {
        "scale": {
            "bandPaddingInner": 0.2
        }
    },
    "mark": {
        "cursor": "pointer",
        "stroke": "black",
        "fill": "#4C78A8",
        "type": "bar"
    },
    "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
            }
        ]
    },
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "selection": {
        "highlight": {
            "empty": "none",
            "type": "single",
            "on": "mouseover"
        },
        "select": {
            "type": "multi"
        }
    },
    "encoding": {
        "strokeWidth": {
            "value": 0,
            "condition": [
                {
                    "value": 2,
                    "test": {
                        "and": [
                            {
                                "selection": "select"
                            },
                            "length(data(\"select_store\"))"
                        ]
                    }
                },
                {
                    "value": 1,
                    "selection": "highlight"
                }
            ]
        },
        "x": {
            "field": "a",
            "type": "ordinal"
        },
        "fillOpacity": {
            "value": 0.3,
            "condition": {
                "value": 1,
                "selection": "select"
            }
        },
        "y": {
            "field": "b",
            "type": "quantitative"
        }
    },
    "description": "A bar chart with highlighting on hover and selecting on click. Inspired by Tableau's interaction style."
}