# Metric Card

> A single metric with a delta chip, prior-period comparison, and a median-graded trend

Canonical: https://ext.tableauops.com/knowledge/kit/metric-card
Updated: 2026-09-18
Author: Eric Summers

A custom mark type that turns **one measure + one date** into a clean, interactive
metric card, bound to the Marks card (so it travels with the worksheet).

> Shared viz-extension techniques (reading encodings, live updates, responsive/no-scroll
> degradation, etc.) live globally in [`reference/viz-extensions.md`](../../reference/viz-extensions.md).
> This file covers only what's specific to the Metric Card.

## What it is
- **Headline value (BAN)** + a **▲/▼ delta chip** and a **comparison line**.
- **Comparison** resolves by the mode you pick:
  - **Period over period** (default), latest period vs the one before it. No setup.
  - **Prior period (parameters)**, split the bound rows by two workbook date
    parameters (`Prior Period Start` / `Prior Period End`): rows in that range are
    the reference, rows after it are the current window. One parameter pair works
    for every card on the dashboard.
  - **Prior period (flag field)**, a boolean field on the **Prior flag** shelf marks each row
    prior (TRUE) or current. The prior rows become the reference.
  - **None**, value + chart only.
- **Trend chart**: **median-graded bars** (bars on the "good" side of the median
  read bold, the other side fades, so notable periods pop without a hover) or a
  **line/area**. Hide it entirely for a big-number tile.
- **Value ↔ chart balance** slider grows the number and shrinks the chart (or the
  reverse) without changing the tile size.
- **Number format**: number, currency, percent (with a 0–1 ratio option), or
  duration (a seconds value as `HH:MM:SS`), applied to the headline, chart labels,
  and tooltips. Optional compact `K/M/B` abbreviation.
- **Aggregation**: auto (read from the field name), sum, average, min, max, median.
- **Direction**: mark whether up or down is "good", colors the delta accordingly.
- **Scrub** a point to read it; **brush** a date window (drag) to select those marks
  and filter the dashboard; click / double-click resets.
- Light / dark theme, size scale, a user-pickable accent, and it sheds detail near
  the size limits down to number-only.
- **Configure** (the ⚙ gear, top-right) live-previews every change on the card as
  you make it; Save persists to the workbook.

## Encodings (Marks card)
| Tile | Required | Accepts |
|------|----------|---------|
| **Measure** | yes | one continuous **measure** (e.g. `SUM(Sales)`), the headline + chart value |
| **Date** | yes | one **date**, use a continuous date (e.g. `MONTH(Order Date)`) |
| **Prior flag** shelf | no | a **boolean** field, TRUE for prior-period rows, only for the "prior period (flag field)" comparison mode |

## Run it locally
From the repo root: `python scripts/kitserve.py` (serves every extension on 8765).
It answers on both IPv4 and IPv6 and resolves `lib/` to `_shared/lib`; a plain
`python -m http.server` does neither, which is what makes a local extension load
as a blank or errored zone.

In Tableau, on a worksheet's **Marks card** → mark-type dropdown → **Add Extension… → Access Local
Extensions** → `manifest.local.trex`. Drag a measure onto **Measure** and a
continuous date onto **Date**.

## Get it

Metric Card ships in the Extension Kit ($59). See it live on the [demo gallery](/kit/demo/metric-card).


---
Try it live: See it live — https://ext.tableauops.com/kit/demo/metric-card