Sparkline

A word-sized chart with no axes, no gridlines and no tooltip. Everything a normal chart adds is what makes a sparkline stop working, so the component has to actively refuse those things rather than merely omit them.


Tokens this needs: --foreground, --card, --muted, --muted-foreground, --border, --chart-1, --direction-up
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// Sparkline.tsx
────────────────────────────────────────────────────────────────────────

/**
 * A sparkline is sized to sit in a line of text, so it gets no axes, no
 * gridlines, no legend and no tooltip. Those are the things that make a chart
 * readable at chart size and unreadable at word size.
 *
 * The one piece of emphasis is the final point, because the question a
 * sparkline answers is "what shape got us to the number beside it".
 */
export function Sparkline({
  values,
  width = 72,
  height = 20,
}: {
  values: number[];
  width?: number;
  height?: number;
}) {
  if (values.length < 2) return null;
  const min = Math.min(...values);
  const max = Math.max(...values);
  const span = max - min || 1;
  const x = (i: number) => (i / (values.length - 1)) * (width - 2) + 1;
  const y = (v: number) => height - 1 - ((v - min) / span) * (height - 2);
  const d = values.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" ");

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      // Decorative: the number beside it carries the meaning, and a screen
      // reader reading out a path description helps nobody.
      aria-hidden="true"
      className="inline-block align-middle overflow-visible"
    >
      <path d={d} fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={x(values.length - 1)} cy={y(values[values.length - 1])} r="1.9" fill="currentColor" />
    </svg>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { Sparkline } from "./Sparkline";

/** Inline beside the number it belongs to, at text size, with the window named. */
export default function Demo() {
  return (
    <p className="flex items-baseline gap-3 text-sm text-foreground">
      Checkout p95
      <span className="self-center text-chart-1">
        <Sparkline values={[296, 310, 288, 322, 305, 330, 298, 315, 312]} width={180} height={24} />
      </span>
      <span className="tabular-nums text-direction-up">312ms</span>
      <span className="text-xs text-muted-foreground">90 days</span>
    </p>
  );
}