# Sparkline

A run of numbers at the size of a word.

- Group: Data
- Import: `import { Sparkline } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/sparkline/
- Related: line-chart, table

## When to reach for it

In a table cell, beside a figure, at the end of a row. When the trend needs reading precisely it wants a LineChart and its own space.

## Accessibility

- label is required and is the whole accessible name: a sparkline has no axes and no legend, so nothing else describes it.
- Axis-less by design. Every piece of chrome that would let it answer “what value exactly” also makes it too big to sit inline, which was the only reason to reach for it.
- Pin domain for a column of them: on independent domains every row peaks and troughs identically, which is how a table of sparklines becomes actively misleading.
- One path, no rendering engine — so a hundred of them in a table cost nothing.

## Sparkline

A run of numbers at the size of a word — in a table cell, beside a figure, at the end of a row. Deliberately axis-less, gridless and label-less: a sparkline answers "what shape has this been", and every piece of chrome that would make it answer "what value exactly" also makes it too big to sit inline, which was the only reason to reach for it. When the exact value matters, print the number beside it — `value` does — and when the trend needs reading precisely, it wants a `<LineChart>` and its own space. No rendering engine: it is one `<path>` over a normalised viewBox, so it costs nothing to put a hundred of them in a table.

### Props

- `data` (required) — `number[]`. The numbers, in order. Anything shorter than two points draws nothing.
- `label` (required) — `string`. What the run is, in a sentence. Required, and it is the whole accessible name: a sparkline has no axes and no legend, so nothing else describes it.
- `variant` — `SparklineVariant` default `'line'`.
- `height` — `number` default `28`. Height in pixels. The width comes from the container.
- `domain` — `[number, number]`. The domain, as `[min, max]`. Derived from the data when omitted. Pin it whenever a column of sparklines is meant to be compared: on independent domains every row peaks and troughs identically, which is the one way a table of sparklines can be actively misleading.
- `showLast` — `boolean` default `true`. Marks the last point, which is usually the one being asked about.
- `value` — `ReactNode`. The value announced alongside the label — the current reading, formatted. Falls back to the last number.
- `className` — `string`.

## Example — variants

```tsx
import { Sparkline, type SparklineVariant } from '@misoto22/design/charts'

<div className="flex w-full max-w-sm flex-col gap-5">
  {VARIANTS.map((variant) => (
    <div key={variant} className="flex items-center gap-4">
      <span className="w-12 shrink-0 mono-meta text-(--ink-3-aa)">{variant}</span>
      <Sparkline label={`Weekly signups, ${variant}`} data={data} variant={variant} value="61" />
    </div>
  ))}
</div>
```

## Example — in a table

```tsx
import { TBody, TD, TH, THead, TR, Table } from '@misoto22/design'
import { Sparkline } from '@misoto22/design/charts'

<Table caption="Visitors by channel, last seven weeks">
  <THead>
    <TR>
      <TH>Channel</TH>
      <TH>Trend</TH>
      <TH align="end">This week</TH>
    </TR>
  </THead>
  <TBody>
    {ROWS.map((row) => (
      <TR key={row.channel}>
        <TD>{row.channel}</TD>
        <TD>
          <Sparkline
            label={`${row.channel}, last seven weeks`}
            data={row.trend}
            domain={DOMAIN}
            height={22}
          />
        </TD>
        <TD align="end" className="font-mono tabular-nums">
          {row.now}
        </TD>
      </TR>
    ))}
  </TBody>
</Table>
```