data-display / beta

StackedBarChart

One bar per category, split into its parts, with the total at the bar's end (revenue split into profit and expenses by month).

LIVE PREVIEW

Loading preview…

When to use

Show a whole and what it is made of: revenue = profit + expenses, budget = spent + remaining.
Month or stage sequences where the total and its composition both matter.

Consider an alternative

Compare two measures that are not parts of one whole — use GroupedBarChart.
A single series — use BarChart.
Negative parts — they draw as zero with no segment or tooltip, and the real figure stays in the accessible summary and table; pass parts that add up to the whole.

Import

import { StackedBarChart } from '@revido-llc/kit';

Keyboard interaction

Tab — focus each segment and reveal its tooltip
Enter / Space — activate onCategoryPress when provided
Escape — dismiss the tooltip

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


data (required)	readonly StackedBarChartCategory[]	—	Categories in axis order. Each holds one value per series `id`.
series (required)	readonly StackedBarChartSeries[]	—	Segments of each bar, in drawing order: from the baseline outward.
highlight	string	—	Category label to emphasize; the other bars dim. Defaults to none.
onCategoryPress	((label: string) => void)	—	Fired when a segment is activated.
orientation	"vertical" \| "horizontal"	"vertical"	Vertical for short sequences; horizontal when category labels are long.
valueFormat	((value: number) => string)	—	Formats axis ticks, totals, tooltips and the accessible table.
children	ReactNode	—
className	string	—

Examples

Orientations

<StackedBarChart
  data={[{ label: "Oct", values: { profit: 15661, expenses: 2400 } }]}
  series={[
    { id: "profit", label: "Profit", tone: 1 },
    { id: "expenses", label: "Expenses", tone: 4 },
  ]}
  highlight="Oct"
/>

Revenue by month

Each bar is the month's revenue; its parts are the profit kept and the expenses it paid for.

<StackedBarChart
  orientation="horizontal"
  data={months}
  series={[
    { id: "profit", label: "Profit", tone: 1 },
    { id: "expenses", label: "Expenses", tone: 4 },
  ]}
  valueFormat={money}
  highlight="Oct"
/>

No measurements

<StackedBarChart data={[{ label: "Jul", values: { profit: 0, expenses: 0 } }]} series={series} />

Literal anatomy

Static component anatomy; bind onCategoryPress in the consuming app.

<StackedBarChart aria-label="Revenue split into profit and expenses" data={months} series={series} />