> For the complete documentation index, see [llms.txt](https://tsdocs.vitaracharts.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tsdocs.vitaracharts.com/readme/kpi-animation-chart.md).

# KPI Animation Chart

Gauges are often used in business to show critical measurements. They typically display a single essential performance metric and are prominently displayed on the dashboard. Custom gauges in VitaraCharts include animated views to increase aesthetics while also drawing the user’s attention to the KPI.  

## Inputs <a href="#inputs" id="inputs"></a>

Metrics - 2 metrics required. Metric 1, M1 will be the numerator and Metric 2 M2 will be the denominator making the displayed value as M1/M2 as a percentage. Attribute - Optional&#x20;

The screenshot below displays the Profit Margin as a percentage value. The default color shown is blue on a white background but can be altered as desired for gauge or background.

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

In Vitara charts, the text formattings for the KPI animation chart are introduced. We can now format the text and change the vertical alignment of the text. Below is the example, where the alignment is ‘Top’ and some text formattings are done.

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

## Thresholds <a href="#thresholds" id="thresholds"></a>

Based on the ratio of the two metrics we can apply thresholds on ring, wave or on the background of the chart. Hover the cursor on the chart, Click on the ‘Edit’ button and select the ‘Thresholds’ option in the properties window.

Open the property editor by clicking on the ‘Edit’ button and select the ‘Threshold’ tab.

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

The target thresholds can be applied on source metrics too. Only the ‘Ratio’ option is available in Source threshold, now the metrics can also be sourced.

Below is the example where the Target selected as ‘Wave’ and Source as ‘Profit’ and applied threshold condition as Greater than >20.

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

### Thresholds Priority <a href="#thresholds-priority" id="thresholds-priority"></a>

When multiple thresholds are applied to the same metric, the most recently added threshold takes precedence—even if the conditions differ.

For example, if a threshold is applied to the Cost metric with a "greater than" condition and sets a background color, and then another threshold is added to the same Cost metric with a different condition that includes a text color and a marker, the chart will reflect only the styling from the most recently applied threshold.

#### Background Image <a href="#background-image" id="background-image"></a>

The steps to set a background image for all Vitara charts are explained in [*backgroundImage*](/readme/background-images.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://tsdocs.vitaracharts.com/readme/kpi-animation-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.