ComponentsCharts

Sparkline

An axis-less mini trend in plain SVG — light enough for a hundred table rows. Line, area, bars and win/loss; token colours; null gaps; a shared domain to compare rows; fluid width with crisp strokes. Decorative unless you give it a label.

Plain SVG components/sparkline.tsxtheme · material · accent · density · font

line

area + last

bars

win / loss

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Sparkline, sparklineSummary } from "@vamos-ui/react";

<Sparkline values={[4, 6, 5, 8, 7, 9, 12]} className="text-accent-ink" />
<Sparkline values={weekly} variant="bars" size="xs" label={sparklineSummary(weekly)} />

Time runs left to right in every direction (not mirrored in RTL).

Examples

In a table

size="xs" (64×20) with one domain for every row, so heights compare. null leaves a gap (page did not exist yet).

Page	Views	Change
/blog/qr-menus-guide	610	Up 18.0%
/menu	445	Up 2.0%
/reservations	170	Down 8.0%
/blog/local-seo-2026	410	Up 41.0%

Target line and markers

reference draws a dashed line; showMinMax and showLast add dots. With label it becomes role="img".

Daily bookingstarget 25 / day

Fluid width

width="100%" stretches the viewBox; strokes and dots stay crisp (non-scaling stroke).

Orders per hour · today

00:0012:0023:00

API

Sparkline

Prop	Type	Default
`values` Oldest first; null is a gap. Empty → dashed placeholder.	`(number \| null)[]`	`—`
`variant` Mark type. winloss uses the sign of each value (success / danger).	`"line" \| "area" \| "bars" \| "winloss"`	`"line"`
`size` 64×20 / 96×32 / 160×40.	`"xs" \| "sm" \| "md"`	`"sm"`
`width` Overrides size; "100%" fills the container.	`number \| "100%"`	`—`
`height` Overrides size.	`number`	`—`
`color` "chart-1".."chart-6" \| "accent-ink" \| "success" \| … or any CSS colour.	`SparklineColor`	`currentColor`
`strokeWidth` Line width.	`number`	`1.6`
`showLast` Dot on the last value (bars: dims the others).	`boolean`	`false`
`showMinMax` Dots on the low and high points.	`boolean`	`false`
`reference` Dashed reference line (target, average).	`number`	`—`
`domain` Shared scale across rows.	`[number, number]`	`—`
`label` Accessible description (role="img"); otherwise aria-hidden.	`string`	`—`

Helpers

Prop	Type	Default
`sparklineSummary(values, format?)` "Rose from 4 to 14, peak 14" — a starting point for label.	`string`	`—`
`sparklineDirection(values)` Direction from first to last value.	`-1 \| 0 \| 1`	`—`
`sparklineColor(token)` "chart-2" → "var(--chart-2)".	`string`	`—`

Sortable

Spinner