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.

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.

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.

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.

---