100% stacked bars or areas showing each series' share per period; toggling between them re-stacks with springs, with a period tooltip and a legend that hides series.
chartstacked barstacked areacompositionsharesvg
Installation
$npx shadcn@latest add @geturui/composition-chart
Also installs: Tabs
Usage
usage.tsx
1import { CompositionChart } from "@/components/charts/composition-chart";
2
3<CompositionChart
4 title="Traffic by source"
5 series={[
6 { key: "search", label: "Search" },
7 { key: "social", label: "Social" },
8 { key: "direct", label: "Direct" },
9 ]}
10 data={[
11 { label: "Jul", values: { search: 420, social: 180, direct: 260 } },
12 { label: "Aug", values: { search: 480, social: 240, direct: 250 } },
13 ]}
14/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { label: string; values: Record<string, number> }[] | — | One entry per period. |
series* | { key: string; label: string; color?: string }[] | — | Stack order, bottom first. Colours default to the token palette. |
mode / defaultMode | "bar" | "area" | "bar" | Controlled or initial view. |
onModeChange | (mode) => void | — | Called when the view toggles. |
height | number | 240 | Plot height in px. |
valueFormatter | (n: number) => string | — | Formats raw values in the tooltip. |
title | string | — | Caption and accessible name. |
Accessibility
- Each period is focusable with a label listing every share; Left/Right move between periods.
- Legend items are toggle buttons with aria-pressed; the last visible series can't be hidden.
- Chart type uses the Tabs pattern with arrow-key support.