About this block

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.

When to use

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

• Kpi cards row

After

• Data table
• Reports

What you can display

One strong use is the signup channel mix over time. Other normalized stacked reads:

• Revenue by segment. Share of revenue per customer tier each month, normalized to show mix drift.
• Traffic sources. Percent of sessions by referrer type across weeks to track where reach shifts.
• Ticket categories. Share of support volume per reason code per month to spot rising causes.

Tip: keep the channel set fixed across months so the bands stay aligned and the mix shift reads without recoloring.