vl_number_formatting_styles

vl_number_formatting_styles.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "best_number_formatting",
  "description": "A simple bar chart with conditional coloring for the highest and lowest values and data labels.",
  "width": 450,
  "height": 350,
  "data": {
    "values": [
      {"item": "A", "value": 0.8},
      {"item": "AA", "value": 98},
      {"item": "AB", "value": 361},
      {"item": "AC", "value": 1750},
      {"item": "C", "value": 92650},
      {"item": "D", "value": 150000},
      {"item": "E", "value": 1300000},
      {"item": "F", "value": 6500000},
      {"item": "G", "value": 10000000},
      {"item": "H", "value": 880000000},
      {"item": "I", "value": 1239000000}
    ]
  },
  "transform": [
    {"calculate": "format( datum.value, ',.1~f')", "as": "wholeNumberFormat"},
    {
      "calculate": "replace(toString(datum.wholeNumberFormat), /\\D/g, '').length",
      "as": "digitCount"
    },
    {
      "calculate": "datum.value >= 100000000 ? format(datum.value / 1000000000, ',.1~f') + 'B' : datum.value >= 100000 ? format(datum.value / 1000000, ',.1~f') + 'M' : datum.value >= 1000 ? format(datum.value / 1000, ',.1~f') + 'k' : format(datum.value, ',')",
      "as": "formatByValue"
    },
    {
      "calculate": "datum.digitCount >= 9 ? format(datum.value / 1000000000, ',.1~f') + 'B' : datum.digitCount >= 6 ? format(datum.value / 1000000, ',.1~f') + 'M' : datum.digitCount >= 4 ? format(datum.value / 1000, ',.1~f') + 'k' : format(datum.value, ',')",
      "as": "formatByDigitCount"
    },
    {
      "calculate": "'£' + (datum.formatByDigitCount)",
      "as": "CurrencyNumberFormat"
    }
  ],
  "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": {"value": "teal"}
  },
  "layer": [
    {"mark": {"type": "bar"}},
    {
      "mark": {"type": "text", "dy": -10, "fontWeight": "bold"},
      "encoding": {
        "text": {"field": "formatByDigitCount"},
        "color": {"value": "black"}
      }
    }
  ]
}