Streamgraph

In FORMA

• Liegt in kit/arc/streamgraph und ist über @/forma/arc/streamgraph/streamgraph erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Showing the changing share of topics, channels, or genres week by week.
• Storytelling dashboards where the shape of seasonality and spikes is the point.
• Comparing ranges where a morph between them explains what changed.

When not to use

• Use line-chart when exact values or comparisons between series matter.
• Use bar-chart for a few periods or categories.
• Avoid it for data with negative values; streams stack magnitudes.

Usage

import { Streamgraph } from "@/forma/arc/streamgraph/streamgraph";

const series = [{ key: "bugs", label: "Bugs" }, { key: "billing", label: "Billing" }, { key: "onboarding", label: "Onboarding" }];
const data = weeks.map(week => ({ key: week.iso, label: `Week of ${week.name}`, axisLabel: week.monthStart ? week.month : undefined, values: week.tickets }));

export function TicketsByTopic() {
  return <Streamgraph data={data} series={series} label="Support tickets by topic" unit="tickets" categoryLabel="Week" />;
}

API reference

Streamgraph

Layers stacked on a wiggle baseline that flow over time. Switching ranges morphs every layer; hovering one isolates it and reads every layer at that point.

Keyboard interactions

Accessibility

• The plot is a focusable group; each reading is announced with the point, the isolated layer's value, and the total.
• Legend toggles are buttons with aria-pressed; hovering or focusing one isolates its layer.
• A visually hidden table lists every point and layer value.
• Layers are separated by a 2px surface gap and named in place, so identity never rests on shade alone.

Motion

• The stream swells out of a hairline along its centre the first time it is seen.
• New data blends every layer on a shared grid, so ranges of different lengths morph without redrawing.
• Hidden layers thin to nothing while the rest reflow; the crosshair and tooltip glide on springs.
• Reduced motion jumps to the final shapes and keeps the crosshair and tooltip without travel.

Responsive behavior

• The plot fills its container; axis labels thin out to one per 72px, counted back from the latest.
• Direct labels hide where a layer is too thin or the plot too narrow; the tooltip and legend still name it.
• Touch drags scrub through time with pointer capture while vertical page scroll stays free.

Performance

• Each layer is resampled once per data change onto 161 points; paint recomputes the baseline and writes paths directly.
• Hover state re-renders only the tooltip and a few attributes; morphs never re-render React per frame.

Notes for AI

• Choose it for how a mix changes over time when the overall rhythm matters more than exact totals.
• Put the most important layer first; it runs through the middle of the stream.
• Use offset="zero" when people need to read totals against a baseline, like a stacked area chart.
• Keep layers to about eight; fold the rest into Other.

Related

• Line chart: A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
• Brush chart: A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
• Bar chart: Compare one measure across days and scrub any bar for its value.
• Sankey flow: Flows between stages as ribbons with drifting particles; hover any node or ribbon to pour its share through the whole journey.

Also in charts

• Donut chart: A donut whose arcs morph between datasets, with the active value rolling into the center.
• Waffle chart: A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
• Slope chart: Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.
• Sparkline: Show a compact trend beside a value.
• Gauge: Show a value against a known range.
• Activity heatmap: See a year of activity at a glance, one square per day.
• Animated counter: Give changing totals a clear sense of movement.
• Ridgeline: Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
• Treemap: A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
• Split bar: A single 100% bar split into shares: rest on a segment to widen it and read its exact figures, toggle segments from the legend and the rest reflow, with labels inside when they fit and on leader lines when they don't.

Guidance for AI tools

Streamgraph: Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt