Stream
Streamgraph — stacked areas on a centered (silhouette) flowing baseline.
Category: chart · WCAG 2.1-AA · chart, stream, streamgraph, area, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | StreamSeries[] | — | Series, each with values[] aligned to categories. |
categories | (string | number)[] | — | X-axis labels aligned with each series values. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
offset | 'silhouette' | 'zero' | silhouette | silhouette centers the stack (streamgraph); zero is a baseline stack. |
curve | Curve | basis | Interpolation curve. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 300 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
legend | boolean | — | Whether to show the legend. |
tooltip | boolean | — | Whether to show tooltips on hover. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | When true, renders a minimal variant without chart chrome. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Showing how several series ebb and flow over time as proportions of a whole
- An organic, aesthetic alternative to a stacked area chart
When not to use
- Reading precise values — use LineChart or AreaChart
- Few categories with exact comparison — use BarChart
Examples
Streamgraph
import { Stream } from '@cascivo/charts'
<Stream
title="Topics over time"
categories={['Jan','Feb','Mar','Apr']}
series={[
{ id: 'a', label: 'A', values: [4, 6, 5, 8] },
{ id: 'b', label: 'B', values: [2, 3, 7, 4] },
]}
/>Related components
- AreaChart — Use a zero-baseline stacked area for precise reading