Conditional render label Color base on another field value

Question

I'm trying to render the label color base on another field value using test predicate or field predicate but I can not get it right. All I want is that the label color on axis y (section) can change from black to red when its resilience value equal to 0.
I've made my code on online editor and I really appreciate if you can give me some help.

vega-lite-condition-render-label-color

in the case above, the fifth one <4. Hygiene & Cleaning> should be red instead of black.

Answer 1

I have added another layer with text, in which your text of section field is displayed. In that the color config with condition will work properly. Below is the code and editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {"embedOptions": {"renderer": "svg"}},
  "data": {
    "values": [
      {
        "section": "1. General Health & Safety",
        "Index": 38.40277777777778,
        "resilience": 31
      },
      {
        "section": "10. Environmental Accidents",
        "Index": 38.40277777777778,
        "resilience": 19
      },
      {
        "section": "2. Health - Process",
        "Index": 38.40277777777778,
        "resilience": 39
      },
      {
        "section": "3. Health - People",
        "Index": 38.40277777777778,
        "resilience": 47
      },
      {
        "section": "4. Hygiene & Cleaning",
        "Index": 38.40277777777778,
        "resilience": 0
      },
      {
        "section": "5. Health Care & Working Conditions",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "6. External Pollution & Extreme Weather Conditions",
        "Index": 38.40277777777778,
        "resilience": 16
      },
      {
        "section": "7. Hazardous Materials/Substances",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "8. Safety Accidents",
        "Index": 38.40277777777778,
        "resilience": 46
      },
      {
        "section": "9. Subcontractors Training",
        "Index": 38.40277777777778,
        "resilience": "1"
      }
    ]
  },
  "config": {"view": {"stroke": null}},
  "height": 300,
  "autosize": {"resize": true},
  "layer": [
    {
      "mark": {"type": "bar", "cornerRadiusEnd": 2},
      "encoding": {
        "x": {
          "field": "resilience",
          "type": "quantitative",
          "title": null,
          "axis": {"grid": true},
          "scale": {"domain": [0, 100]}
        },
        "y": {
          "field": "section",
          "type": "ordinal",
          "axis": {
            "grid": false,
            "domain": false,
            "ticks": false,
            "labels": false,
            "labelAlign": "left",
            "labelBaseline": "middle",
            "labelPadding": -5,
            "labelOffset": 0,
            "labelColor2": {"expr": "datum.resilience < 230 ? 'red' : 'green'"},
            "labelColor": {
              "condition": {"test": "datum.resilience > 5", "value": "red"},
              "value": "green"
            },
            "title": null
          }
        },
        "tooltip": {
          "field": "resilience",
          "type": "quantitative",
          "format": ".0f"
        },
        "color": {
          "field": "resilience",
          "type": "quantitative",
          "title": "Score",
          "scale": {
            "domain": [0, 30, 50, 55, 60, 65, 70, 75, 80, 90, 100],
            "range": [
              "#DE7363",
              "#FB9F38",
              "#F9B821",
              "#FBE8C9",
              "#F5DA01",
              "#E2D91E",
              "#CBD641",
              "#B6D35F",
              "#A2D180",
              "#7CC895",
              "#52BEA9"
            ]
          }
        }
      }
    },
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {"field": "section"},
        "color": {
          "condition": {"test": "datum.resilience < 2", "value": "red"},
          "value": "green"
        },
        "x": {"datum": 0},
        "y": {"field": "section", "type": "ordinal"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red", "size": 3},
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "Index",
          "type": "quantitative",
          "axis": null,
          "format": ".0f",
          "title": "Module Resilience"
        }
      }
    }
  ]
}