Percent Stacked Bars
A card panel charting monthly signups by acquisition channel as bars normalized to 100 percent, so the chart reads as share of mix over volume.
A card panel charting monthly signups by acquisition channel as bars normalized to 100 percent, so the chart reads as share of mix over volume.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Percent Stacked Bars charts monthly signups by acquisition channel over six months, four channels from Organic search to Paid stacked in every bar. Each bar is normalized to 100 percent, so the chart reads as share of mix rather than absolute volume and a shifting channel stays visible even as totals grow. Organic gains 8 points over the half while paid falls by a third.
The block is a recharts BarChart on ui/chart with four var(--chart-N) series sharing one stackId, a y axis fixed to a 0 to 100 domain with percent ticks, and a shared legend. The data array has one row per month with a value per channel, so swapping in your real acquisition breakdown is a single data update.
Reach for this block on a growth or marketing dashboard where the story is composition rather than raw counts. Wire the array to your attribution backend grouped by channel per month, and keep the channels stable across the range so the bands line up and the mix shift stays legible.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the signup channel mix over time. Other normalized stacked reads:
Tip: keep the channel set fixed across months so the bands stay aligned and the mix shift reads without recoloring.