Dot Bars

A dot-matrix column series — each column a bottom-aligned stack of dots whose count is the value, with the space above left unpainted.

tsx

1import { DotBars } from "@pestoui/core"

Tones

Columns light from the bottom, at least one dot for any value above zero. The tone is a fill only; the strip carries no text.

Size, rows & scale

rows sets the dots in a full column. max pins the scale — a value above it fills the column and stops there. An empty series holds its height and reads "No data".

Beside a figure

The pairing it is built for: a Stat on the left, the trend on the right.

Success rate

97.4%

+0.6%

Props

Prop	Type	Default	Description
data	number[]	—	The series, oldest first. Non-finite and negative entries read as 0.
rows	number	6	Dots in a full column. Below 1 or non-finite falls back to 6.
max	number	series peak	Pins the scale. Lit dots are ceil(value / max × rows), clamped to rows.
srLabel	string	—	Names the series in the spoken summary: “<srLabel>: latest X, peak Y”, or “No data”.
tone	"selected" \| "success" \| "warning" \| "destructive" \| "info" \| "muted" \| "chart-1" … "chart-5"	"selected"	The dot fill.
size	"sm" \| "default"	"default"	4px dots on a 2px gap, or 6px dots on a 3px gap.

PreviousDivider Next Drawer

Pesto UI · 117 documented components