# Sparkline

> Inline trend, one-shot draw.

Source: https://lopifi.com/components/sparkline
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Primitives — The layer everything else composes. Build these first; nothing above them is right until they are.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/01-primitives

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/sparkline
```

## Specification

24–40px tall, no axes, no gridlines, no tooltip by default. `--text-secondary` stroke at 1.5px, or `--positive`/`--negative` by net direction, or neutral when `polarity="neutral"`.

Optional endpoint dot and a single label at the last point.

**Motion:** `stroke-dashoffset` draw, 600ms `--ease-out`, **once**, on first paint or scroll-into-view (`{ once: true }`). Never on data change.

**Touch:** no scrub. A sparkline is an impression, not a chart. If a user needs values, they need `MoneyChart`.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.