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

DW868990 — Tue, 10 Jan 2023 09:52:52 GMT

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"}
}
}

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

dm-p — Wed, 11 Jan 2023 02:16:15 GMT

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

topic Vega Lite - Text color based on condition, so next white when darker background in Custom Visuals Development Discussion

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

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

Alternative approach