Charts & metrics

Numbers and their shape: stats, trends, small charts, meters and gauges.

← Component reference

Stats #

Key numbers with labels and trends.

Stat #

Statistic with label, value and hint.

Active users

12,480

+8% this week

<Stat label="Active users" value="12,480" hint="+8% this week" />

Slots: root hint label value

Prop	Type	Required	Description
`label`	`string`	yes	What the number measures.
`value`	`content`	yes	The number or content to feature.
`hint`	`string`		Small context line, e.g. "vs. last week".

Parts

StatGroup #

Row of statistics.

Deploys

128

this week

Success rate

99.2%

Median build

1m 42s

<StatGroup>
    <Stat label="Deploys" value={128} hint="this week" />
    <Stat label="Success rate" value="99.2%" />
    <Stat label="Median build" value="1m 42s" />
</StatGroup>

Prop	Type	Required	Default	Description
`children`	`content`			The `Stat`s to show side by side.

StatCard #

KPI tile with optional trend.

MRR

$48.2k

+6.4%

<StatCard label="MRR" value="$48.2k" hint="vs. last month" trend={6.4} />

Slots: root hint label trend value

Prop	Type	Required	Description
`label`	`content`	yes	What the number measures.
`value`	`content`	yes	The featured number or content.
`hint`	`content`		Context line, e.g. "vs. last month".
`trend`	`number`		Change in percent (arrow and colour by sign).

Metric #

Compact KPI with optional Trend.

p95 latency

182 ms

-4%

<Metric label="p95 latency" value="182 ms" trend={-4} />

Slots: root label row trend value

Prop	Type	Required	Description
`label`	`content`	yes	What the number measures.
`value`	`content`	yes	The number or content.
`trend`	`number`		Change in percent (arrow and colour by sign).

Trend #

▲/▼ delta.

vs. last week

<Trend value={-2.3} label="vs. last week" />

Slots: root arrow

Prop	Type	Required	Default	Description
`value`	`number`	yes		Change in percent; the sign sets the arrow and colour.
`label`	`content`			Context after the value, e.g. "vs. last week".

CountUp #

Animated number (rAF, eased); jumps straight to the value under reduced motion.

<CountUp value={12480} duration={0} />

Prop	Type	Required	Default	Description
`value`	`number`	yes		Number to count up to.
`duration`	`number`		`800`	Animation length in milliseconds (`0` shows the value immediately).

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Sparklines #

Word-sized charts.

Sparkline #

Inline trend line (currentColor).

<Sparkline label="Weekly signups" data={[12, 18, 15, 22, 28, 24, 35]} />

Slots: root line

Prop	Type	Required	Default	Description
`data`	`number[]`	yes		Values to plot, oldest first.
`height`	`number`		`32`	Height in pixels.
`label`	`string`			Accessible summary; the chart is decorative (`aria-hidden`) without one.
`width`	`number`		`120`	Width in pixels.

SparkBar #

Tiny bar chart.

<SparkBar label="Requests per hour" data={[4, 7, 5, 9, 12, 8, 6, 10]} />

Slots: root bar

Prop	Type	Required	Default	Description
`data`	`number[]`	yes		Values to plot as bars, oldest first.
`label`	`string`		`"Bar sparkline"`	Accessible description (default "Bar sparkline").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

BarList #

Ranked horizontal bars.

/4210
/docs2380
/pricing912

<BarList
    data={[
        { id: "home", label: "/", value: 4210 },
        { id: "docs", label: "/docs", value: 2380 },
        { id: "pricing", label: "/pricing", value: 912 },
    ]}
/>

Slots: root bar item label row track value

Prop	Type	Required	Default	Description
`data`	`BarListItem[]`	yes		Rows, in display order.
`format`	`(value: number) => unknown`			Format the value column (default: the raw number).

BarListItem

Field	Type	Required	Description
`id`	`string`	yes	Row id.
`label`	`string`	yes	Row label.
`value`	`number`	yes	Row value; bar lengths are relative to the largest.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

DonutChart #

Percentage ring.

Tests passing

<DonutChart value={68} label="Tests passing" />

Slots: root bar label track

Prop	Type	Required	Default	Description
`value`	`number`	yes		Filled share in percent (0–100).
`label`	`content`			Content in the middle.
`size`	`number`		`96`	Diameter in pixels.
`thickness`	`number`		`10`	Ring stroke width in pixels.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Heatmap #

Grid heatmap of values (e.g. activity).

<Heatmap
    label="Commits per day"
    columns={14}
    values={[
        0, 2, 5, 1, 0, 3, 8, 4, 2, 0, 6, 9, 3, 1, 1, 4, 7, 2, 0, 0, 5, 3, 6, 8, 2, 1, 0, 4,
    ]}
/>

Slots: root cell

Prop	Type	Required	Default	Description
`values`	`number[]`	yes		Flat values, typically 7 columns (weeks × days).
`columns`	`number`		`7`	Cells per row (e.g. 7 for weeks).
`label`	`string`		`"Activity heatmap"`	Accessible summary (default "Activity heatmap").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Meters & gauges #

A value within a range.

Meter #

Scalar gauge in a known range.

<Meter value={62} label="Disk usage" />

Slots: root bar label track

Prop	Type	Required	Default	Description
`value`	`number`	yes		Current value, between `min` and `max`.
`label`	`string`			What is measured (shown and used as the accessible name).
`max`	`number`		`100`	Upper bound.
`min`	`number`		`0`	Lower bound.

Gauge #

Semicircle gauge for a value within a range.

72%CPU

<Gauge label="CPU" value={72} />

Slots: root bar label svg track

Prop	Type	Required	Default	Description
`value`	`number`	yes		Current value, from 0 to `max`.
`label`	`string`		`"Gauge"`	What is measured (shown under the value).
`max`	`number`		`100`	Value at a full gauge.
`size`	`number`		`96`	Width in pixels.

UsageMeter #

Usage of a quota (used / limit) with a meter.

Build minutes1840 min / 2000 min

<UsageMeter label="Build minutes" used={1840} limit={2000} unit="min" />

Slots: root fill header label meta track

Prop	Type	Required	Description
`label`	`string`	yes	What is metered.
`limit`	`number`	yes	Plan limit; the bar turns warning / danger as usage nears it.
`used`	`number`	yes	Amount used.
`unit`	`string`		Unit after the numbers, e.g. `GB` or `min`.

StorageBar #

{@link UsageMeter} preset in GB.

Storage38.2 GB / 50 GB

<StorageBar label="Storage" usedGb={38.2} totalGb={50} />

Slots: root

Prop	Type	Required	Default	Description
`totalGb`	`number`	yes		Storage available, in GB.
`usedGb`	`number`	yes		Storage used, in GB.
`label`	`string`		`"Storage"`	Label text (default "Storage").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

UptimeBar #

Daily uptime history bar.

<UptimeBar
    label="API — last 14 days"
    days={[1, 1, 1, 0.998, 1, 1, 0.97, 1, 1, 1, 0.9, 1, 1, 1]}
/>

Slots: root day

Prop	Type	Required	Default	Description
`days`	`number[]`	yes		0–1 values, oldest → newest
`label`	`string`		`"Uptime history"`	Accessible summary (default "Uptime history").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.