> 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

<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*.

***