{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "sticky",
      "display": "flex",
      "align-items": "center",
      "justify-content": "center",
      "flex-wrap": "wrap",
      "box-sizing": "border-box",
      "width": "750px",
      "height": "445px"
    },
    "children": [
      {
        "comment": "this is the title box",
        "elmType": "div",
        "inlineEditField": "[$Title]",
        "style": {
          "width": "686px",
          "box-sizing": "border-box",
          "display": "flex",
          "align-items": "flex-start",
          "justify-content": "center",
          "height": "30px",
          "position": "absolute",
          "top": "0",
          "cursor": "=if([$Author.email] == @me, 'pointer', '')"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "relative",
              "display": "block",
              "top": "0px",
              "line-height": "20px",
              "box-sizing": "border-box",
              "white-space": "nowrap",
              "overflow": "hidden",
              "text-overflow": "ellipsis",
              "font-size": "22px",
              "font-weight": "bold",
              "color": "black"
            },
            "txtContent": "@currentField"
          }
        ]
      },
      {
        "comment": "this is the icon to select the number of data points to be displayed",
        "elmType": "div",
        "inlineEditField": "[$DATAPOINTS]",
        "style": {
          "position": "absolute",
          "left": "720px",
          "top": "2px",
          "height": "26px",
          "width": "26px",
          "box-sizing": "border-box",
          "display": "block",
          "visibility": "=if([$Author.email] == @me, 'visible', 'hidden')",
          "text-align": "center",
          "font-size": "16px",
          "font-weight": "bold",
          "cursor": "pointer"
        },
        "attributes": {
          "class": "sp-css-color-GrayText",
          "title": "=if([$DATAPOINTS] == '', 'Insert the number of data points you want to display - Min 3 Max 8', 'Data points: ' + [$DATAPOINTS.displayValue])",
          "iconName": "WebAppBuilderModule"
        }
      },
      {
        "comment": "this is the icon to setup the maximum score",
        "elmType": "div",
        "inlineEditField": "[$SCORE]",
        "style": {
          "position": "absolute",
          "left": "690px",
          "top": "2px",
          "height": "26px",
          "width": "26px",
          "box-sizing": "border-box",
          "display": "block",
          "visibility": "=if([$Author.email] == @me, 'visible', 'hidden')",
          "text-align": "center",
          "font-size": "16px",
          "font-weight": "bold",
          "cursor": "pointer"
        },
        "attributes": {
          "class": "sp-css-color-GrayText",
          "iconName": "Step",
          "title": "=if([$SCORE] == '', 'Insert a maximum score number', 'Max score: ' + [$SCORE.displayValue])"
        }
      },
      {
        "comment": "this is the icon to setup chart and labels color, based on a custom HEX color code or HTML color name",
        "elmType": "div",
        "inlineEditField": "[$COLOR]",
        "style": {
          "position": "absolute",
          "left": "720px",
          "top": "32px",
          "height": "26px",
          "width": "26px",
          "box-sizing": "border-box",
          "display": "block",
          "visibility": "=if([$Author.email] == @me, 'visible', 'hidden')",
          "text-align": "center",
          "font-size": "18px",
          "font-weight": "bold",
          "cursor": "pointer"
        },
        "attributes": {
          "class": "sp-css-color-GrayText",
          "iconName": "BucketColor",
          "title": "Change color - HTML names or HEX allowed"
        }
      },
      {
        "comment": "this is the central container of the radar chart. Labels and values position will change based on the number of data points",
        "elmType": "div",
        "style": {
          "width": "750px",
          "height": "280px",
          "box-sizing": "border-box",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "margin-top": "40px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "display": "=if([$DATAPOINTS] >= 3, 'block', 'none')",
              "max-width": "230px",
              "min-width": "60px",
              "left": "auto",
              "top": "50px"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL1]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL1] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL1] =='', 'Label 1', [$LABEL1])",
                "attributes": {
                  "title": "[$LABEL1]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE1]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "center",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE1]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "2",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] >= 3, 'block', 'none')",
              "max-width": "230px",
              "min-width": "60px",
              "left": "=if([$DATAPOINTS] == 3, '510px', if([$DATAPOINTS] == 4, '520px', if([$DATAPOINTS] == 5, '515px', if([$DATAPOINTS] == 6, '505px', if([$DATAPOINTS] == 7, '495px', if([$DATAPOINTS] == 8, '485px', '50px'))))))",
              "top": "=if([$DATAPOINTS] == 3, '310px', if([$DATAPOINTS] == 4, '220px', if([$DATAPOINTS] == 5, '170px', if([$DATAPOINTS] == 6, '140px', if([$DATAPOINTS] == 7, '120px', if([$DATAPOINTS] == 8, '110px', '100px'))))))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL2]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL2] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL2] =='', 'Label 2', [$LABEL2])",
                "attributes": {
                  "title": "[$LABEL2]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "flex-start"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE2]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "flex-start",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE2]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "3",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] >= 3, 'block', 'none')",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 3, '510px', '')",
              "left": "=if([$DATAPOINTS] == 5, '470px', if([$DATAPOINTS] == 6, '510px', if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, '520px',  '')))",
              "top": "=if([$DATAPOINTS] == 3, '310px', if([$DATAPOINTS] == 4, '390px', if([$DATAPOINTS] == 5, '350px', if([$DATAPOINTS] == 6, '290px', if([$DATAPOINTS] == 7, '250px', if([$DATAPOINTS] == 8, '220px', '150px'))))))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL3]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL3] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL3] =='', 'Label 3', [$LABEL3])",
                "attributes": {
                  "title": "[$LABEL3]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "=if([$DATAPOINTS] == 3, 'flex-end', if([$DATAPOINTS] == 5 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-start', 'center'))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE3]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "=if([$DATAPOINTS] == 3, 'flex-end', if([$DATAPOINTS] == 5 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-start', 'center'))",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE3]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "4",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] > 3, 'block', 'none') ",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 4, '520px', if([$DATAPOINTS] == 5, '470px',   ''))",
              "left": "=if([$DATAPOINTS] == 4 || [$DATAPOINTS] == 5, '', if([$DATAPOINTS] == 6, 'auto', if([$DATAPOINTS] == 7, '440px', if([$DATAPOINTS] == 8, '480px', '50px'))))",
              "top": "=if([$DATAPOINTS] == 4, '220px', if([$DATAPOINTS] == 5, '350px', if([$DATAPOINTS] == 6, '390px', if([$DATAPOINTS] == 7, '370px', if([$DATAPOINTS] == 8, '340px', '200px')))))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL4]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL4] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL4] =='', 'Label 4', [$LABEL4])",
                "attributes": {
                  "title": "[$LABEL4]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "=if([$DATAPOINTS] == 4 || [$DATAPOINTS] == 5, 'flex-end', if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-start', 'center'))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE4]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "=if([$DATAPOINTS] == 4 || [$DATAPOINTS] == 5, 'flex-end', if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-start', 'center'))",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE4]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "5",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] > 4, 'block', 'none') ",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 5, '515px', if([$DATAPOINTS] == 6, '510px', if([$DATAPOINTS] == 7, '440px', '')))",
              "left": "=if([$DATAPOINTS] == 5 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, '', '50px')",
              "top": "=if([$DATAPOINTS] == 5, '170px', if([$DATAPOINTS] == 6, '290px', if([$DATAPOINTS] == 7, '370px', if([$DATAPOINTS] == 8, '390px', '250px'))))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL5]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL5] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL5] =='', 'Label 5', [$LABEL5])",
                "attributes": {
                  "title": "[$LABEL5]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "=if([$DATAPOINTS] ==5 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 7, 'flex-end', 'center')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE5]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "=if([$DATAPOINTS] ==5 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 7, 'flex-end', 'center')",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE5]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "6",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] > 5, 'block', 'none') ",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 6, '505px', if([$DATAPOINTS] == 7, '520px', if([$DATAPOINTS] == 8, '480px', '')))",
              "left": "=if([$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, '', '50px')",
              "top": "=if([$DATAPOINTS] == 6, '140px', if([$DATAPOINTS] == 7, '250px', if([$DATAPOINTS] == 8, '340px', '300px')))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL6]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL6] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL6] =='', 'Label 6', [$LABEL6])",
                "attributes": {
                  "title": "[$LABEL6]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "=if([$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-end', 'center')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE6]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "=if([$DATAPOINTS] == 6 || [$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-end', 'center')",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE6]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "7",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] > 6, 'block', 'none') ",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 7, '495px', if([$DATAPOINTS] == 8, '520px', ''))",
              "left": "=if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, '', '50px')",
              "top": "=if([$DATAPOINTS] == 7, '120px', if([$DATAPOINTS] == 8, '220px', '350px'))"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL7]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL7] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL7] =='', 'Label 7', [$LABEL7])",
                "attributes": {
                  "title": "[$LABEL7]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "=if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-end', 'center')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE7]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "=if([$DATAPOINTS] == 7 || [$DATAPOINTS] == 8, 'flex-end', 'center')",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE7]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "8",
              "position": "absolute",
              "display": "=if([$DATAPOINTS] > 7, 'block', 'none') ",
              "max-width": "230px",
              "min-width": "60px",
              "right": "=if([$DATAPOINTS] == 8, '485px', '')",
              "top": "=if([$DATAPOINTS] == 8, '110px', '400px'"
            },
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$LABEL8]",
                "style": {
                  "background-color": "white",
                  "min-width": "60px",
                  "height": "22px",
                  "box-sizing": "border-box",
                  "display": "block",
                  "text-align": "center",
                  "font-size": "16px",
                  "font-weight": "bold",
                  "color": "=if([$LABEL8] =='', '#bdbfbe', '[$COLOR]')",
                  "cursor": "=if([$Author.email] == @me, 'pointer', '')",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=if([$LABEL8] =='', 'Label 8', [$LABEL8])",
                "attributes": {
                  "title": "[$LABEL8]"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "height": "22px",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "flex-end"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$VALUE8]",
                    "style": {
                      "height": "22px",
                      "width": "60px",
                      "box-sizing": "border-box",
                      "display": "=if([$Author.email] == @me, 'flex', 'none')",
                      "align-items": "flex-end",
                      "justify-content": "flex-end",
                      "font-size": "20px",
                      "font-weight": "bold",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "sp-css-color-BlackText"
                    },
                    "txtContent": "[$VALUE8]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "1",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "box-sizing": "border-box",
              "border-radius": "50%",
              "border": "solid 1px lightgrey",
              "height": "280px",
              "width": "280px"
            },
            "children": [
              {
                "comment": "this specific svg contains the paths corresponding to the circular grids and axes",
                "elmType": "svg",
                "style": {
                  "position": "absolute",
                  "width": "280px",
                  "height": "280px"
                },
                "attributes": {
                  "viewBox": "0 0 280 280"
                },
                "children": [
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 3 , 'M 140.017 140.115 L 29 224', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 3 , 'M 140.017 140.115 L 252 224', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 5 || [$DATAPOINTS] == 3, 'M 140 0 L 140 140', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 5, 'M 272.693 97 L 139.5 140.4', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 5, 'M 221.696 252.711 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 5, 'M 58.266 252.711 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 5, 'M 7.5 97 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 6, 'M 260.654 209.58 L 19.346 70.491', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 6, 'M 260.654 70.491 L 19.346 209.58', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7 , 'M 139.5 0.681 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 248.641 53.438 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 139.5 140.5 L 275.826 171.172', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 200 265.522 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 79.479 265.522 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 4.174 171.172 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 4.174 171.172 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 7, 'M 31.614 53.438 L 139.5 140.5', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 8, 'M 41.799 41.864 L 238.456 238.427', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 8, 'M 238.456 41.864 L 41.799 238.427', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 8 || [$DATAPOINTS] == 6 || [$DATAPOINTS] == 4, 'M 140 0 L 140 280', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 8 || [$DATAPOINTS] == 4, 'M 0 140 L 280 140', '')"
                    },
                    "style": {
                      "stroke": "lightgrey"
                    }
                  },
                  {
                    "comment": "Warning! This is the core where the magic takes place. The underlying calculation is based on Math proportions. For example 140:score = x:value",
                    "elmType": "path",
                    "attributes": {
                      "d": "=if([$DATAPOINTS] == 3, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE]) +' L ' + toString(140+112*[$VALUE2]/[$SCORE]) + ' ' + toString(140+84*[$VALUE2]/[$SCORE]) + ' L '+ toString(140-111*[$VALUE3]/[$SCORE]) + ' ' + toString(140+84*[$VALUE3]/[$SCORE]) + ' Z', if([$DATAPOINTS] == 4, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE])+ ' L ' + toString(140+140*[$VALUE2]/[$SCORE]) +' 140 L 140 ' + toString(140+140*[$VALUE3]/[$SCORE]) + ' L ' + toString(140-140*[$VALUE4]/[$SCORE]) + ' 140 Z', if([$DATAPOINTS] == 5, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE]) + ' L '+ toString(140+132.5*[$VALUE2]/[$SCORE]) + ' ' + toString(140-43.733*[$VALUE2]/[$SCORE]) + ' L ' + toString(140+81.89*[$VALUE3]/[$SCORE]) + ' ' + toString(140+112.03*[$VALUE3]/[$SCORE]) + ' L ' + toString(140-81.89*[$VALUE4]/[$SCORE]) + ' ' + toString(140+112.03*[$VALUE4]/[$SCORE]) + ' L ' + toString(140-132.5*[$VALUE5]/[$SCORE]) + ' ' + toString(140-43.733*[$VALUE5]/[$SCORE]) + ' Z', if([$DATAPOINTS] == 6, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE]) + ' L ' + toString(140+120.654*[$VALUE2]/[$SCORE]) + ' ' + toString(140-69.659*[$VALUE2]/[$SCORE]) + ' L ' + toString(140+120.654*[$VALUE3]/[$SCORE]) + ' ' + toString(140+69.659*[$VALUE3]/[$SCORE]) +' L 140 ' + toString(140+139.319*[$VALUE4]/[$SCORE]) + ' L ' + toString(140-120.654*[$VALUE5]/[$SCORE]) + ' ' + toString(140+69.66*[$VALUE5]/[$SCORE]) + ' L ' + toString(140-120.654*[$VALUE6]/[$SCORE]) + ' ' + toString(140-69.66*[$VALUE6]/[$SCORE]) +' Z', if([$DATAPOINTS] == 7, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE]) + ' L ' + toString(140+108.92*[$VALUE2]/[$SCORE]) +' ' + toString(140-86.87*[$VALUE2]/[$SCORE]) + ' L ' + toString(140+135.82*[$VALUE3]/[$SCORE]) + ' ' + toString(140+31*[$VALUE3]/[$SCORE]) + ' L ' + toString(140+60.44*[$VALUE4]/[$SCORE]) + ' ' + toString(140+125.52*[$VALUE4]/[$SCORE]) + ' L ' + toString(140-60.45*[$VALUE5]/[$SCORE]) + ' ' + toString(140+125.52*[$VALUE5]/[$SCORE]) + ' L ' + toString(140-135.83*[$VALUE6]/[$SCORE]) + ' ' + toString(140+31*[$VALUE6]/[$SCORE]) + ' L ' + toString(140-108.93*[$VALUE7]/[$SCORE]) + ' ' + toString(140-86.87*[$VALUE7]/[$SCORE]) +' Z', if([$DATAPOINTS] == 8, 'M 140 ' + toString(140-140*[$VALUE1]/[$SCORE]) +' L ' + toString(140+98.52*[$VALUE2]/[$SCORE]) + ' ' + toString(140-98.52*[$VALUE2]/[$SCORE]) + ' L ' + toString(140+139.319*[$VALUE3]/[$SCORE]) + ' 140 L ' + toString(140+98.51*[$VALUE4]/[$SCORE]) + ' ' + toString(140+98.51*[$VALUE4]/[$SCORE]) + ' L 140 ' + toString(140+139.319*[$VALUE5]/[$SCORE]) + ' L ' + toString(140-98.52*[$VALUE6]/[$SCORE]) + ' ' + toString(140+98.51*[$VALUE6]/[$SCORE]) + ' L ' + toString(140-139.319*[$VALUE7]/[$SCORE]) + ' 140 L ' + toString(140-98.52*[$VALUE8]/[$SCORE]) + ' ' + toString(140-98.52*[$VALUE8]/[$SCORE]) + ' Z', ''))))))"
                    },
                    "style": {
                      "fill": "=if([$COLOR] =='', 'Grey', [$COLOR])",
                      "stroke": "=if([$COLOR] =='', 'Grey', [$COLOR])",
                      "fill-opacity": "70%"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "box-sizing": "border-box",
                  "border-radius": "50%",
                  "border": "solid 1px lightgrey",
                  "height": "210px",
                  "width": "210px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "align-items": "center",
                      "justify-content": "center",
                      "box-sizing": "border-box",
                      "border-radius": "50%",
                      "border": "solid 1px lightgrey",
                      "height": "140px",
                      "width": "140px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "box-sizing": "border-box",
                          "border-radius": "50%",
                          "border": "solid 1px lightgrey",
                          "height": "70px",
                          "width": "70px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}