# Sparkline

A word-sized trend for a stat card or a table cell, as a line, an area or bars, with gaps left open.

- **Use it for**: A trend beside a number, in a stat card or a table cell.
- **Not for**: Reading exact values off an axis. Try [Chart](https://unseenui.com/components/chart/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Sparkline } from '@stackunseen/ui';
import { Stat, Chart } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Sparkline label="p95 latency, last 14 days" unit="ms" data={days} variant="area" markLast />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `data` (required) | `readonly SparkPoint[]` | Samples in time order. |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `markLast` | `boolean` | Mark the last sample with a dot. |
| `tone` | `"neutral" \| "positive" \| "negative"` | Colour by meaning: rising is good, rising is bad, or neither. |
| `unit` | `string` | Unit for the hidden table, such as "ms". |
| `variant` | `"area" \| "line" \| "bar"` | A line, a line with the area under it filled, or one bar per sample. |

## Keyboard

Inert content; the hidden table is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/sparkline/