StackedChart

Series stack in the order you declare them, each category printing its total at the end of the stack. orientation="column" is the C01 time layout; orientation="bar" is the C02 structure layout.

When to use

Part-to-whole over time or across a structure - when one series dominates and the total matters. IBCS prefers small multiples when many series compete.

Example

import { StackedChart } from "ibcs-react";

<StackedChart
  data={[{ category: "Q1", values: { product: 12e6, service: 8e6 } } /* … */]}
  series={[
    { key: "product", label: "Product" },
    { key: "service", label: "Service" },
  ]}
  orientation="column" // "bar" for C02 structure
/>;

Only one series can carry the story: highlight="product" emphasises that segment and greys the rest. If several series compete for attention, split the chart into small multiples instead.

Props