How to set an auto scale for text number in Vega-Lite

Question

I have a Vega-Lite chart built in a Power BI report that is underpinned by a dimensional model. The report offers users the ability to drill down into categories and I would like for the chart to display the text marks based on the scale of the number.

Unfortunately I cannot share the report but can offer this mock up.

The rule to be implemented is, if the number is greater than 10 000 then display as 10k else display as is. Ideally the number must be rendered with a thousand separator.

For example, with no filters applied:

With a category filtered:

If this is possible, please would you share how this can be achieved?

Answer 1

Not 100% clear on your rules but reading as written, I would just add a calculate to give you the label you want. You can use d3format (https://github.com/d3/d3-format/) or just add your own logic like this using a ternary operator.

{"calculate": "datum['Production CY'] > 10000?'10k':datum['Production CY'] ", "as": "label1"}

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Financial Year": 2023,
        "KPI Name": "Non-Renewables",
        "Usage CY": 98.522,
        "Usage PY": 88.556,
        "Target": 82.756,
        "Production CY": 57470,
        "Production PY": 30620
      },
      {
        "Financial Year": 2023,
        "KPI Name": "Renewables",
        "Usage CY": 31.618,
        "Usage PY": 38.942,
        "Target": 36.392,
        "Production CY": 57470,
        "Production PY": 27170.8
      }
    ]
  },
  "transform": [
    {"calculate": "'Production Current FY'", "as": "Production CY Legend"},
    {"calculate": "'Production Prior FY'", "as": "Production PY Legend"},
    {"calculate": "'Electricity Target'", "as": "Target Legend"},
    {"calculate": "datum['KPI Name'] + ' Prior FY'", "as": "CategoryPY"},
    {"calculate": "datum['KPI Name'] + ' Current FY'", "as": "CategoryCY"},
    {"calculate": "datum['Production CY'] > 10000?'10k':datum['Production CY'] ", "as": "label1"}
  ],
  "height": 300,
  "width": 300,
  "config": {
    "legend": {
      "orient": "bottom",
      "labelFontSize": 8,
      "columns": 2,
      "layout": {"bottom": {"anchor": "middle"}}
    }
  },
  "layer": [
    {
      "layer": [
        {
          "name": "Electricity CY",
          "mark": {"type": "bar", "xOffset": 0, "size": 30, "tooltip": true},
          "encoding": {
            "x": {
              "field": "Financial Year",
              "type": "ordinal",
              "axis": {"labelAngle": 0},
              "sort": null
            },
            "y": {
              "field": "Usage CY",
              "type": "quantitative",
              "title": "Electricity Intensity (kWh / ton Production)"
            },
            "color": {
              "field": "CategoryCY",
              "type": "nominal",
              "scale": {
                "domain": [
                  "Renewables Prior FY",
                  "Renewables Current FY",
                  "Non-Renewables Prior FY",
                  "Non-Renewables Current FY"
                ],
                "range": ["#4496BC", "#39A34B", "#5AC8FA", "#4CD964"]
              },
              "legend": {"title": ""}
            },
            "order": {"field": ["CategoryCY"], "order": ["ascending"]}
          }
        },
        {
          "name": "Electricity PY",
          "mark": {"type": "bar", "xOffset": -30, "size": 30, "tooltip": true},
          "encoding": {
            "x": {
              "field": "Financial Year",
              "type": "ordinal",
              "axis": {"labelAngle": 0},
              "sort": null
            },
            "y": {"field": "Usage PY", "type": "quantitative", "axis": null},
            "color": {
              "field": "CategoryPY",
              "type": "nominal",
              "scale": {
                "domain": [
                  "Renewables Prior FY",
                  "Renewables Current FY",
                  "Non-Renewables Prior FY",
                  "Non-Renewables Current FY"
                ],
                "range": ["#4496BC", "#39A34B", "#5AC8FA", "#4CD964"]
              },
              "legend": {"title": ""}
            },
            "order": {"field": ["CategoryPY"], "order": ["ascending"]}
          }
        },
        {
          "name": "TARGET",
          "mark": {
            "type": "bar",
            "xOffset": 30,
            "size": 30,
            "color": "#FFCC00",
            "tooltip": true
          },
          "encoding": {
            "x": {
              "field": "Financial Year",
              "type": "ordinal",
              "axis": {"labelAngle": 0},
              "sort": null
            },
            "y": {
              "aggregate": "sum",
              "field": "Target",
              "type": "quantitative",
              "axis": null
            },
            "fill": {
              "field": "Target Legend",
              "scale": {"range": ["#FFCC00"]},
              "legend": {"title": ""}
            }
          }
        },
        {
          "transform": [{"filter": "datum['Usage CY'] != null"}],
          "name": "Electricity CY Data Labels",
          "mark": {
            "type": "text",
            "align": "right",
            "baseline": "line-bottom",
            "dx": 13,
            "fontSize": 12
          },
          "encoding": {
            "x": {"field": "Financial Year", "type": "ordinal", "sort": null},
            "y": {
              "aggregate": "sum",
              "field": "Usage CY",
              "type": "quantitative",
              "axis": null
            },
            "text": {
              "aggregate": "sum",
              "field": "Usage CY",
              "type": "quantitative",
              "format": ".1f"
            }
          }
        },
        {
          "name": "Electricity PY Data Labels",
          "mark": {
            "type": "text",
            "align": "right",
            "baseline": "line-bottom",
            "dx": -18,
            "fontSize": 12
          },
          "encoding": {
            "x": {"field": "Financial Year", "type": "ordinal", "sort": null},
            "y": {
              "aggregate": "sum",
              "field": "Usage PY",
              "type": "quantitative",
              "axis": null
            },
            "text": {
              "aggregate": "sum",
              "field": "Usage PY",
              "type": "quantitative",
              "format": ".1f"
            }
          }
        },
        {
          "name": "TARGET Labels",
          "mark": {
            "type": "text",
            "align": "right",
            "baseline": "line-bottom",
            "dx": 43,
            "fontSize": 12
          },
          "encoding": {
            "x": {"field": "Financial Year", "type": "ordinal", "sort": null},
            "y": {
              "aggregate": "sum",
              "field": "Target",
              "type": "quantitative",
              "axis": null
            },
            "text": {
              "aggregate": "sum",
              "field": "Target",
              "type": "quantitative",
              "format": ".1f"
            }
          }
        }
      ],
      "resolve": {"scale": {"y": "shared"}, "axis": {"y": "independent"}}
    },
    {
      "layer": [
        {
          "layer": [
            {
              "name": "Production CY",
              "mark": {"type": "circle", "tooltip": true},
              "encoding": {
                "x": {
                  "field": "Financial Year",
                  "type": "ordinal",
                  "sort": null
                },
                "y": {
                  "field": "Production CY",
                  "type": "quantitative",
                  "scale": {"zero": false},
                  "title": "Production (ton)",
                  "format": ","
                },
                "stroke": {
                  "field": "Production CY Legend",
                  "scale": {"range": ["#666666"]},
                  "legend": {"title": ""}
                }
              }
            },
            {
              "name": "Production PY",
              "mark": {"type": "circle", "tooltip": true},
              "encoding": {
                "x": {
                  "field": "Financial Year",
                  "type": "ordinal",
                  "sort": null
                },
                "y": {
                  "aggregate": "sum",
                  "field": "Production PY",
                  "scale": {"zero": false},
                  "type": "quantitative",
                  "axis": null,
                  "format": ","
                },
                "stroke": {
                  "field": "Production PY Legend",
                  "scale": {"range": ["red"]},
                  "legend": {"title": ""}
                }
              }
            },
            {
              "name": "Production CY Data Labels",
              "mark": {
                "type": "text",
                "align": "middle",
                "baseline": "top",
                "dx": -20,
                "dy": -15,
                "fontSize": 12
              },
              "encoding": {
                "x": {
                  "field": "Financial Year",
                  "type": "ordinal",
                  "sort": null
                },
                "y": {
                  "field": "Production CY",
                  "type": "quantitative",
                  "scale": {"zero": false},
                  "axis": null
                },
                "text": {
                  "field": "label1"
                  
                }
              }
            },
            {
              "name": "Production PY Data Labels",
              "mark": {
                "type": "text",
                "align": "middle",
                "baseline": "top",
                "dx": -20,
                "dy": -15,
                "fontSize": 12
              },
              "encoding": {
                "x": {
                  "field": "Financial Year",
                  "type": "ordinal",
                  "sort": null
                },
                "y": {
                  "aggregate": "sum",
                  "field": "Production PY",
                  "scale": {"zero": false},
                  "type": "quantitative",
                  "axis": null
                },
                "text": {
                  "aggregate": "sum",
                  "field": "Production PY",
                  "type": "quantitative",
                  "format": ","
                }
              }
            }
          ],
          "resolve": {
            "axis": {"y": "independent"},
            "scale": {"stroke": "independent"}
          }
        }
      ],
      "resolve": {"scale": {"y": "independent", "stroke": "independent"}}
    }
  ]
}