> For the complete documentation index, see [llms.txt](https://docs.getinfinity.app/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/featured-chart-examples/metric-chart.md).

# Metric Chart

In this section, you'll learn how to configure the Metric Chart, customize its appearance using the Advanced Editor, and modify elements such as titles, subtitles, colors, and format options.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FyNPfdofdLYsT1oWESu2r%2Fimage.png?alt=media&amp;token=239e74d4-c241-48db-a853-aa7d139c5e91" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FRKTy9DrrJKrLd2HROSlj%2Fimage.png?alt=media&amp;token=9010ef41-cc79-4679-b9a3-2fc2448ec92d" 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="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FnXIHuWnANRcCj17fnW7z%2Fimage.png?alt=media&amp;token=ace821a4-0096-481b-baae-eb9e6a58aa1f" 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*.

***