vl_bar_hover_and_cf

vl_bar_hover_and_cf.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with conditional coloring for the highest value.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "G", "b": 19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53}
    ]
  },
  "params": [
    {
      "name": "hover",
      "select": {"type": "point", "on": "mouseover", "clear": "mouseout"}
    }
  ],
  "transform": [
    {
      "window": [{"op": "max", "field": "b", "as": "max_b"}],
      "frame": [null, null]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"title": "Category"}},
    "y": {"field": "b", "type": "quantitative", "axis": {"title": "Value"}},
    "color": {
      "condition": [
        {"param": "hover", "empty": false, "value": "orange"},
        {"test": "datum.b === datum.max_b", "value": "green"}
      ],
      "value": "#404040"
    },
    "stroke": {
      "condition": [
        {"param": "hover", "empty": false, "value": "red"},
        {"test": "datum.b === datum.max_b", "value": "black"}
      ],
      "value": "#404040"
    }
  }
}