Home

Sparkline

A trend drawn as a small line beside or under a figure, with no axis: the past in grey, the latest stretch and its point in blue.

ui.sparklinecomponents/ui/sparkline.tsx

Use case

For the AI

Use it inside a Stat or a table row to show the shape of recent values at a glance: sales over the last 12 weeks, a client's orders per month, stock over the last days. Hovering shows the value under the pointer; the figure beside it carries the number.

Use it when

  • Under a Stat, the last 12 periods
  • In a table row, a client's recent trend
  • Anywhere the shape matters more than the values

Use something else when

  • The values themselves must be read, with dates: Area chart
  • One amount against a limit: Meter

Examples

Orders588

Code

Import

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

Usage

<Sparkline values={[31, 38, 34, 42, 40, 47, 44, 52, 49, 55, 58, 61]} format={(n) => `${n} commandes`} aria-label="Commandes, 12 dernières semaines" />

Rules

  • Always next to a figure or a label that says what it is; a sparkline alone is a squiggle.
  • Twelve points or so; the latest is the blue point.
  • Give it an aria-label that names the measure and the span.
  • Every value shown on hover is also reachable without it: a label, the legend with values, or the card's table view (ChartTable).