Azalea

Sparkline

A chart the size of a word.

Two components, because they were two components

Bloom's Sparkline is an SVG area line — the shape of a metric over ninety days, beside the number. Ivy's is a strip of bars, one per day, with the failed part of each in red. Both were called Sparkline. They answer different questions, so they stay two things rather than becoming one with a variant.

Sparkline — a trend. Is this going up.

SparkBars — a distribution. Which day was bad.

Beside the number it explains

This is what a sparkline is for: the figure answers “how much”, the shape answers “and is that normal”. Neither is much use alone.

Deliveries
1,28412%
Bounces
314%

A gap is a fact

A null breaks the line rather than interpolating across it. Joining the two sides draws a straight line through a period nobody measured — the one kind of lie a chart tells silently. The area fill is dropped entirely for a series with a hole, because a filled shape whose outline jumps a gap is not a shape anybody meant to draw.

In both themes

light

dark

Guidance

Use it when

  • Beside a number, in a tile or a table cell. That is the whole shape of the thing.
  • Sparkline for a trend, SparkBars when individual buckets matter and one of them might be bad.
  • A label that says what the shape is of — it is the only thing a screen reader gets.

Reach for something else when

  • An axis, a legend, or a tooltip on Sparkline. Once it needs those it is a chart, and that is ChartFrame.
  • Fewer than two points. A single point is a dot; drawn as a flat line it implies a period of stability nobody measured.
  • aria-hidden. Bloom's was, so the trend beside a number was simply absent for a screen reader.

Props

PropTypeDefaultDescription
Sparkline values(number | null)[]—Oldest first. null is a gap and breaks the line.
Sparkline labelstring—Required. What the shape is of.
Sparkline areabooleantrueThe tint under the line. Dropped automatically for a gapped series.
Sparkline tonestringstroke-[var(--primary)]Tailwind stroke class.
SparkBars bars{ label, value, alert? }[]—One bar each. alert is the part drawn in red at the base.
SparkBars labelstring—Required. What the strip shows.

Accessibility

Both are role="img" with a required name. SparkBars keeps Ivy's per-bar sr-only line, so the strip is readable as numbers rather than only as a shape — the hover tooltip beside it is aria-hidden because it says the same thing twice. A sparkline is small, not decorative: it is often the only shape information on the row.