Sparkline#

A time series in one line, or a few — the "is this going up?" glyph a dashboard needs and a ProgressBar cannot give, since that is a single ratio.

Import#

TSX
import { Sparkline } from '@sigx/terminal';

Usage#

TSX
<Sparkline label="req/s" values={rps.value} value={`${last}`} width={40} />

Three things it deliberately does not do#

Each of these is a way a sparkline can lie, so each is refused by default:

  • It does not anchor the scale to the series minimum. A flat line at 1000 req/s would otherwise draw as a mountain range. Pass baseline="min" if you genuinely want that framing.
  • It does not let a tiny non-zero value round away to the baseline. "Almost nothing" and "nothing" are different readings.
  • It does not draw a gap as a zero. null renders as ·, because a counter reset and an idle period are different facts.

Density#

variant="braille" packs two samples per cell, doubling horizontal density. height buys proportionally more vertical levels.

Props#

PropTypeNotes
values(number | null)[]requirednull is a gap, not a zero
width / heightnumbercells; height adds vertical levels
maxnumberfix the top of the scale
baselinenumber | 'min'the bottom of the scale
variantSparkVariant'braille' doubles horizontal density
label / labelWidthstring / numberleading label, fitted to a column
valuestringtrailing readout
colorstringtheme token
thresholdsThreshold[]colour by magnitude
padbooleanpad to width

See also#

  • Meter — a single ratio rather than a series.
  • BarChart — labelled bars on one shared scale.