vl_bar_labels_cf_minmax

vl_bar_labels_cf_minmax.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "vl_bar_minmax_avgline_labels_v1",
  "description": "A simple bar chart with conditional coloring for the highest and lowest values and data labels.",
  "width": 350,
  "data": {
    "values": [
      {"item": "A", "value": 2800000},
      {"item": "B", "value": 5500000},
      {"item": "C", "value": 4300000},
      {"item": "G", "value": 1900000},
      {"item": "H", "value": 8700000},
      {"item": "I", "value": 5200000},
      {"item": "D", "value": 9100000},
      {"item": "E", "value": 8100000},
      {"item": "F", "value": 5300000}
    ]
  },
  "transform": [
    {
      "window": [
        {"op": "max", "field": "value", "as": "max_b"},
        {"op": "min", "field": "value", "as": "min_b"},
        {"op": "average", "field": "value", "as": "avg_b"}
      ],
      "frame": [null, null]
    }
  ],
  "encoding": {
    "x": {
      "field": "item",
      "type": "nominal",
      "axis": {"title": "Category", "labelAlign": "center", "labelAngle": 0}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {"title": "Value", "labelPadding": 5, "format": "~s"}
    },
    "color": {
      "condition": [
        {"test": "datum.value === datum.max_b", "value": "limegreen"},
        {"test": "datum.value === datum.min_b", "value": "red"}
      ],
      "value": "#404040"
    }
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "stroke": {
          "condition": [
            {"test": "datum.value === datum.max_b", "value": "darkgreen"},
            {"test": "datum.value === datum.min_b", "value": "firebrick"}
          ],
          "value": "transparent"
        }
      }
    },
    {
      "mark": {"type": "text", "dy": -10, "fontWeight": "bold"},
      "encoding": {
        "text": {"field": "value", "type": "quantitative", "format": "~s"},
        "color": {"value": "black"}
      }
    },
    {
      "mark": {"type": "line", "stroke": "orange", "opacity": 0.7},
      "encoding": {"y": {"field": "avg_b"}}
    }
  ]
}