<!-- Protocore Design System — Sparkline -->
# Sparkline

- **Category:** Charts (`charts`)
- **Slug:** `charts/sparkline`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Sparkline } from "@protocore/pds/charts";`
- **Docs:** https://pds.protocore.io/components/charts/sparkline

> A tiny inline-SVG trend line — currentColor stroke, optional area wash and an accent signal dot.

## When to use it

Reach for **Sparkline** when the *shape* of a trend matters but the exact values do not — a KPI tile, a table cell, a status row. It is deliberately axis-free and label-free.

When a reader needs to compare values, read a scale, or hover for a datum, graduate to a full chart: [LineChart](/charts/line-chart) or [AreaChart](/charts/area-chart) for a time series, [BarChart](/charts/bar-chart) for categories. Sparkline ships in the **main `@protocore/pds` entry** and is fully server-safe — no recharts, no client boundary — so it is cheap to scatter across a dashboard.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `area` | `boolean` | no | `false` | Fill the area beneath the line with a faint `currentColor` wash. |
| `ariaLabel` | `string` | no | — | Accessible label. When set the SVG is exposed as `role="img"`; otherwise it is hidden. |
| `className` | `string` | no | — | — |
| `data` | `number[]` | yes | — | Sample values, oldest → newest. Fewer than two points renders nothing. |
| `height` | `number` | no | `32` | Intrinsic SVG height in px. Defaults to `32`. |
| `signal` | `boolean` | no | `false` | Mark the final point with a small square dot in `--pds-accent` (the signal rule). |
| `style` | `CSSProperties` | no | — | — |
| `width` | `number` | no | `120` | Intrinsic SVG width in px. Defaults to `120`. |

## Examples

### Basics

Pass an array of numbers, oldest → newest. The line scales to its own min/max and inherits `currentColor`, so it takes the ink of whatever text it sits beside. Fewer than two points renders nothing.

```tsx
import { Sparkline } from "@protocore/pds";

const rps = [412, 438, 421, 466, 503, 489, 540, 566, 552, 598, 631, 690];

export default function Demo() {
  return <Sparkline data={rps} ariaLabel="RPC requests per second, last 12 hours" />;
}
```

### Area and signal

`area` fills beneath the line with a faint `currentColor` wash; `signal` marks the final point with a square dot in `--pds-accent` — the one place the brand accent is allowed on a chart, to pull the eye to the latest reading.

```tsx
import { Sparkline } from "@protocore/pds";

const finality = [2.1, 2.0, 2.3, 1.9, 2.2, 2.6, 2.4, 2.8, 3.1, 2.9, 3.4, 3.2];

export default function Demo() {
  return (
    <Sparkline
      data={finality}
      area
      signal
      width={180}
      height={44}
      ariaLabel="Block finality latency trending up, now 3.2s"
    />
  );
}
```

## Do & don't

**Do**

- Pair a sparkline with the current value as text — the trend shape plus one number.
- Use `signal` to highlight the latest point on a live-updating metric.
- Set `ariaLabel` describing the trend ("uptime rising, now 98%") when the sparkline conveys standalone meaning.
- Let it inherit `currentColor` so it matches its surrounding text tone.

**Don't**

- Don't use it when readers must read precise values — use a full chart with axes.
- Don't plot more than one series in a sparkline; it has no legend.
- Don't color it with a status hue to encode good/bad — that's a Badge or MetricDelta's job.
- Don't feed it a single point or an empty array expecting a baseline — it renders nothing.

## Accessibility

**Notes**

- With `ariaLabel` set, the SVG is exposed as `role="img"` with that label; describe the trend, not the raw numbers.
- Without `ariaLabel` the SVG is `aria-hidden` — correct when the adjacent text already conveys the value and the sparkline is purely decorative.
- The line does not rely on color alone: it is a visible stroke shape, and the optional signal dot is a distinct square mark, not just a hue.

## Related

`stat-card`, `metric-delta`, `line-chart`, `chart-container`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/