---
title: Sparkline
description: A trend without axes, always next to the number it explains.
---

```tsx
import { Sparkline } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SparklineBasic() {
  return (
    <Preview>
      <span>12</span>
      <Sparkline.Root values={[2, 4, 3, 6, 5, 8, 12]} />
    </Preview>
  );
}
```

- Keep it beside the number it explains; it supports that number and never replaces it. It is hidden from screen readers.
- In rows, use the default `sm` size and the grey `trend` tone.
- The line runs from zero at the bottom to the largest value at the top. A `null` value is skipped: the line runs on to the next value.
- The line bends smoothly through every value without overshooting it, so peaks and dips stay where the data puts them. Set `curve="linear"` for straight segments.

## Fill

```tsx
import { Sparkline } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SparklineFill() {
  return (
    <Preview stack={true}>
      <Sparkline.Root
        size="fill"
        tail={0.2}
        tone="muted"
        values={[40, 36, 48, 44, 32, 40, 52, 48, 60, 80, 100, 120]}
      />
    </Preview>
  );
}
```

`size="fill"` stretches the line to the width of its container, and `tone="muted"` draws it in a darker grey for the historical values. `tail` draws the end of the line in the accent colour, to point at current activity without implying a status. `partial` draws the last segment dashed, for a last value whose time interval is still running and holds only part of its data.

## Area

```tsx
import { Sparkline } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SparklineArea() {
  return (
    <Preview stack={true}>
      <div className="h-16">
        <Sparkline.Root
          area={true}
          size="cover"
          tone="warning"
          values={[40, 36, 48, 44, 32, 40, 52, 48, 60, 80, 100, 120]}
        />
      </div>
    </Preview>
  );
}
```

`area` fills under the line, and `size="cover"` stretches it over its container in both directions, for the backdrop of a [Metric](/deft/components/metric) card. The `story`, `warning` and `danger` tones follow the health of the metric.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `values` | `(number \| null)[]` | - | A null value is skipped and the line bridges it. |
| `size?` | `"sm" \| "fill" \| "cover"` | `"sm"` | |
| `tone?` | `"trend" \| "muted" \| "story" \| "warning" \| "danger"` | `"trend"` | |
| `area?` | `boolean` | `false` | Fills under the line. |
| `curve?` | `"monotone" \| "linear"` | `"monotone"` | |
| `partial?` | `boolean` | `false` | Draws the last segment dashed: its value covers only part of its interval. |
| `tail?` | `number` | `0` | Share of the line, from the end, drawn in the accent colour. |

Parts: `Root`. Other props go to the native `svg`.