Using JSON data bars Column formatting for text (stages)

Question

I am looking at using column formatting to allow us to easily identify which stage a project is in. In SharePoint online using modern views.

We have 4 stages and would like to have a 25%, 50% 75%, and 100% data bars like what is used here.

I tried combining with the JSON, used for conditional formatting on column text like here.

After lots of iterations and attempts this is my latest attempt:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
    "style": {
        "padding": "0",
        "width": "=if(@currentField == 'Startup','25%', if(@currentField == 'Initiation', '50%', if(@currentField == 'Execution', '75%', if(@currentField == 'Closure','100%',''))))"
  }
}

But it is not working as expected, any help will be appreciated.

Answer 1

Try

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
            "txtContent": "=if(@currentField == 'Startup','25%', if(@currentField == 'Initiation', '50%', if(@currentField == 'Execution', '75%', if(@currentField == 'Closure','100%',''))))",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ]
}