StackedProportionBar

Pipeline stages

New 1,240 · 60%
In a campaign 610 · 29%
Replied 182 · 9%
Converted 41 · 2%
Unsubscribed 6 · <1%

import { StackedProportionBar } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '32rem' }}>
  <StackedProportionBar
    label="Lead pipeline"
    locale="en-US"
    segments={[
      { key: 'new', label: 'New', value: 1240 },
      { key: 'enrolled', label: 'In a campaign', value: 610 },
      { key: 'replied', label: 'Replied', value: 182 },
      { key: 'converted', label: 'Converted', value: 41 },
      { key: 'unsubscribed', label: 'Unsubscribed', value: 6 },
    ]}
  />
</div>

Usage examples

Storage capacity with a remainder

import { StackedProportionBar } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '32rem' }}>
  <StackedProportionBar
    label="Storage"
    size="lg"
    total={100}
    remainderLabel="Free"
    legendContent="value"
    formatValue={(v) => `${v} GB`}
    segments={[
      { key: 'docs', label: 'Documents', value: 38 },
      { key: 'media', label: 'Media', value: 21 },
      { key: 'backups', label: 'Backups', value: 12 },
    ]}
  />
</div>

Status mode: monitors by state

import { StackedProportionBar } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '32rem' }}>
  <StackedProportionBar
    label="Monitors by state"
    legendContent="value"
    segments={[
      { key: 'up', label: 'Operational', value: 42, tone: 'success' },
      { key: 'degraded', label: 'Degraded', value: 3, tone: 'warning' },
      { key: 'down', label: 'Down', value: 1, tone: 'danger' },
      { key: 'paused', label: 'Paused', value: 2, tone: 'neutral' },
    ]}
  />
</div>

Compact, legend for screen readers only

import { StackedProportionBar } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '20rem' }}>
  <StackedProportionBar
    label="Campaign progress"
    size="sm"
    legend={false}
    segments={[
      { key: 'replied', label: 'Replied', value: 12 },
      { key: 'done', label: 'Completed', value: 30 },
      { key: 'active', label: 'In progress', value: 58 },
    ]}
  />
</div>

Purpose

Shows how one whole divides (pipeline stages, storage by type, monitors by state) in a single compact bar, with the numbers in a legend that also serves as the accessible version.

Use when

A breakdown inside a card or row where a donut would be too large.
Usage of a capacity (total larger than the parts, with a "Free" remainder).

Avoid when

One value against a target: use Progress (meter).
Ranking or comparing many parts: use BarList.
Breakdowns over time: use a stacked BarChart.

Design principles

The bar is decorative; the legend is a real list ("Replied 18 · 9%"), so nothing depends on colour.
Series colours come only from the data palette, in order or pinned. The one exception is status mode: when every segment is a state (operational, degraded, down), each takes a status tone from the intent tokens instead.
Palette and status colours never mix in one bar: the types reject it, and a mixed array from untyped code logs a development warning and falls back to the palette.
Small parts stay visible: segments have a minimum width and shares under 1% read "<1%".
Gaps separate neighbours, so adjacent segments never merge.

API reference

import { StackedProportionBar, formatShare } from '@rookcom/monarch-react/charts';

Export	Kind	Rendering	Root class
`StackedProportionBar`	component	server-safe	`.mn-color-success-solid`
`formatShare`	utility	server-safe	–

The ref and native attributes go to the root <div>.

formatShare(part, total, { locale, maximumFractionDigits }) is exported for the same "<1%" / ">99%" wording elsewhere.

Exported from @rookcom/monarch-react/charts; the legend is the shared chart legend (.mn-chart__legend).

Generated from the TypeScript declarations of packages/react/src/components/charts/stacked-proportion-bar.

Properties

Negative and non-finite values count as 0.