About this block

Revenue Breakdown Bars decomposes the topline. Six months of MRR stack into three plan tiers as shadcn bars, grayscale tokens from light to dark, with a legend and tooltip, and the lede reads the chart for the visitor, the middle tier carries the company, by design. Composition charts answer the question top lines raise, made of what.

Built on ui/chart with a three key config, the data array and the labels are the only edits. The stacked radius sits on the top segment only so the bars stay tidy. Three segments is the readable limit for stacked bars at this size.

When to use

Reach for this block on open metrics pages after the topline mrr-growth-chart, total first, composition second. The same shape serves any decomposition story, revenue by region, signups by channel, costs by category. The lede should always interpret, an unread composition chart is just texture.

A natural flow around it on a Marketing Pro page:

Before

• MRR chart establishing the total this decomposes

After

• Cost transparency charts for the other side of the ledger
• Pricing where the tiers being charted are sold

What you can display

One strong use is MRR by plan tier. Other stacks:

• Signups by channel. Organic, paid, and referral stacked monthly for a growth report.
• Revenue by region. Americas, EMEA, APAC for an international story.
• Costs by category. Infrastructure, people, and tools for a cost transparency page.

Tip: order segments by stability, steadiest tier at the bottom, so the stack reads as foundation and growth rather than noise.