# KPI Viz Card

> The KPI card built as a viz extension. A Tableau viz extension in the TableauOps kit, hosted on your own dashboards.

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

A custom mark type that turns **one measure + one date** into an 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.) are **not** repeated here, they live globally in
> [`reference/viz-extensions.md`](../../reference/viz-extensions.md). This file covers only
> what's specific to the KPI Card.

## What it is
- **Current value** (latest period) + **▲/▼ period-over-period delta** pill.
- **Chart type**: line, area, or bars, or hide the chart entirely. With the chart hidden the
  card centers as a big-number tile.
- **Comparisons, stackable**: MoM (the delta pill), YoY (vs. a point ~1 year back, when the
  data spans that far), vs Goal (vs. 1.15× the active range's average).
- **Overlays**: a dashed goal line on the chart, min/max/avg/total, the trend pill
  (rising/falling/flat), and bar value labels (bars chart type, wide-enough bars only).
- **Fills**: solid accent, a two-color **gradient** (accent → second color), or, with a
  second measure bound to **Color** and the bars chart type, the bars **ramped by that second
  measure** (bar length = measure 1, bar color = measure 2, e.g. length = Sales, color = Profit).
- **Number format**: currency, plain number, or percent, applied everywhere a value shows
  (the headline, stats, tooltips).
- **Scrub** the sparkline to retarget the value + delta to a period; **brush** a date window
  to recompute over just that range; click / double-click resets.
- Scales to fill any pane and sheds detail near the limits down to number-only (see the global
  responsive pattern).
- **Configure** (the ⚙ gear, top-right) also live-previews every change on the card as you make
  it, Save still persists to the workbook, same as any extension.

## Encodings (Marks card)
| Tile | Required | Accepts |
|------|----------|---------|
| **Measure** | yes | one continuous **measure** (e.g. SUM(Sales)), this is the bar length / line value |
| **Date** | yes | one **date**, use a continuous date (e.g. MONTH(Order Date)) |
| **Color** | no | an optional **second measure** (e.g. SUM(Profit)), ramps the bar fill when "color bars by the 2nd measure" is on |

## 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

KPI Viz Card ships in the Extension Kit ($59). Browse the [kit](/kit).


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