Metric Comparison Card
Side-by-side display of multiple KPIs with current vs previous values and change indicators.
Key Metrics Overview
Current period vs previous period
Use a metric comparison card when…
- Dashboard overviews with 3-6 key metrics
- Period-over-period comparison at a glance
- Executive summary panels
Avoid when…
- More than 8 metrics (becomes overwhelming)
- When trend shape matters - use sparklines or line charts
- Deep-dive analysis
Data it needs
| Property | Value |
|---|---|
| Min Rows | 2 |
| Min Columns | 3 |
| Column Types | stringnumbernumber |
| Notes | Each row is one metric with current and previous values. |
Visual anatomy
Guiding principles
- DesignData-Ink Ratio
High data density - multiple metrics in compact space
- ContextAbove All Else, Show the Data
Direct labeling for each metric and its delta
- IntegrityGraphical Integrity
Encode polarity explicitly — for metrics where down is good (churn, latency, error rate), the delta arrow color must reflect 'good/bad', not 'up/down'
Consider instead
Common mistakes
Inconsistent formatting across metrics (mixing %, $, counts)
No indication of whether up is good or bad for each metric
Too many decimal places cluttering the display
History
Descended from balanced scorecard methodologies; became standard in SaaS dashboards with tools like Datadog, Mixpanel, and Stripe.
Accessibility notes
Use a definition list or table markup. Express change direction in text, not just color or icon.
Related reading
Got data? Let's see what works.
Drop your CSV. You'll get a Metric Comparison Card plus four alternatives - ranked by which one actually fits your data best.