# Metric Chart

<figure><img src="/files/CLfrzHD14xoe8oQouWN1" alt="" width="181"><figcaption></figcaption></figure>

The **Metric Chart** in *Infinity* provides a visually engaging way to track key numerical values with trend indicators. This chart type allows you to display **three** main input values:

1. **Primary Metric** – The main numerical value you want to highlight.
2. **Secondary Metric** *(optional)* – A supporting numerical value for additional context.
3. **Trend Indicator** *(optional)* – A visual arrow that indicates positive or negative movement in the data:
   * **Up Arrow (↑)** for positive trends (`+1`)
   * **Down Arrow (↓)** for negative trends (`-1`)
   * If **no value** is passed, the trend indicator is **not shown**.

<figure><img src="/files/80QTDhHjuA6U5kMWxdaO" alt="" width="375"><figcaption></figcaption></figure>

### Customization Options

You can customize various aspects of the **Metric Chart** through the **Advanced Editor**:

#### How to Access Customization Settings

1. Click on the **Metric Chart** to select it.
2. Click on the **"Advanced Editor"** button at the top of the chart.
3. Navigate to the **"Styles"** tab.
4. Modify different elements such as **Title, Subtitle, Primary Metric, and Secondary Metric** based on your preferences.

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

#### 1. **Title & Subtitle**

* The **Title** appears at the top of the chart, while the **Subtitle** appears at the bottom.
* Both **Title** and **Subtitle** support customization:
  * **Font Family** (e.g., SF Pro)
  * **Font Size**
  * **Bold & Italic Formatting**
  * **Text Color**
  * **Alignment** (Left, Center, Right)

#### 2. **Primary & Secondary Metrics**

* The **Primary Metric** represents the main value, while the **Secondary Metric** serves as a supporting number.
* Both metrics can be individually customized by navigating to **Styles > Primary Metric** or **Styles > Secondary Metric** and adjusting:
  * **Font Family & Size**
  * **Bold & Italic Formatting**
  * **Alignment (Left, Center, Right)**
  * **Color Selection** (Static or Dynamic)
  * **Format Options**:
    * **Short** (Compact number representation)
    * **Double** (Full decimal precision)
    * **Percentage (%)**
    * **Currency ($, €, etc.)**

#### 3. **Dynamic Color Based on Value**

* Under **Styles > Primary Metric** (or **Secondary Metric**), enable **Dynamic Colors** to automatically adjust metric colors based on value:
  * **Positive Values** – Display in a defined **blue** (e.g., `#118AB2`)
  * **Negative Values** – Display in a defined **red** (e.g., `#EF476F`)
* If **Dynamic Colors** is disabled, you can manually set a **static color**.

#### 4. **Trend Indicator**

* The **Trend Indicator** provides a quick visual cue for changes.
* It supports:
  * **Upward Arrow (↑)** for positive trends (`+1`)
  * **Downward Arrow (↓)** for negative trends (`-1`)
  * **No indicator** when no value is passed.

By leveraging the **Advanced Editor** under the **Styles** tab, you can fully customize the **Metric Chart** to match your visualization needs in *Infinity*.

***


---

# 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.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/featured-chart-examples/metric-chart.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.