Charts · Sparkline

Sparkline

Word-sized chart for inline data context. Tufte canon — “data at the point where it is read.” Designed to live inside paragraphs, metric cards, and table cells.

Preview

Inline (Tufte pattern)

Daily signups have trended up over the last 12 days. The chart sits at word-scale, not as a separate figure.

Installation

npx shadcn@latest add brockui.com/r/sparkline

Usage

import { Sparkline } from "@/components/marks/sparkline";

const data = [4, 6, 5, 8, 11, 9, 13, 18, 22, 19, 17, 14];

export function Example() {
  return <Sparkline data={data} width={280} height={80} />;
}

Inline usage

<p className="text-sm">
  Daily signups trended up{" "}
  <Sparkline data={data} width={48} height={14} gap={1} />
  {" "}over the last 12 days.
</p>

Props

Name	Type	Default	Description
data	number[]	—	Array of values to render as bars
width	number	280	Chart width in pixels
height	number	80	Chart height in pixels
gap	number	2	Gap between bars in pixels

When to use

Inside metric cards, table cells, paragraphs of prose, or anywhere a trend is secondary context — not the main figure. Word-sized so it doesn’t demand attention; embedded so it provides instant context without forcing a glance away.

When not to use

For standalone charts with axes and tooltips use Bar Chart or Line Chart. Sparklines have no axis, no labels, no legend — only the shape of the trend. If readers need exact values, pair the sparkline with a number next to it.

Design principle

Word-sized graphics (Tufte). Same accent color as everywhere else via --brock-accent. No axes, no annotations — the bars are the data. The component renders as inline SVG so it sits inside flowing text without breaking line height.

Inspired by

· Edward Tufte — “word-sized graphics”
· Stripe annual letters — embedded trend bars in prose
· Financial Times graphics — inline charts alongside narrative