{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "width":"100%",
        "display":"block"
    },
    "children": [
        {
            "elmType": "div",
            "style":{
                "height": "5px",
                "background-color":"=if(@currentField <= 7,'green',if(@currentField >7 && @currentField <= 14, 'yellow',if(@currentField >14 && @currentField <= 21,'#ffc500','red' )))",
                "width":"100%"
            }
        },
        {
        "elmType": "div",
        "txtContent": "=if(@currentField <= 7,'Low',if(@currentField >7 && @currentField <= 14, 'Medium',if(@currentField >14 && @currentField <= 21,'High','Critical' )))",
        "style": {
            "text-align":"center",
            "width":"100%"
            }
        },
        {
            "elmType": "div",
            "style":{
                "height": "5px",
                "background-color":"=if(@currentField <= 7,'green',if(@currentField >7 && @currentField <= 14, 'yellow',if(@currentField >14 && @currentField <= 21,'#ffc500','red' )))",
                "width":"100%"
            }
        }
    ]
  }