{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "90%",
      "height": "60px",
      "display": "flex",
      "flex-direction": "row",
      "margin-left": "40px",
      "margin-right": "40px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "40%",
          "display": "flex",
          "flex-direction": "row-reverse"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "= ([$Sales] / 500 * 100) + '%'",
              "height": "45px",
              "cursor": "pointer",
              "display": "flex",
              "flex-direction": "row",
              "align-items": "center"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "position": "relative",
                  "right": "40px"
                },
                "txtContent": "[$Sales]",
                "attributes": {
                  "class": "ms-fontSize-20"
                }
              }
            ],
            "attributes": {
              "class": "ms-bgColor-blue ms-bgColor-blueDark--hover"
            },
            "customCardProps": {
              "directionalHint": "bottomCenter",
              "isBeakVisible": true,
              "openOnEvent": "hover",
              "formatter": {
                "elmType": "div",
                "style": {
                  "width": "150px",
                  "height": "150px",
                  "display": "flex",
                  "flex-direction": "column",
                  "align-items": "center",
                  "justify-content": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[!Sales.DisplayName]",
                    "attributes": {
                      "class": "ms-fontSize-28 ms-fontColor-blue"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Sales]",
                    "attributes": {
                      "class": "ms-fontSize-42"
                    }
                  }
                ]
              }
            }
          }
        ]
      },
      {
        "elmType": "div",
        "txtContent": "[$Title]",
        "style": {
          "width": "20%",
          "height": "100%",
          "border-left": "2px solid",
          "border-right": "2px solid",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "padding": "5px"
        },
        "attributes": {
          "class": "ms-fontSize-28"
        }
      },
      {
        "elmType": "div",
        "style": {
          "width": "40%",
          "display": "flex",
          "flex-direction": "row"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "= ([$Cost] / 500 * 100) + '%'",
              "height": "45px",
              "cursor": "pointer",
              "display": "flex",
              "flex-direction": "row-reverse",
              "align-items": "center"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "position": "relative",
                  "left": "40px"
                },
                "txtContent": "[$Cost]",
                "attributes": {
                  "class": "ms-fontSize-20"
                }
              }
            ],
            "attributes": {
              "class": "ms-bgColor-red ms-bgColor-redDark--hover"
            },
            "customCardProps": {
              "directionalHint": "bottomCenter",
              "isBeakVisible": true,
              "openOnEvent": "hover",
              "formatter": {
                "elmType": "div",
                "style": {
                  "width": "150px",
                  "height": "150px",
                  "display": "flex",
                  "flex-direction": "column",
                  "align-items": "center",
                  "justify-content": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[!Cost.DisplayName]",
                    "attributes": {
                      "class": "ms-fontSize-28 ms-fontColor-red"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Cost]",
                    "attributes": {
                      "class": "ms-fontSize-42"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}