Skip to content

Sparkline

A small trend line for stat cards and table cells, decorative unless you name it.

betaSource

Monthly recurring revenue

$48,210

Installation

pnpm add @syntara/react @syntara/tokens
import { Sparkline } from '@syntara/react';

Usage

import { Sparkline } from '@syntara/react';

export function Trend() {
  return <Sparkline data={[31, 33, 32, 36, 35, 38, 41]} aria-label="Up 32% over 7 days" />;
}

Examples

Tones

brand, success, danger and neutral.

Line variant

Palette slots, a linear curve and a gap for a missing value.

Accessibility

No keyboard interaction of its own.

  • Decorative (aria-hidden) by default: the figure and delta beside it carry the meaning.
  • With aria-label it becomes role="img"; describe the trend in words ("Up 18% over 12 months"), not the raw values.
  • Not focusable and not interactive. For values a reader must inspect, use AreaChart.
  • It mirrors in right-to-left locales, like the time axis.
  • Draw-in and the end-dot pop sit behind prefers-reduced-motion: no-preference.

Guidelines

Do

  • Put the number that matters next to it as text.
  • Size it with CSS (inline-size, block-size); it redraws at its real pixel size.
  • Set --_ring when it sits on a surface other than surface.raised.

Don’t

  • Don't use a sparkline as the only evidence of a trend.
  • Don't use success/danger tones for series that aren't good or bad news.

API reference

Sparkline

dataRequired
Array<number | null>

Values, oldest first. null leaves a gap. Needs at least two values to draw.

variant
  • areadefault
  • line

area adds a gradient fill (24% → 0%) under the line.

curve
  • smoothdefault
  • linear

smooth is monotone cubic and never overshoots.

showEndDot
boolean

A dot on the latest value with a 2px ring in the surface colour.

Default true

tone
  • branddefault
  • neutral
  • info
  • success
  • warning
  • danger

Colour by meaning. Use success/danger only when the direction is good or bad news.

series
1 | 2 | 3 | 4

Colour by chart palette slot, to match a series in a nearby chart. Wins over tone.

yDomain
[number, number]

Fixes the y range; by default the line fills the height.

aria-label
string

Makes it role="img" with this name. Without it the sparkline is aria-hidden.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour7
text.brandtext.subtlefeedback.info.fgfeedback.success.fgfeedback.warning.fgfeedback.danger.fgsurface.raised
Space and size2
space.8space.12
Motion4
motion.duration.slowmotion.duration.springmotion.easingOutmotion.spring
Other4
chart.1chart.2chart.3chart.4