Vega Lite - Text color based on condition, so next white when darker background

Hi DW868990,

In your condition, you have the following test to set the color to white, and this is using the "less than" (<) symbol:

"test": "datum['CustomerID'] < 1000",

As you want the color to be set if the value exceeds 1000, I'd suggest changing this to use the "greater than" (>) symbol, e.g.:

"test": "datum['CustomerID'] > 1000",

Alternative approach

As using the color encoding channel will create a scale that might cause issues if you bind color elsewhere in your spec, you could also try using the color property in the mark directly, which is better suited for this use case. HEre's how I'd re-write your spec by removing the encoding channel and binding this to the mark's color property using an ExprRef, like this (lines 21-23):

{
  "data": { "name": "dataset" },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "color": { "aggregate": "count", "field": "CustomerID" },
        "tooltip": [
          { "field": "Category", "type": "ordinal" },
          { "aggregate": "count", "field": "Metric", "type": "quantitative" }
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "dy": 60,
        "dx": -50,
        "color": {
            "expr": "datum['CustomerID'] > 1000 ? 'white' : 'black'"
        }
      },
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "text": {
          "aggregate": "count",
          "field": "CustomerID",
          "type": "quantitative"
        }
      }
    }
  ],
  "config": {
    "axis": { "grid": true, "tickBand": "extent" }
  }
}

Regards,

Daniel