Charts

Facet

The same chart once per group, on one shared scale.

When to reach for it

Eight series overplot into a hairball in one frame. Two or three series that genuinely need comparing point-for-point still belong in one chart.

Examples

default

Visitors

Organic search
Organic search visitors
Direct
Direct visitors
Paid search
Paid search visitors
Referral
Referral visitors
Email
Email visitors
Social
Social visitors

Jan – Aug 2026

Visitors by channel, 2026
month	channel	visitors
Jan	Organic search	4,200
Jan	Paid search	2,100
Jan	Direct	1,800
Jan	Referral	620
Jan	Email	430
Jan	Social	210
Feb	Organic search	4,400
Feb	Paid search	2,000
Feb	Direct	1,850
Feb	Referral	700
Feb	Email	460
Feb	Social	260
Mar	Organic search	4,100
Mar	Paid search	1,900
Mar	Direct	1,900
Mar	Referral	880
Mar	Email	450
Mar	Social	240
Apr	Organic search	4,800
Apr	Paid search	1,750
Apr	Direct	1,950
Apr	Referral	810
Apr	Email	470
Apr	Social	320
May	Organic search	5,200
May	Paid search	1,600
May	Direct	2,000
May	Referral	1,020
May	Email	520
May	Social	300
Jun	Organic search	5,600
Jun	Paid search	1,400
Jun	Direct	2,050
Jun	Referral	1,180
Jun	Email	610
Jun	Social	280
Jul	Organic search	6,100
Jul	Paid search	1,250
Jul	Direct	2,100
Jul	Referral	1,260
Jul	Email	590
Jul	Social	350
Aug	Organic search	6,400
Aug	Paid search	1,100
Aug	Direct	2,150
Aug	Referral	1,400
Aug	Email	640
Aug	Social	410

overplotted vs faceted

Overplotted — six series, one plot

Visitors by channel, overplotted
month	Organic search	Paid search	Direct	Referral	Email	Social
Jan	4,200	2,100	1,800	620	430	210
Feb	4,400	2,000	1,850	700	460	260
Mar	4,100	1,900	1,900	880	450	240
Apr	4,800	1,750	1,950	810	470	320
May	5,200	1,600	2,000	1,020	520	300
Jun	5,600	1,400	2,050	1,180	610	280
Jul	6,100	1,250	2,100	1,260	590	350
Aug	6,400	1,100	2,150	1,400	640	410

Faceted — six plots, one domain

Visitors

Organic search
Organic search visitors
Direct
Direct visitors
Paid search
Paid search visitors
Referral
Referral visitors
Email
Email visitors
Social
Social visitors

Visitors by channel, faceted
month	channel	visitors
Jan	Organic search	4,200
Jan	Paid search	2,100
Jan	Direct	1,800
Jan	Referral	620
Jan	Email	430
Jan	Social	210
Feb	Organic search	4,400
Feb	Paid search	2,000
Feb	Direct	1,850
Feb	Referral	700
Feb	Email	460
Feb	Social	260
Mar	Organic search	4,100
Mar	Paid search	1,900
Mar	Direct	1,900
Mar	Referral	880
Mar	Email	450
Mar	Social	240
Apr	Organic search	4,800
Apr	Paid search	1,750
Apr	Direct	1,950
Apr	Referral	810
Apr	Email	470
Apr	Social	320
May	Organic search	5,200
May	Paid search	1,600
May	Direct	2,000
May	Referral	1,020
May	Email	520
May	Social	300
Jun	Organic search	5,600
Jun	Paid search	1,400
Jun	Direct	2,050
Jun	Referral	1,180
Jun	Email	610
Jun	Social	280
Jul	Organic search	6,100
Jul	Paid search	1,250
Jul	Direct	2,100
Jul	Referral	1,260
Jul	Email	590
Jul	Social	350
Aug	Organic search	6,400
Aug	Paid search	1,100
Aug	Direct	2,150
Aug	Referral	1,400
Aug	Email	640
Aug	Social	410

scale and overflow

Visitors by channel, shared scalescales="shared" — the default

Organic search
6,400
Direct
2,150
Referral
1,400
Social
410

Visitors by channel, independent scalesscales="independent" — every panel lies about its size

Organic search
6,400
Direct
2,150
Referral
1,400
Social
410

Visitors by channel, top sixFourteen channels, sorted by where each ended up

Organic search
6,400
Direct
2,150
Paid search
2,100
Referral
1,400
Email
640
Social
410
Other
1,165

6 of 14 shown; the other 8 are summed into Other.

