Composition Chart

Traffic mix

Share of sessions by channel · 2026

Traffic mix by channel data (share of visible series)
Period	Organic	Paid	Referral	Social	Email
Jan	43.0% (4,563)	29.4% (3,121)	11.4% (1,213)	7.4% (785)	8.8% (932)
Feb	42.0% (4,596)	29.5% (3,226)	11.5% (1,255)	9.7% (1,056)	7.4% (808)
Mar	42.7% (4,912)	28.9% (3,332)	12.8% (1,475)	9.7% (1,112)	5.9% (682)
Apr	40.1% (4,745)	27.9% (3,305)	11.9% (1,410)	12.0% (1,424)	8.1% (955)
May	43.9% (5,473)	24.6% (3,070)	13.5% (1,681)	10.5% (1,307)	7.6% (942)
Jun	45.6% (5,262)	25.3% (2,916)	11.3% (1,305)	12.1% (1,396)	5.7% (655)
Jul	45.4% (5,842)	24.0% (3,087)	10.8% (1,393)	14.6% (1,872)	5.1% (661)
Aug	46.9% (6,211)	22.7% (2,997)	10.5% (1,391)	13.4% (1,773)	6.5% (859)
Sep	47.1% (5,980)	20.1% (2,552)	9.9% (1,253)	15.9% (2,017)	7.0% (895)
Oct	46.5% (6,070)	20.5% (2,676)	12.3% (1,605)	14.5% (1,888)	6.3% (821)
Nov	47.1% (6,121)	18.4% (2,395)	12.5% (1,621)	14.7% (1,912)	7.3% (945)
Dec	48.8% (6,458)	18.2% (2,403)	12.0% (1,583)	16.0% (2,121)	5.0% (658)

Installation

pnpm dlx shadcn@latest add @paneui/composition-chart

Usage

import { CompositionChart } from "@/components/ui/composition-chart"

<CompositionChart
  label="Traffic mix"
  series={[
    { id: "organic", label: "Organic" },
    { id: "paid", label: "Paid" },
  ]}
  data={[
    { label: "Jan", values: { organic: 4200, paid: 3100 } },
    { label: "Feb", values: { organic: 4500, paid: 2900 } },
  ]}
/>

Examples

Area

Default Hidden

Controlled

Keyboard

Focus the plot, then ArrowLeft / ArrowRight step through periods, Home / End jump to the ends and Esc clears. Legend pills are buttons with aria-pressed.

API Reference

CompositionChart

100% stacked chart of each visible series' share per period. The last visible series can't be hidden. Also accepts every prop of section.

series*: { id: string; label: string; color?: string }[]; Series in stacking order (bottom first). Colours default to the chart palette.
data*: { label: string; values: Record<string, number> }[]; Raw values per period keyed by series id; missing values count as 0.
mode= "bar": "bar" | "area"; Stacked bars or stacked areas.
label= "Composition chart": string; Accessible name.
height= 260: number; Plot height in px, including the x axis.
formatValue= formatNumber: (value: number) => string; Raw values in the tooltip.
showLegend= true: boolean; Show the toggleable legend.
defaultHidden: string[]; Series hidden on first render.
hidden: string[]; Controlled hidden series ids. Replaces the HTML hidden attribute, which the chart does not forward.
onHiddenChange: (hidden: string[]) => void; Called when a series is toggled.

Prop	Type	Default	Description
series*	{ id: string; label: string; color?: string }[]	—	Series in stacking order (bottom first). Colours default to the chart palette.
data*	{ label: string; values: Record<string, number> }[]	—	Raw values per period keyed by series id; missing values count as 0.
mode	"bar" \| "area"	"bar"	Stacked bars or stacked areas.
label	string	"Composition chart"	Accessible name.
height	number	260	Plot height in px, including the x axis.
formatValue	(value: number) => string	formatNumber	Raw values in the tooltip.
showLegend	boolean	true	Show the toggleable legend.
defaultHidden	string[]	—	Series hidden on first render.
hidden	string[]	—	Controlled hidden series ids. Replaces the HTML `hidden` attribute, which the chart does not forward.
onHiddenChange	(hidden: string[]) => void	—	Called when a series is toggled.