StructureChart

Components ranked largest to smallest as horizontal bars, each overlapped with its comparison scenario, with the share of the total and a variance beside it.

When to use

Structure / composition - revenue by region, cost by category. Ranked, with a total row.

Example

import { StructureChart } from "ibcs-react";

<StructureChart data={[{ category: "EMEA", AC: 12e6, PY: 10e6 } /* … */]} comparison="PY" />;

The name key is category - the same key every other chart's data uses - so one array can feed a VarianceColumnChart and a StructureChart unchanged. (label, the only key before v1.1, still works as an alias.)

More examples

Composition vs plan

Rank the same regions but measure each against plan - Middle East & Africa, ahead of a small plan, stands out.

<StructureChart data={regions} comparison="PL" />

Cost components take higherIsBetter: false on the row so an increase reads as unfavorable.

Props