How to change ARC text label based on condition Vega-Lite

Question

I'm trying to change the text label based on a condition. But when I add the condition as seen below the position changes.

Labels on the right position but no conditional formating

Tried to add (after row 75):

    "color": {
      "condition": {
        "test": "datum['Omzet Delta %'] < 0",
        "value": "red"},
        "value": "green"
      }

Labels not on the right position but got the conditional formating

Link to code in Vega-Lite editor

Answer 1

Try this.

{
  "data": {
    "values": [
      {"Categorie": "A", "value": 28, "value2": 0.5},
      {"Categorie": "B", "value": 55, "value2": 1.2},
      {"Categorie": "C", "value": 43, "value2": 0.8},
      {"Categorie": "D", "value": 20, "value2": 1.15},
      {"Categorie": "E", "value": 15, "value2": 1.1},
      {"Categorie": "F", "value": 84, "value2": 1}
    ]
  },
  "transform": [{"calculate": "datum.value/1000000", "as": "Omzet2"}],
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": "normalize"},
    "color": {
      "field": "Categorie",
      "type": "nominal",
      "scale": {
        "range": [
          "#4F73B8",
          "#09B39D",
          "#F1963A",
          "#66BF6D",
          "#8783FF",
          "#1C2632",
          "#87A38C",
          "#DBDFE4",
          "#3599B8",
          "#DFBFBF",
          "#4AC5BB",
          "#5F6B6D",
          "#FB8281",
          "#F4D25A",
          "#7F898A",
          "#A4DDEE",
          "#FDAB89",
          "#B687AC",
          "#28738A",
          "#A78F8F",
          "#168980",
          "#293537",
          "#BB4A4A",
          "#B59525",
          "#475052",
          "#6A9FB0",
          "#BD7150",
          "#7B4F71",
          "#1B4D5C",
          "#706060",
          "#0F5C55",
          "#1C2325"
        ]
      },
      "legend": false
    }
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "innerRadius": 80,
        "outerRadius": 120,
        "tooltip": true
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": 140,
        "fontSize": 12,
        "fontWeight": "normal",
        "xOffset": 0,
        "yOffset": 0, "fill":{"signal":"datum['Omzet2'] < 0.00005?'red':'green'"}
      },
      "encoding": {
        "text": {"field": "value2", "type": "nominal"}
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": 100,
        "fontSize": 12,
        "fontWeight": "normal",
        "fill": "#DBDFE4",
        "blend": "hard-light"
      },
      "encoding": {
        "text": {"field": "value", "type": "quantitative", "format": ".1f"}
      }
    }
  ]
}