caliper uidocs
DemoSign inGet Pro

Streamgraph

Free

Stacked series that flow around a centre line.

Installs components/ui/streamgraph.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/streamgraph.json
Traffic sources

Traffic sources
PointSearchDirectSocial
Jan302012
Feb372515
Mar332118
Apr402613
May362216
Jun322719
Jul392314
Aug352817

When to use #

Use it for

  • Showing how a mix of categories changes over time.
  • Emphasising shape and rhythm over exact values.

Skip it when

  • Readers must compare exact quantities.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/streamgraph.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Streamgraph } from "@/components/ui/streamgraph"

const flow = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"].map((label, index) => ({
  id: label,
  label,
  values: { search: 30 + ((index * 7) % 11), direct: 20 + ((index * 5) % 9), social: 12 + ((index * 3) % 8) },
}));

export function TrafficStream() {
  return (
    <div className="w-full max-w-xl">
      <Streamgraph label="Traffic sources" data={flow} series={[{ id: "search", label: "Search" }, { id: "direct", label: "Direct" }, { id: "social", label: "Social" }]} />
    </div>
  );
}

API reference #

Streamgraph

component
PropTypeDefault
label *string—
data *readonly ChartDatum[]—
series *readonly ChartSeries[]—
unitstring""
loadingboolean—
errorstring—
classNamestring—

Accessibility #

It exposes group and status semantics, with aria-label, aria-busy and aria-hidden kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
↑Moves to the previous item or value.
↓Moves to the next item or value.
EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.