Visitors by channel, top six
month	channel	visitors
M1	Organic search	3,968
M2	Organic search	3,712
M3	Organic search	4,544
M4	Organic search	4,224
M5	Organic search	5,120
M6	Organic search	5,632
M7	Organic search	6,080
M8	Organic search	6,400
M1	Direct	1,333
M2	Direct	1,247
M3	Direct	1,527
M4	Direct	1,419
M5	Direct	1,720
M6	Direct	1,892
M7	Direct	2,043
M8	Direct	2,150
M1	Paid search	1,302
M2	Paid search	1,218
M3	Paid search	1,491
M4	Paid search	1,386
M5	Paid search	1,680
M6	Paid search	1,848
M7	Paid search	1,995
M8	Paid search	2,100
M1	Referral	868
M2	Referral	812
M3	Referral	994
M4	Referral	924
M5	Referral	1,120
M6	Referral	1,232
M7	Referral	1,330
M8	Referral	1,400
M1	Email	397
M2	Email	371
M3	Email	454
M4	Email	422
M5	Email	512
M6	Email	563
M7	Email	608
M8	Email	640
M1	Social	254
M2	Social	238
M3	Social	291
M4	Social	271
M5	Social	328
M6	Social	361
M7	Social	390
M8	Social	410
M1	Affiliate	198
M2	Affiliate	186
M3	Affiliate	227
M4	Affiliate	211
M5	Affiliate	256
M6	Affiliate	282
M7	Affiliate	304
M8	Affiliate	320
M1	Display	161
M2	Display	151
M3	Display	185
M4	Display	172
M5	Display	208
M6	Display	229
M7	Display	247
M8	Display	260
M1	Podcast	112
M2	Podcast	104
M3	Podcast	128
M4	Podcast	119
M5	Podcast	144
M6	Podcast	158
M7	Podcast	171
M8	Podcast	180
M1	Newsletter	87
M2	Newsletter	81
M3	Newsletter	99
M4	Newsletter	92
M5	Newsletter	112
M6	Newsletter	123
M7	Newsletter	133
M8	Newsletter	140
M1	Partner	68
M2	Partner	64
M3	Partner	78
M4	Partner	73
M5	Partner	88
M6	Partner	97
M7	Partner	105
M8	Partner	110
M1	Print QR	43
M2	Print QR	41
M3	Print QR	50
M4	Print QR	46
M5	Print QR	56
M6	Print QR	62
M7	Print QR	67
M8	Print QR	70
M1	Events	34
M2	Events	32
M3	Events	39
M4	Events	36
M5	Events	44
M6	Events	48
M7	Events	52
M8	Events	55
M1	SMS	19
M2	SMS	17
M3	SMS	21
M4	SMS	20
M5	SMS	24
M6	SMS	26
M7	SMS	29
M8	SMS	30

Notes

The same chart repeated once per group, on one shared scale — small multiples.

The answer to the question a multi-series chart stops being able to answer at around five series: eight lines in one plot is a hairball, and the reader spends their attention untangling strands instead of reading them. Splitting the same lines across eight small plots costs the direct overlay comparison and buys back every individual shape, which is almost always the better trade — this is Tufte's small multiple, and Observable Plot and Vega-Lite both treat it as a first-class operation for the same reason.

Reach for a multi-series <LineChart> or <AreaChart> instead when the series really do have to be read AGAINST each other — crossovers, gaps, shares of one total — and when there are few enough of them to tell apart. Reach for this when each group has its own shape worth seeing, when the groups are many, or when the reader's question is "which of these is different".

What it gets right that a hand-rolled data.map() does not: the panels share one domain by default. On independent scales every panel fills its own plot, so a group peaking at 40 and a group peaking at 4,000 come out the same shape — the comparison is not merely lost, it is inverted, and nothing on screen says so. panel.domain is that shared scale; the render function has to pass it to the panel's value axis. It also caps the grid, folds or counts the tail, and prints one legend and one axis label instead of twelve.

Props

