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

[DW868990]

Hi,

I am trying to get the Text color of the my Text Mark to be white when the value is over a 1000.

My vega-lite code is below and is not returning the color change, any help in what i am missing is appreciated.

{
"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
},
"encoding": {
"x": {"field": "Category",
"type": "nominal"
},
"y": {"field": "Sales", "type": "ordinal",
"bin":{"maxbins":10}},
"text": {"aggregate": "count","field": "CustomerID", "type": "quantitative"},
"color": {
"condition": {
"test": "datum['CustomerID'] < 1000",
"value": "white"},
"value": "black"
}
}
}
],
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
}

[dm-p · Accepted solution]

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