shadcn.io is not affiliated with official shadcn/ui
Stacked Area Chart Breakdown Stats Block for React
A stacked area chart of weekly signups by channel in three foreground weights, with a legend of each channel's share beside it; pointing at a row or a layer keeps that layer and fades the others.
Installation
Overview
A stacked area chart for React with Base UI. A solid divider splits the block. At the start is the header for Channelwick, marketing attribution ("Search brought 56% of signups"), and under it three legend rows, one per channel, each with a swatch at its layer's weight, its name, its share of the twelve weeks and its total signups. At the end is the chart in a framed plot (a hairline frame with + marks on its corners): weekly signups in three stacked layers, drawn at 85%, 50% and 22% of the text colour (mixed into the page colour, so they are opaque) with a thin gap between neighbours so they never rely on contrast alone, over a scale in signups per week with labels under four of the weeks. Pointing at a legend row, focusing it with the keyboard or pointing at a layer keeps that layer at full weight and fades the other two. It is pure CSS, with no state. On a phone the chart comes first and the legend follows. The shares are rounded by the largest remainder so they always add up to 100, and every layer, share, total and the headline are computed from the three weekly series, so the text and the drawing can't disagree. It's built from Guides and hand-drawn SVG in your theme's foreground colour, with no chart library. For a traffic-source, revenue-mix or cost-breakdown section.
FAQ
How do I change the channels and the weeks?
Edit CHANNELS at the top of the file: each has a name, an id, a series of weekly signups (one list per channel, all the same length) and its three classes. The layers stack in list order, the first at the bottom. The scale rounds up to a multiple of 250 above the highest weekly total, and the layers, the shares, the totals, the headline and the chart's accessible name are all computed. For a fourth channel, add its classes: the fade rule for each layer names the others.
How does the highlight work without state?
The legend buttons and the layers carry the same data-channel attribute, and the whole block is a Tailwind group. Each layer fades when a button or layer of another channel is hovered or focus-visible anywhere in the group (group-has-[[data-channel=email]:is(:hover,:focus-visible)]), and each legend row takes a muted tint when its own channel is. So the pairing works both ways, with a mouse and with the keyboard, with no script. A touch screen has no hover, so the rows stay a plain legend there.
Why do the shares add up to 100?
Rounding each share separately can total 99 or 101. The shares are floored, and the missing points go to the channels with the largest remainders, so the legend never contradicts itself.
Is the chart accessible?
Yes. The chart is an image whose name lists every channel with its share, its first and last weekly values, and the total. The legend is a description list with a real button for each channel, with a visible focus ring, and the percentages and counts are text. The scale and the week labels are hidden from assistive technology because the image's name carries the facts, and values are kept left to right so a right-to-left page doesn't reorder them.
Why are the layers grey?
Three weights of the text colour, with a gap between layers, read in any theme, on any chart size and without colour, and they leave the page's one primary colour for the one main action. The legend's swatches use the same weights, so a row and its layer match.
What moves, and how does it fit on a phone?
The header, the chart and the legend fade up once on load, and the fade between layers is 150 milliseconds. With reduced motion all of it is off. On a phone the chart is a 4:3 box above the legend, and the legend rows stack under it, with nothing scrolling sideways at 320 pixels.
Related
- Pro
Dual Series Area Chart Stats
Area and lineHome-solar generation against use over one day: two overlapping areas in two weights, the surplus hours hatched, a legend and a band of three totals under the chart.
- Pro
Split Area Chart Hero Stats
Area and lineA split stats hero for a creator-membership platform: paying fans as one big rolling number with three sub-figures at the start, and at the end a twelve-week area chart you drag to read any week.
- Pro
Stacked Bar Chart Stats
Bar and columnTwelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.
- Pro
Donut Breakdown Stats
Parts of a wholeA budgeting app's month of spending as a framed donut with its total rolling up in the middle, beside a legend of five buckets with amount and share, the shares adding up to exactly 100%.
- Pro
Stacked Percentage Bar Stats
Parts of a wholeOne thick bar of a consultancy's week split into four segments at four weights with labels inside the wide ones, and a band of four legend cells under it; pointing at or focusing a cell brackets its segment.
- Pro
Area Chart With Pill Tabs Stats
Area and lineA framed area chart for a traffic analytics tool with pill tabs for Day, Week, Month and Year: choosing one swaps the readings, the labels under the chart and the total, whose digits roll.