# Sparkline

> The shape of a series with no axes: the trend under a Metric, a row in a table. A line in a palette color over a soft fill of the same color, with a dot on the last value. It wipes in from the left once it is on screen and stays still with reduced motion. It is decoration for screen readers, since the Metric beside it already says the number.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/sparkline

## Install

```bash
npx @entrepta/cli@latest add sparkline
```

Files: `data/sparkline.tsx`, `lib/motion.ts`, `lib/color-contrast.ts`, `lib/palette.ts`.
npm packages: `motion`.
Comes with: `motion-lib`, `color-contrast`, `palette-lib`.

## Usage

```tsx
import { Sparkline } from "@/components/entrepta/sparkline"

<Metric
  label="spent this month"
  value={<Amount value={spent} />}
  trend={<Sparkline data={dailyTotals} tone="chart-1" />}
/>

<Sparkline data={balance} className="h-28" />   // taller in a hero tile
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `number[]` | - | Oldest first, two or more |
| `tone` | `"chart-1" … "chart-8" \| "success" \| "error" \| "neutral"` | "chart-1" | A palette color, or a status for good or bad news |
| `area` | `boolean` | true | The soft fill under the line |
| `dot` | `boolean` | true | The dot on the last value |
| `className` | `string` | - | Its height, 40px by default |