KPI Card Component
The KPI Card component is the primary tool for presenting headline numeric values to report stakeholders. A single KPI Card can show one metric in a prominent layout (single mode) or a ranked list of metrics in a compact list or grid (multi mode). KPI Cards are typically placed at the top of a report page to set context before the detailed charts and tables that follow.
Card mode
| Mode | Description |
|---|---|
| Single | One prominent card showing a single metric with optional comparison and trend. |
| Multi | Multiple metrics shown together in a list, grid, or two-column layout. |
Single card layouts
| Layout | Description |
|---|---|
| Hero | Large central value with a label below. The default and simplest layout. |
| Comparison | Primary value on the left, comparison value and delta on the right. |
| Sparkline | Hero value with a mini trend chart below it. |
| Progress | Hero value with a progress bar or ring showing completion towards a target. |
| Image | Hero value with an icon or image backdrop (brand or visual indicator). |
| Executive | Hero value with a status icon, delta, and a short label in a compact format for executive summary pages. |
Multi card layouts
| Layout | Description |
|---|---|
| List | Metrics stacked vertically. Suitable for long labels and when values vary greatly in magnitude. |
| Grid | Metrics in a fixed n-column grid. Compact and even. |
| Two column | Metrics split into two columns. Balances compactness and readability. |
In multi mode, configure Sort order and optionally a Top-N limit to show only the highest or lowest ranked metrics.
Core configuration properties
| Property | Description |
|---|---|
| Metric field | The primary numeric value to display. |
| Label | Text shown below or beside the value. Can be a static string or a field. |
| Format | Number format: integer, decimal (N places), percentage, currency, or custom format string. |
| Comparison field | A second value to compare against (e.g., target, budget, prior period). |
| Comparison mode | How the comparison is presented: as an absolute difference, a percentage difference, or a ratio. |
| Comparison label | Text describing what the comparison value represents (e.g., "vs Budget", "vs Prior Month"). |
Trend indicators
Trend indicators add a directional arrow or icon to signal whether the movement from the comparison value is favourable or unfavourable:
| Property | Description |
|---|---|
| Direction polarity | Whether higher is better or lower is better (controls arrow color logic). |
| Up color | Color for an upward arrow. Default green for "higher is better", red for "lower is better". |
| Down color | Color for a downward arrow. Inverse of up color. |
| Flat threshold | The minimum absolute or percentage difference before an arrow is shown (avoids spurious trend icons for negligible changes). |
Progress bar and ring
Available in the Progress single layout:
| Property | Description |
|---|---|
| Target field | The denominator for progress calculation. |
| Progress type | Bar (horizontal) or Ring (circular gauge). |
| Show percentage | Display the calculated percentage alongside the bar. |
| Bar fill color | Color for the filled portion. Can be conditional: green/amber/red based on progress thresholds. |
| Track color | Color for the unfilled portion of the bar or ring. |
Status icon
Add a RAG (Red / Amber / Green) or custom status icon driven by threshold rules:
- In Properties → Status Icon, enable the icon.
- Define threshold rules: e.g., value > 90% → Green, value 70%–90% → Amber, value < 70% → Red.
- Choose an icon set: Circle, Flag, Triangle, Star, or Custom SVG.
Sparkline in single card (Sparkline layout)
The sparkline is a mini chart embedded below the hero value:
| Property | Description |
|---|---|
| Period field | Time dimension for the sparkline x-axis. |
| Value field | The metric to chart. Can differ from the hero value field. |
| Sparkline type | Line, area, or bar. |
| Show first/last points | Highlight the first and last data points with dots. |
| Show peak/trough | Mark the maximum and minimum points. |
Good practice
- Use 3–5 KPI cards at the top of a dashboard-style page. More than that reduces their headline impact.
- In multi mode, keep labels short (< 30 characters) to avoid truncation.
- Pair a KPI Card with a sparkline when month-over-month trend context matters.
- When using RAG status icons, document the thresholds in a footnote or assumptions box on the page.
Related
- Chart Component — trend and comparison charts
- Matrix Component — cross-tabbed KPI summaries
- Table Component — detailed record-level values
- Slicers and Filters — filtering KPI card data