Charts

Area charts for volume and share

Show cumulative or overlapping magnitude with filled regions under each series. AreaChart supports stacking via `stacked` and matching `stackId` values on series.

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: true | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: true | 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

Layers `Area` shapes with gradients friendly defaults.

Density and appearance tokens align with line and bar charts.

Data shape

Same cartesian model: `xKey` for the shared axis, numeric keys per series.

Common use cases

  • Market share over quarters.
  • Traffic sources as a stacked composition.
  • Smoothed demand curves with fill emphasis.

Accessibility

Ensure stacked fills remain distinguishable at reduced opacity.

Provide textual alternatives where precise values matter for compliance.

Next.js integration notes

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

FAQ

When should I stack areas?

Use stacking when parts compose a meaningful total; keep unstacked areas when overlap is intentional and totals are not additive.

Do fills respect theme colors?

Series resolve palette strokes and fills; override with `color` or `fill` on each series when branding requires it.