Charts · Comparison
Magnitude by category
Bars answer one question: how do these categories compare? Grouping, stacking and orientation are properties of the same component; waterfall and diverging bars get their own vocabulary because their shape carries the meaning.
Grouped and stacked
Two periods side by side, then three quarters stacked.
Current vs previous
Grouped bars, two series, one category axis.
Stacked
Stacking groups series under one key and totals the axis.
Horizontal and 100%
Long category labels are the signal to go horizontal; 100% stacking is for share, not for absolute size.
Horizontal bars
Same component, orientation swapped.
100% stacked
stackMode percent is presentation normalisation, not analytics.
Diverging and waterfall
Diverging data is split into two signed series that share a stack key; a waterfall is a transparent base plus a visible delta.
Diverging bars
Six segments, signed change prepared by the caller.
Waterfall
Opening ARR to closing ARR with connector lines.
When not to use a bar
Three rules the Showcase enforces on itself.
Do not use bars for a time progression — a line shows the rate of change, bars do not.
Do not stack series with different units. Percent stacking is the only honest mixed stack.
Do not put more than roughly twelve categories on a vertical bar axis; go horizontal or filter them.
Usage
<BarChart
data={rows}
xKey="channel"
series={[{ key: "current", type: "bar", tone: "accent" }]}
orientation="horizontal" // optional
tooltip={{ mode: "axis", total: true }}
/>