GroupedBarChart
stableSide-by-side grouped bar chart for categorical comparison — budget vs. actual, entity-by-entity cash
import { GroupedBarChart } from "@nodus/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | Record<string, number | string>[] | — | Data rows |
xKeyreq | string | — | Key for x-axis category labels |
groupsreq | string[] | BarGroup[] | — | Bar group definitions |
datarequiredType
Record<string, number | string>[]Default —Data rows
xKeyrequiredType
stringDefault —Key for x-axis category labels
groupsrequiredType
string[] | BarGroup[]Default —Bar group definitions
MobileStacks / Scroll
Multi-group chart requires min 320px. Wrap in overflow-x-auto.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?