Tick Strip

A dense strip of thin vertical ticks, one per sample — latency, CPU, queue depth. Where a sparkline shows the shape of a trend, this shows every reading and makes the spikes stand out.

tsx

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

Threshold

Samples at or above threshold take the destructive tone whatever tone says. The threshold is stated in the data's own units.

Sizes and tones

max pins the scale; without it the strip normalises against the series' own peak.

Props

Prop	Type	Default	Description
data	number[]	—	Required. The series, oldest sample first. Non-finite entries read as 0.
threshold	number	—	Samples at or above this take the destructive tone. Compared against raw values.
max	number	series peak	Pins the scale.
tone	"selected" \| "success" \| "warning" \| "destructive" \| "info" \| "muted" \| "chart-1" … "chart-5"	"selected"	The tick colour below the threshold.
size	"sm" \| "default" \| "lg"	"default"	Strip height 12, 20 or 32px, with ticks 1, 2 or 4px wide.
srLabel	string	—	Names the series in the spoken summary — “CPU”, “Disk I/O”.
formatValue	(value: number) => string	—	Formats the readings in the summary. Units belong here.

PreviousTextarea Next Timeline Track

Pesto UI · 117 documented components