Streamgraph
A flowing, centered streamgraph of composition over time, with smooth bands, a left-to-right reveal, and an auto-generated narrative naming the largest and fastest-growing streams.
Revenue by contract type
5.6k
latest total · 4 streams
- Enterprise
- Mid-market
- SMB
- Self-serve
Total grew +51% to 5.6k across 4 streams — Enterprise is the largest, Mid-market the fastest-growing.
| Period | Enterprise | Mid-market | SMB | Self-serve |
|---|---|---|---|---|
| Jun | 1.7k | 920 | 680 | 420 |
| Jul | 1.7k | 960 | 710 | 450 |
| Aug | 1.7k | 1k | 750 | 480 |
| Sep | 1.7k | 1.1k | 800 | 520 |
| Oct | 1.7k | 1.1k | 860 | 540 |
| Nov | 1.7k | 1.2k | 920 | 480 |
| Dec | 1.7k | 1.3k | 980 | 410 |
| Jan | 1.8k | 1.3k | 1.1k | 480 |
| Feb | 1.8k | 1.4k | 1.1k | 560 |
| Mar | 1.8k | 1.5k | 1.2k | 640 |
| Apr | 1.8k | 1.6k | 1.3k | 720 |
| May | 1.8k | 1.6k | 1.4k | 800 |
Acme Analytics · updated monthly from CRM
Demo data is illustrative. Replace with your own typed data prop.
Use it with your data
Data contract
Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.
| Field | Type | Required |
|---|---|---|
| categories | array | yes |
| points | array | yes |
Static props
import { ChartStreamgraph } from "@/components/blocks/chart-streamgraph/chart-streamgraph";
<ChartStreamgraph data={myData} />Client fetch (SWR)
const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<ChartStreamgraph data={data} />Server component (RSC)
const data = await fetch(url, {
next: { revalidate: 3600 },
}).then((r) => r.json());
<ChartStreamgraph data={data} />Map arbitrary rows
import { mapRows } from "@/lib/sextant/column-map";
const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <ChartStreamgraph data={out.data} />;Make it yours
Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.
Recolor or rename a series (band)
<ChartStreamgraph
series={{ band: { color: "var(--chart-3)", label: "…" } }}
/>Format numbers (currency / locale)
const eur = new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR",
notation: "compact",
});
<ChartStreamgraph valueFormatter={(n) => eur.format(n)} />Replace or hide the narrative
<ChartStreamgraph narrative="Your own one-liner." />
// …or hide it entirely:
<ChartStreamgraph narrative={false} />Restyle any region
<ChartStreamgraph
className="max-w-xl"
classNames={{ body: "bg-muted/20" }}
/>Drop the card chrome (headless plot)
import { ChartStreamgraphPlot } from "@/components/blocks/chart-streamgraph/chart-streamgraph";
// Just the chart body — bring your own card/layout:
<ChartStreamgraphPlot data={data} config={config} />