Sparkline draw

Installation

$ npx shadcn@latest add https://goodui.dev/r/sparkline-draw.json

The file lands in components/goodui/sparkline-draw.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/sparkline-draw works too.

Usage

import { SparklineDraw } from "@/components/goodui/sparkline-draw"

const days = ["Oct 26", "Oct 27", "Oct 28", "Oct 29", "Oct 30", "Oct 31", "Nov 1"]
const revenue = [2240, 2610, 2380, 2950, 3080, 3460, 3720]
const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })

export function RevenueCard() {
  return (
    <div className="rounded-xl border bg-card p-4">
      <div className="text-xs text-muted-foreground">Revenue</div>
      <div className="mt-1 text-2xl font-semibold tabular-nums">{usd.format(3720)}</div>
      <SparklineDraw
        data={revenue}
        pointLabels={days}
        formatValue={(v) => usd.format(v)}
        height={56}
        className="mt-3"
        aria-label="Revenue, last 7 days"
      />
    </div>
  )
}

When to use

Examples

<SparklineDraw
  data={[6.2, 5.8, 6.4, 5.1, 4.9, 4.4, 3.9, 3.1]}
  color="#f43f5e"
  curve="linear"
  formatValue={(v) => `${v}%`}
/>

<SparklineDraw
  data={bookings}
  labels={{
    point: (n) => `Punkt ${n}`,
    summary: (first, last, low, high) => `Verlauf von ${first} bis ${last}, Minimum ${low}, Maximum ${high}`,
    noData: "Keine Daten",
  }}
/>

API reference

Accessibility

• •The root is role="group" with aria-roledescription="sparkline" and an aria-label summary built from the data ("Trend from $2,240 to $3,720, low …, high …"); your aria-label replaces it.
• •The highlighted point is announced through a polite live region as "<point label>: <value>", falling back to "Point n".
• •All built-in text goes through labels (point, summary, noData) for translation; per-point names come from pointLabels.
• •The SVG is aria-hidden; the focus ring is the focus-visible ring token.

Motion

• •The line draws in with pathLength over duration (default 0.9 s) on ease [0.65, 0, 0.35, 1]. The gradient area fades in over 0.6 s starting at 45% of that, and the end dot appears at 90%.
• •The end dot sends out a ring every 2 s (scale to 2.6 while fading).
• •The hover crosshair and point follow the pointer on a stiff spring (stiffness 600, damping 40).
• •New values remount the paths so the line draws again; a container resize only reshapes it.
• •Reduced motion: the line, area and dot appear at once, the ring is hidden and the crosshair snaps.

• •One ResizeObserver per sparkline keeps the SVG at the container width; there are no timers, and the ring is a CSS animation.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related