Metrics

Metrics: 19 designs across 4 families — Charts · Dashboards · Metric Card · Stats

Designs

RTL VerifiedLTR Verified Metrics

Area Chart

An area closed at zero — negatives hang below it, not flipped

Advanced Charts
RTL VerifiedLTR Verified Metrics

Bar Chart

Bars that read their data — the axes are computed, not typed

Advanced Charts
RTL VerifiedLTR Verified Metrics

Chart Frame

The container and its states — the chart arrives later, in its slot

Intermediate Charts
RTL VerifiedLTR Verified Metrics

Chart Legend

Names the series and switches them off — the state is real, not a class

Intermediate Charts
RTL VerifiedLTR Verified Metrics

Semicircular Gauge

An arc whose angle comes from the ratio and whose length comes from the radius

Advanced Stats
RTL VerifiedLTR Verified Metrics

Micro Candlestick

High, low, open and close on one computed scale

Advanced Stats
RTL VerifiedLTR Verified Metrics

Countdown from a Real Interval

Computes the gap from a real date, so it never drifts

Intermediate Stats
RTL VerifiedLTR Verified Metrics

Deviation from Target

Bars that grow out of zero in both directions by the sign of the gap

Intermediate Stats
RTL VerifiedLTR Verified Metrics

Conversion Funnel

Each stage carries two ratios: from the previous stage and from the first

Intermediate Stats
RTL VerifiedLTR Verified Metrics

Weekly Heatmap

Colour derived from the actual range — not from hardcoded thresholds

Advanced Stats
RTL VerifiedLTR Verified Metrics

HR Dashboard

Dashboard

Intermediate Dashboards
RTL VerifiedLTR Verified Metrics

Line Chart

A line that follows its data — its range is the data's, not a forced zero

Advanced Charts
RTL VerifiedLTR Verified Metrics

Metric Card

One value against a target — the ratio, the state and what remains are computed

Intermediate Metric Card
RTL VerifiedLTR Verified Metrics

Ranked Bars

Sorts itself and scales each bar against the largest

Intermediate Stats
RTL VerifiedLTR Verified Metrics

Period Comparison

Current against previous — the delta computed both ways

Intermediate Stats
RTL VerifiedLTR Verified Metrics

Stats Grid

Four numbers at a glance — every delta computed, not typed

Beginner Stats
RTL VerifiedLTR Verified Metrics

Live Counter

Animates between values smoothly and honours reduced motion

Advanced Stats
RTL VerifiedLTR Verified Metrics

Progress Ring

A share of a target — the ring’s circumference computed from its radius

Advanced Stats
RTL VerifiedLTR Verified Metrics

Stat with Sparkline

The curve is drawn from the data itself — not a static image

Advanced Stats