> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/product-tour/record-kpi.md).

# Record KPI

GridMate provides a component to display number or percentage values in a graphical view.

In this tutorial, we will setup a Record KPI of the opportunity Amount and Opportunity. Below is a quick demo on how to configure the KPI components.

{% embed url="<https://youtu.be/vkD3I7myb-Y>" %}
GM - Record Kpi
{% endembed %}

```coffeescript
{
   "sections": [
      {
         "name": "opportunityKPIList",
         "label": "Opportunity KPI",
         "active": true,
         "cols": 3,
         "rows": [
            [
               {
                  "apiName": "ExpectedRevenue",
                  "managedComponent": true,
                  "componentDef": {
                     "component": "gmpkg:kPICurrencyFieldLWC",
                     "attributes": {
                        "color": "red",
                        "radius": "15rem",
                        "thickness": "2rem"
                     }
                  }
               },
               {
                  "apiName": "Amount",
                  "managedComponent": true,
                  "componentDef": {
                     "component": "gmpkg:kPICurrencyFieldLWC",
                     "attributes": {
                        "color": "#78b0fd",
                        "radius": "10rem",
                        "thickness": "0.5rem"
                     }
                  }
               },
               {
                  "apiName": "Probability",
                  "managedComponent": true,
                  "componentDef": {
                     "component": "gmpkg:kPIPercentageFieldLWC",
                     "attributes": {
                        "color": "#45c65a",
                        "radius": "15rem",
                        "thickness": "2rem"
                     }
                  }
               }
            ]
         ]
      }
   ]
}
```

As you can see, KPI component is used with the [GM - Record Layout ](/package-reference/components-library/gm-record-layout.md)component.  We configured three Opportunity fields as KPI : Expected Revenue, Amount and Probability. &#x20;

As of today we support tow KPI: **Currency** and **Percentage**.

### Currency KPI

```coffeescript
{
   "apiName": "ExpectedRevenue",
   "managedComponent": true,
   "componentDef": {
      "component": "gmpkg:kPICurrencyFieldLWC",
      "attributes": {
         "color": "red",
         "radius": "15rem",
         "thickness": "2rem"
      }
   }
}
```

* **component**: gmpkg:kPICurrencyFieldLWC
* **color:**  Ring coloring (default value is #0176d3)
* **radius :** Ring size (default value is 10rem)
* **thickness**: Ring thickness (default value is 1.5rem)

### Percentage KPI

```coffeescript
{
   "apiName": "Probability",
   "managedComponent": true,
   "componentDef": {
      "component": "c:kPIPercentageFieldLWC",
      "attributes": {
         "color": "#45c65a",
         "radius": "15rem",
         "thickness": "2rem"
      }
   }
}
```

* **component**: gmpkg:kPIPercentageFieldLWC
* **color:**  Ring coloring (default value is #0176d3)
* **radius :** Ring size (default value is 10rem)
* **thickness**: Ring thickness (default value is 1.5rem)