Data

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.

view .md

Preview

last 30 days

balance+7.4%

saved+18.1%

spent+11.3%

palette

Installation

terminal

bash

npx @entrepta/cli@latest add sparkline

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

sparkline.tsx

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