Charts

Stacked bars for part-to-whole categories

Show component parts inside each category bucket. StackedBarChart is a dedicated entry that applies the BarChart stacking behavior by default.

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Stroke: #ff0000 | Fill: #000000 | Label Color: white

Examples

Compare framing, density, legend, and stacking with the code tab.


Appearance: outline | Density: compact | Show Grid: true | Show Legend: true | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Stroke Dasharray: 5,5 | Outer Radius: 100% | Label Color: white

Chart frame variants

Each row pairs live output with JSX; the Variant line states the appearance token on the frame.


Appearance: default | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: outline | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: sky | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: emerald | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: amber | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: slate | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: indigo | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-cyan-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-emerald-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-amber-rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-slate-gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-indigo-purple | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-cyan-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-emerald-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-amber-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: default | Density: comfortable | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

What it does

Stacks each series into the same category bar with shared grid, axis, legend, and tooltip controls.

It uses the same appearance and density variants as BarChart.

Data shape

Rows hold category labels in `xKey`; numeric fields referenced by `series.dataKey` become stacked segments.

Common use cases

  • Revenue split by product across months.
  • Traffic source mix by campaign.
  • Completed versus pending work by team.

Accessibility

Use legends and tooltips with explicit series names.

Avoid too many stacked segments when comparisons need precision.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/charts/stacked-bar` inside client components when interaction is required.

FAQ

Why use StackedBarChart instead of BarChart with stacked?

Use StackedBarChart when stacking is the primary chart type you want to expose from an entry or CLI vendor command.

Can series customize stack groups?

The component applies one shared stack by default through the BarChart implementation; use BarChart directly for more specialized grouped stacking.