> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Basic Metrics Card

> Compare the Metrics card component across the Free, Basic, Professional, and Dedicated editions. Learn how to use the Metrics card to display key business data such as sales volume and sales amount, with detailed steps for configuring a dataset, selecting chart display fields (metrics and secondary metrics), and adjusting style settings. Additional reading materials are provided for further learning.

| **Feature**            | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ---------------------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Metrics card component | Supported     | Supported         | Supported                | Supported             |

## 1. Introduction

### 1.1 Overview

Use the Metrics and Icon settings to display the metric values and icons that matter most. Icons also support click-through drill-down.

Highlight: You can resize the component, but you cannot change the alignment of the Metrics card (left, center align, right).

### 1.2 Use Cases

For example, display metric values such as sales volume and sales amount.

### 1.3 Basic Requirements

| **Metric**                | **Secondary metric**      | **Metric field type**                                                                 |
| ------------------------- | ------------------------- | ------------------------------------------------------------------------------------- |
| Required, up to 30 fields | Optional, up to 30 fields | Must be a Rollup field.<br />Fields used inside a formula must also be Rollup fields. |

## 2. Steps

### 2.1 Select the Component and Configure the Dataset

Add a dataset.

### 2.2 Select the Chart Display Fields (Metric and Secondary Metric)

**Metric**: The total value of the data. Supports aggregation.

**Secondary metric**: Optional. Supports aggregation.

**Select a field directly from the dataset, or generate one using a formula. For details, see** [**Report formulas**](/yida/form/yrofmw).

Select data.

#### 2.2.1 Secondary Metric

The secondary metric works the same way as the year-over-year field in the **2.0 report Metrics card**. It shows the trend of a specific metric value. For example, to compare the number of submissions today with yesterday, configure it as follows:

* Set the metric field to the count, and set the secondary metric to the date field in the form.

* Set a filter condition to display only today's data.

* Configure the time offset. Choose an offset that matches your scenario.

* In the metric settings, select the date field of the secondary metric. For the displayed value, choose Percentage difference, Original value, or Absolute difference.

* Final comparison.

Note: Only one of the metric field and the secondary metric can have a time offset. Setting both triggers an error, as shown below:

### 2.3 Style Settings

Style settings.

* Side bar: Can be turned on.
* Side bar color: Configurable.

Configure the side bar.

* Size: Choose Large metrics card or Small metrics card to adjust the size automatically.
* Metric font size: Choose Normal or Large to adjust the font size inside the Metrics card automatically.

Metrics card size and Font Size.

* Columns per row: The number of fields displayed in a single row. The default is 4 and is adjustable.

Example: Three fields are selected as metrics on the Data page. In the style settings, Columns per row is set to 2, so two fields appear in the first row and the third field wraps to the second row, as shown below:

Columns per row effect.

* Maximum height: Adjusts the overall height of the Metrics card.
* Tooltip position: The tooltip appears only after the field's metric settings are configured, as shown below:

Metric settings.

Final result:

## 3. More Information

[Other settings](/yida/report/qpdzl5)

## 4. Further Reading

HR and administration case study — Employee management system integrated with the workbench

How do I display data from two tables in a single report component?