When should I use a kpi card?

Executive dashboards ● Highlighting a single key metric ● At-a-glance performance monitoring ● Pairing a headline number with an inline sparkline trend

When should I avoid a kpi card?

Comparing many metrics side by side ● When trend over time matters more than the current value ● Detailed analysis

What are common mistakes with kpi cards?

Showing too many KPI cards at once, diluting focus ● Missing context - no comparison or trend indicator ● Using ambiguous labels for the metric ● Comparing against an arbitrary baseline (e.g., 'always vs previous month') when the comparison isn't meaningful for the metric

What data does a kpi card need?

Minimum 1 rows, 2 columns (string, number). Optionally a second row for the previous-period value to compute delta.

Specialized

KPI Card

A bold single-metric display card showing a headline number with optional comparison to a previous period.

Monthly Revenue

Compared to previous period

Make a kpi card with your data

Use a kpi card when…

Executive dashboards
Highlighting a single key metric
At-a-glance performance monitoring
Pairing a headline number with an inline sparkline trend

Avoid when…

Comparing many metrics side by side
When trend over time matters more than the current value
Detailed analysis

Data it needs

Property	Value
Min Rows	1
Min Columns	2
Column Types	stringnumber
Notes	Optionally a second row for the previous-period value to compute delta.

Visual anatomy

Marks

textbadgeicon

Channels

font-size (headline)color (delta indicator)icon (delta direction — ▲/▼)

Axes

Guiding principles

Consider instead

Bullet Chart

When actual vs target context is needed

Gauge Chart

When progress toward a goal is the focus

Common mistakes

Showing too many KPI cards at once, diluting focus
Missing context - no comparison or trend indicator
Using ambiguous labels for the metric
Comparing against an arbitrary baseline (e.g., 'always vs previous month') when the comparison isn't meaningful for the metric

History

Evolved from balanced scorecard dashboards popularized by Kaplan and Norton in the 1990s, with a parallel lineage in executive 'cockpit' / digital-dashboard products of the same era. KPI cards became ubiquitous with modern BI tools like Tableau and Power BI.

Accessibility notes

Use semantic HTML headings for the metric value and provide the delta as text (e.g., '+12% vs previous period'), not color alone. For real-time dashboards, mark the value container with aria-live='polite' so screen readers announce updates without yanking focus.

Got data? Let's see what works.

Drop your CSV. You'll get a KPI Card plus four alternatives - ranked by which one actually fits your data best.

Try it free