Overview
StackedAreaChart displays how composition of a whole changes over time with stacked areas. Great for showing trends in category distributions and cumulative values.
Features
- Multiple series with automatic stacking
- Normalized (100%) mode option
- Custom colors per series
- Curved or linear interpolation
- Interactive tooltips with totals
- Configurable grid and legend
Examples
Basic Stacked Area
Standard stacked area chart
Insight Types Over Time
Last 6 months
Normalized (Percentage)
100% stacked view
Insight Type Distribution
Percentage over time
Without Grid
Cleaner appearance
Clean View
Linear (Not Curved)
Straight line interpolation
Linear Interpolation
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | required | Array of data points |
series | StackedAreaSeries[] | required | Series configuration |
xAxisKey | string | "date" | Key for x-axis values |
normalized | boolean | false | Normalize to 100% |
showLegend | boolean | true | Show legend |
showGrid | boolean | true | Show grid lines |
curved | boolean | true | Use curved interpolation |
fillOpacity | number | 0.6 | Area fill opacity (0-1) |
Usage
import { StackedAreaChart, ChartCard } from '@/ui/components/charts';
// Basic stacked area chart
<ChartCard title="Insight Types Over Time">
<StackedAreaChart
data={[
{ month: 'Jan', issues: 45, features: 32, praise: 18 },
{ month: 'Feb', issues: 52, features: 28, praise: 22 },
// ...
]}
series={[
{ key: 'issues', label: 'Issues' },
{ key: 'features', label: 'Features' },
{ key: 'praise', label: 'Praise' },
]}
xAxisKey="month"
/>
</ChartCard>
// Normalized (100% stacked)
<StackedAreaChart
data={data}
series={series}
normalized
/>
// With custom colors
<StackedAreaChart
data={data}
series={[
{ key: 'issues', label: 'Issues', color: 'var(--destructive)' },
{ key: 'features', label: 'Features', color: 'var(--chart-2)' },
{ key: 'praise', label: 'Praise', color: 'var(--chart-5)' },
]}
/>
// Without grid and legend
<StackedAreaChart
data={data}
series={series}
showGrid={false}
showLegend={false}
/>