label_rect.vg.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 700,
  "height": 500,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28000},
        {"category": "B", "amount": 55000},
        {"category": "C", "amount": 43000},
        {"category": "D", "amount": 91000},
        {"category": "E", "amount": 81000},
        {"category": "F", "amount": 53000},
        {"category": "G", "amount": 5000},
        {"category": "H", "amount": 87000}
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "height",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "xscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [{"orient": "left", "scale": "yscale"}, {"orient": "bottom", "scale": "xscale"}],
  "marks": [
    {
      "type": "rect",
      "name": "bar",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "y": {"scale": "yscale", "field": "category"},
          "height": {"scale": "yscale", "band": 1},
          "x": {"scale": "xscale", "field": "amount"},
          "x2": {"scale": "xscale", "value": 0}
        },
        "update": {"fill": {"value": "skyblue"}}
      }
    },
    {
      "type": "text",
      "from": {"data": "bar"},
      "encode": {
        "enter": {
          "fontSize": {"value": 25},
          "text": {"field": "datum.amount"},
          "fill": {"value": "#294E65"}
        }
      },
      "transform": [
        {
          "type": "label",
          "offset": [-15, 15],
          "anchor": "right",
          "size": [700, 500]
        }
      ]
    }
  ]
}