# React sparklines (/docs/react-sparklines)

A **sparkline** is a trend small enough to sit in a sentence: enough line to read direction and shape, with no axes,
legend, or panel around it. In React that means a word-sized SVG mark next to a number or inside a table cell.

```tsx
<Sparkline data={[3, 5, 4, 8, 6, 9]} width={120} height={32} title="Weekly revenue" />
```

This page covers that mark in `@microcharts/react`. Props, variants, and edge cases live on
[Sparkline](/docs/charts/sparkline).

## Install

Both steps are required — package and stylesheet:

```tsx
import { Sparkline } from "@microcharts/react/sparkline";
import "@microcharts/react/styles.css"; // once, at the app root

<Sparkline data={[3, 5, 4, 8, 6, 9]} title="Weekly revenue" />;
```

Measured size for this chart: <ChartSize slug="sparkline" /> gzip (CI-enforced). Catalog-wide band:

<SizeMarketing />. The default export is static, so it renders from an RSC with zero client JavaScript. Add
`@microcharts/react/sparkline/interactive` when you need hover, keyboard, touch, or selection.

## Where it sits

Same component in four homes — product UI, report, docs, and an AI reply:

**In a sentence**

```tsx
<p>
  p95 latency this week{" "}
  <span className="mc-inline">
    <Sparkline data={[48, 45, 44, 40, 38, 36, 33, 31]} width={64} height={16} dots="none" summary={false} />
  </span>{" "}
  — trending down.
</p>
```

**In a table cell**

```tsx
<tr>
  <td>checkout-api</td>
  <td>
    <Sparkline data={[48, 45, 44, 40, 38, 36, 33, 31]} width={64} height={18} dots="none" summary={false} />
  </td>
  <td>31 ms</td>
</tr>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">1,600</span>
  <span className="unit">concurrent, now</span>
  <Sparkline data={[1240, 1310, 1290, 1420, 1380, 1510, 1470, 1600]} width={90} height={28} fill summary={false} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  CPU <Sparkline data={[62, 65, 61, 68, 70, 66, 72, 75]} width={40} height={14} dots="none" summary={false} />
</button>
```

Placement recipes: [Composition](/docs/composition). When this library fits vs a full chart library:
[When to use microcharts](/docs/when-to-use).

## About `react-sparklines`

Many searches still land on [`react-sparklines`](https://www.npmjs.com/package/react-sparklines) (Boris Yankov), which
still pulls about **250k downloads** in the week ending **2026-07-21** on a last npm publish of **2017-07-27**
(`1.7.0`). It's the same visual idea from a different era of React: class-component patterns, `prop-types`, no generated
accessible summary, and no RSC story. The measured side-by-side lives at
[microcharts vs react-sparklines](/docs/vs-react-sparklines).

microcharts isn't that package rewritten. It's a word-sized catalog of <CatalogTotal /> types under one grammar, and
Sparkline is one chart in it: `data` alone renders, accessibility is on by default (`role="img"` plus a summary from the
data), the static entry is RSC-safe, and there are **zero runtime dependencies**. If `react-sparklines` still fits your
stack, keep it. If you want the contract above, start here.

## When not to use a sparkline

- Exact category comparison → [MiniBar](/docs/charts/mini-bar) or [SparkBar](/docs/charts/sparkbar)
- Value against a target → [Bullet](/docs/charts/bullet)
- Part-to-whole → [SegmentedBar](/docs/charts/segmented-bar) or [MicroDonut](/docs/charts/micro-donut)
- Full axes, legend, brush, zoom → a [full chart library](/docs/full-chart-libraries)

## Related marks

- [SparkBar](/docs/charts/sparkbar) — discrete magnitudes or win–loss
- [DualSparkline](/docs/charts/dual-sparkline) — two series, one scale
- [TrendArrow](/docs/charts/trend-arrow) — direction as a glyph
- [Delta](/docs/charts/delta) — a single signed change
- [Horizon](/docs/charts/horizon) — wide-range series in a slim band

## Next

- [Sparkline API](/docs/charts/sparkline)
- [Inline charts](/docs/inline-charts)
- [When to use microcharts](/docs/when-to-use)
- [Quickstart](/docs/quickstart)