Sparkline

Pro

A word-sized trend. The line is in the de-emphasis ink; only the latest point carries the accent. Gaps where data is missing stay gaps.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/sparkline

Brings in: locale, utils

Usage

TSX · The example above

"use client"

import { Sparkline } from "@/components/sparkline"

const repos: { name: string; deploys: (number | null)[] }[] = [
  { name: "api", deploys: [3, 4, 2, 5, 6, 4, 7, 5] },
  { name: "web", deploys: [6, 5, null, 4, 7, 8, 6, 9] },
  { name: "workers", deploys: [2] },
]

export default function Example() {
  return (
    <ul className="flex max-w-xs flex-col divide-y rounded-xl border bg-card px-4">
      {repos.map((r) => (
        <li key={r.name} className="flex items-center justify-between gap-4 py-2 text-sm">
          <span className="font-mono text-xs">{r.name}</span>
          <Sparkline values={r.deploys} label={`Deploys to Production per week, ${r.name}`} />
        </li>
      ))}
    </ul>
  )
}

<Sparkline>

Prop	Type	Default	Description
valuesrequired	`(number \| null)[]`	—	The points in order; null leaves a gap. Fewer than two numbers shows "Not enough data".
width	`number \| undefined`	80	In pixels. Defaults to 80.
height	`number \| undefined`	24	In pixels. Defaults to 24.
labelrequired	`string`	—	What the trend is, read by assistive tech.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under sparkline in <LocaleProvider strings={{ … }}>; the table is exported as sparklineStrings.

Key	English
notEnoughData	Not enough data