# Sparkline stat (goodtabs UI)

A stat with a plain SVG sparkline, two date labels and one brand mark on the last point.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/sparkline-stat.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/sparkline-stat`

## Usage

```tsx
import { SparklineStat } from "@/components/ui/sparkline-stat"

<SparklineStat label="Weekly installs" value="4,218" data={[310, 340, 420, 560]} from="Aug 18" to="Nov 3" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | What the number measures. |
| value | `ReactNode` |  | The number, already formatted. |
| data | `number[]` |  | The series, oldest first. At least two points. |
| from | `string` |  | Label under the left end of the line. |
| to | `string` |  | Label under the right end of the line. |
| unit | `string` | `""` | Unit word used in the text alternative. |

## When to use

- A headline number where the shape of the last few weeks matters
- Dashboards that need a trend without axes and gridlines

## When not to use

- Reading exact values: use a full chart with axes
- Comparing several series on one scale

## Notes for agents

- Server component. The SVG has role img and an aria-label with the first, last, low and high values
- Each series is scaled to its own min and max, so two sparklines are not comparable by height
- Stretches to the width of its container; the line uses non-scaling strokes so it stays 1.5px
- The brand dot on the last point is the only coloured mark

## The maths

- A point's x is i / (n - 1) × 100 and its y is 40 - 3 - (v - min) / (max - min) × 34, so the series fills the box with 3 units of padding.
- The area is the line closed along the baseline at 7 percent foreground, so the 1.5px stroke stays the loudest mark.

Docs: https://ui.goodtabs.co/components/sparkline-stat