# KPI Tile

The KPI tile charting component displays the sum of quantity for progressive evolution. KPI is a measurable value that demonstrates how effectively a company is achieving key business objectives. The users can get a quick view of prominent trends, indicators, and values based on the various metrics of the business. Proper use of KPI helps in reducing the number of components used in the dashboard for multiple parameters for better performance. It contains the Sparkline component and Trend in build in it.

## **Best Situations to Use a KPI Tile**

To provide information about the current performance of a company or organization at a glance

## **Default KPI Tile Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FmftwuipmDmINQG7sRxqm%2Fdefault%20component%20image.png?alt=media&#x26;token=8f624b8f-5053-4703-8813-6ff9a58602a4" alt=""><figcaption></figcaption></figure>

## **Properties of the KPI Tile**

### **Background and Style**

The user can get the reflection of the chart by enabling the shadow option. It is possible to change the color, and increase or decrease the transparency of the shadow. The user can change the background color and change its opacity. The user can also change the Margin tile width.

![](/files/PNPxoIOpR7CMJskXfnnw)

### **Category**

The user can change category field properties like font color-family weight etc.

![](/files/JzrGLK7a2ozUEToxXDQs)

### **General**

* The user can change the height, width, top, and left values.&#x20;
* If initial visibility is not enabled, then the chart won’t be available for the first preview.&#x20;
* The user can change the direction between Horizontal and vertical. Also, the user can change the + trend color, negative trend color, and zero trend color.&#x20;
* This will become useful if we have chosen the indicator type as Trend from the dataset section.
* The user can also change the Sparkline border color and fill color. It becomes useful if the user has selected the indicator type as Sparkline.

&#x20;     ![](/files/j7gUpfgY8KnPWTpwq1YW)

### **Primary Series**

The user can set the font color as well as font style-weight-family, etc. for the primary category (first series field) in this section.

![](/files/3A5OpW8XHO6oVPA16Dez)

### **Secondary Series**

The user can set the font color as well as font style-weight-family, etc. for the primary category (second series field) in this section.

![](/files/2W1mioXNOTGriSw28Oho)

## **Dataset Indicator Properties**&#x20;

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FMIsLgR72Jjf5fqbnzJ1I%2FIndicator%20Properties.png?alt=media\&token=1f94b7f8-4cc6-4aa7-84fc-e38fd73026dd)

##

## Data Used

The following data was used to generate the given example:

<table><thead><tr><th>Primary Series(Yearly Profit)</th><th width="182">Secondary Series</th><th>trend</th><th width="117">sparkline</th><th>Value Field</th></tr></thead><tbody><tr><td>50000000</td><td>Sales  &#x26; Marketing1</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from Dashboard Designer.</td></tr><tr><td>60000000</td><td>Sales  &#x26; Marketing2</td><td>60,10,40</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from BI story</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing3</td><td>20,4,80</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from Predictive Analysis</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,80,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL1</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL2</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL3</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL</td></tr><tr><td>50000000</td><td>Sales  &#x26; Marketing4</td><td>50,80,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL</td></tr><tr><td>456734</td><td>Sales  &#x26; Marketing4</td><td>50,10,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL-456</td></tr><tr><td>45674</td><td>Sales  &#x26; Marketing4</td><td>50,80,60</td><td>350000,  -450000,  300000,  -200000,  500000,  -2500000,  450000,  -450000,  650000,  -300000,  200000,  -600000 </td><td>Profit from ETL-567</td></tr></tbody></table>

Use the ***Value Field*** column as ***Category*** field, ***Primary Series*** and ***Secondary Series*** columns as ***Series, Sparkline*** and ***Trend columns*** as ***Indicator columns** to plot data as shown in the given example below:*&#x20;

<figure><img src="/files/Ht7yBxy2TmdoXanLcywk" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> The user also needs to set the **No. of rows/ columns** from the **General Properties** fields to plot the sample data as displayed in the above-given image. E.g., the current image displays chart with 5 set as the No. of rows/ columns.*
{% endhint %}

## **KPI Tile Variants**

### **Sparkline**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FEF17YWlsZ9XM8wlsei2J%2FSparkline.png?alt=media&#x26;token=fea6411c-afd3-4707-a595-3b51a56249b4" alt=""><figcaption></figcaption></figure>

### **Sparkline with Trend**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Fq5M5PIsa1sCsgxVFHbKv%2FSparkline%20and%20Trend.png?alt=media&#x26;token=c26a2f14-dc56-4949-8bea-76bc1efba2d5" alt=""><figcaption></figcaption></figure>

### **Trend**

<figure><img src="/files/hOyYSuEqS047vwHflQs8" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/governed-dashboards/charts-gallery/charts/kpi-tile.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.