bar_with_labels_and_CF_v2

bar_with_labels_and_CF_v2.json

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