> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/color-admin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/color-admin/components/progress-kpi/configuration.md).

# Configuration

## Properties

| Name    | Defaults | Description                                                                                                                                                      |
| ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| datarow | 0        | When binding to a datatable that contains more than one row, this property specifies which row in the table to use for the binding.  This is a 0 index property. |

## DataMap Properties

Use the [datamap](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) property to configure the data for the Progress KPI.  The component expects these field names in its `data` configuration.

| Name        | Defaults | Description                                                                                  |
| ----------- | -------- | -------------------------------------------------------------------------------------------- |
| color       | null     | The CSS class name to use for the color of the API.                                          |
| description | null     | The description to be displayed under the numeric value                                      |
| icon        | null     | The CSS class name(s) that will render the icon next to the label at the top of the KPI      |
| label       | null     | The label to be displayed at the top the KPI                                                 |
| progress    | 40       | The percentage progress of `value` against a goad.  This number should be between 1 and 100. |
| value       | 0        | The numeric value to be displayed in the middle of the KPI                                   |

Below is an excerpt from the sample page in the Color Admin for WireBootstrap project for the Progress KPI component. 

```javascript
const kpi = new wire.colorAdmin.kpiProgress().render("#kpi", {
    data: this.data.dsKPI,
    datamap: {value: "Sales", progress: "ProfitMargin"},
    label: "SALES",
    color: "bg-gradient-teal",
    icon: "far fa-thumbs-up fa-fw",
    description: "Percent profit margin"
});  
```

Note also in the example above that the component supports static settings for `datamap` attributes directly on the root of the configuration object.  This configuration option can be used for any setting that may not need to be set dynamically based in the implementation.