Facet props
Prop	Type	Default	Description
byrequired	`keyof TRow & string`		The row field the data is split on. One panel per distinct value.
childrenrequired	`(panel: FacetPanel<TRow>) => ReactNode`		One panel, called once per group. Hand `panel.domain` to the panel chart's value axis. That single line is what the component is for; without it the panels are on independent scales and the grid is decorative.
datarequired	`TRow[]`		Every row, across every group. The split happens here, not at the call site.
titlerequired	`string`		What the whole grid shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
valuerequired	`(keyof TRow & string) \| (keyof TRow & string)[]`		The row field, or fields, holding the numbers. This is what the shared domain is measured over and what a statistical sort reads, so it has to name every series a panel draws — a panel that plots a field this does not mention can still overflow its own axis.
className	`string`		Merged onto the figure, last, so a call site can size or space it.
columns	`'auto' \| number`	`'auto'`	How many columns the grid holds at its widest. `"auto"` — the default — fits as many panels as `minPanelWidth` allows and reflows on its own, which is the behaviour a card, a sidebar and a full-width page all need from the same call site. A number caps the count without pinning it: the grid still drops to fewer columns when the container is narrow, rather than shrinking twelve plots to nothing.
description	`ReactNode`		A line under the title — the unit, the window, the caveat.
domain	`[number, number]`		Pins the domain outright, ignoring the data and `scales` alike.
empty	`ChartEmptyProps`		What the grid shows when the data yields no groups at all. No `false` escape hatch, unlike a single chart's: an empty pair of axes is at least a chart, but an empty grid is nothing — there is no reading for the absence to be.
hideDataTable	`boolean`	`false`	Drops the hidden table view of every row. Worth setting when the panels' own charts already ship theirs — each chart in the package renders its rows as a table too, so a twelve-panel grid can otherwise put thirteen tables in the accessibility tree.
includeZero	`boolean`	`true`	Pulls the shared domain out to include zero. On by default, and the same default Recharts applies on its own: bars and areas read against a truncated baseline overstate every difference in the grid, and a grid exists to be compared. Turn it off when the values live far from zero and the differences between them ARE the reading — temperatures, latencies, ratings out of five.
legend	`ReactNode`		One key for the whole grid, printed above it. A legend inside every panel is the same three swatches repeated twelve times, which is ink spent restating what the reader learned from the first panel. Put `<LineChart.Legend>` in one panel and this is unnecessary; put it here and take it out of the panels.
limit	`number \| false`	`12`	How many panels are drawn before the rest are dealt with. Twelve by default rather than unlimited, because the failure this prevents is silent: a `by` field with forty values renders forty plots, each one roughly a postage stamp, and nothing on the page says the grid stopped being readable. `false` lifts the cap when the call site has genuinely decided to draw them all.
minPanelWidth	`number`	`MIN_PANEL_PX`	How narrow a panel may get before the grid drops a column, in pixels.
nice	`boolean`	`true`	Rounds the domain out so the panels' ticks land on numbers a reader recognises. Off, a shared domain of `[0, 314]` gives ticks at 78.5.
order	`'asc' \| 'desc'`		The sort direction. Omit and it follows the sort: A→Z for a name or an explicit list, biggest first for a statistic.
otherLabel	`string`	`'Other'`	What the folded panel is called.
overflow	`FacetOverflow`	`'note'`	What happens to the groups past the cap. `"note"` — the default — draws the top N and prints a line under the grid saying how many are missing. `"fold"` adds one more panel holding the tail summed at each category, the same bargain `BarList`'s "Other" row makes: the total stays true, and one panel absorbs the long tail. Either way a capped grid says so; nothing is dropped in silence.
overflowNote	`(info: FacetOverflowInfo) => ReactNode`	`defaultOverflowNote`	Writes the line under a capped grid. The default sentence is English; this is where a translated call site replaces it.
scales	`FacetScales`	`'shared'`	Whether every panel is drawn against one domain or against its own. `"shared"` — the default, and the entire reason this component exists. On independent scales every panel fills its own plot, so a group peaking at 40 and a group peaking at 4,000 come out the same shape, and the comparison the reader opened the grid to make is not merely hard but actively wrong. The shared domain is computed across all the panels that survive the cap and handed to each one as `panel.domain`; a panel that does not pass it to its value axis has opted back into the broken version. `"independent"` is the escape hatch for the case where the panels are not comparable — different units, different orders of magnitude that carry no relation — and where each panel's own shape is the only reading. It is never the safe answer, which is why it is not the default.
showPanelNames	`boolean`	`true`	Prints each panel's group name above its plot. On by default. Turning it off only hides the name — it stays in the accessibility tree, because a grid whose panels a screen reader cannot tell apart is a grid with one figure and twelve anonymous plots in it.
showTitle	`boolean`		Prints the title above the grid instead of hiding it from sight.
sort	`FacetSort<TRow>`	`'max'`	The panel order. Defaults to the largest peak first, because that is what makes a grid readable: eye order becomes rank order, and "which of these is the problem" is answered by position before a single axis is read. `"name"` for a grid a reader will look things up in, an explicit array of names for an order the data does not carry — stages, weekdays, severities — and a comparator over `{ name, rows, stats }` for anything else.
xDataKey	`keyof TRow & string`		The shared category field — the x axis every panel has in common. Feeds the hidden table view, and is what lets `overflow="fold"` add the tail up at each category instead of concatenating it.
xLabel	`ReactNode`		The category axis's name, printed once under the grid.
yLabel	`ReactNode`		The value axis's name, printed once above the grid instead of per panel.

Accessibility

The shared domain is the default and the whole point: on independent scales a group peaking at 40 and one peaking at 4,000 draw the same shape, and the comparison the reader came for is not merely lost but inverted.
Every panel is a figure with its own accessible name, so a screen reader walks eight named charts rather than one unnamed grid.
Panels beyond max fold into a stated overflow rather than being dropped, and the count is printed — a grid silently missing four groups is not something a reader can detect.
Panel order is a choice the call site makes explicitly through sort, because reading order is what a reader takes as ranking.

LineChart Sparkline

Examples

Notes

Props

Accessibility

Related