# Sparkline

A compact line or area chart for trends in a table cell, list or metric.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Sparkline } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Sparkline label="Revenue rose from $8,000 to $12,000" values={[8000, 8200, null, 9500, 11000, 12000]} domain={[0, 15000]} />
    </FloodRoot>
  );
}
```

## Design notes

- Give the graphic a label that communicates the metric and the trend. Set showLabel to make that label visible.
- Use a shared domain for comparing magnitudes across rows. Null and nonfinite samples leave gaps in both the stroke and area.
- The default area uses an accent stroke with a gradient below it. Choose variant line for stroke only and use semantic tones only when the data has a known interpretation.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `values` | `readonly (number \| null)[]` | `Required` |
| `label` | `string` | `Required` |
| `showLabel` | `boolean` | `false` |
| `domain` | `readonly [number, number]` | `—` |
| `size` | `"sm" \| "md"` | `"md"` |
| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "error"` | `"accent"` |
| `variant` | `"line" \| "area"` | `"area"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label" \| "aria-labelledby">` | `Forwarded` |