StackedArea

Stacked area charts for visualizing cumulative time series data with toggleable series.

Playground

Click the legend badges to toggle series visibility:

Props

Midnight

showArea

OffOn

fillOpacity

0.6

Code

<StackedArea
  data={data}
  theme="midnight"
  showArea
  fillOpacity={0.6}
  unit="visits"
/>

Usage

tsx

<StackedArea
  data={trafficData}
  dataKeys={['direct', 'organic', 'referral', 'social']}
  timeKey="date"
  theme="midnight"
  unit="visits"
  seriesLabels={{
    direct: 'Direct',
    organic: 'Organic Search',
    referral: 'Referral',
    social: 'Social Media',
  }}
/>

Props

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array
`dataKeys*`	`(keyof T)[]`	-	Keys for stacked series
`timeKey`	`keyof T`	`"time"`	Key for x-axis
`width`	`number`	`600`	Chart width
`height`	`number`	`300`	Chart height
`theme*`	`ThemeName`	-	Theme name
`unit`	`string`	-	Unit label for values
`showArea`	`boolean`	`true`	Show area fill
`fillOpacity`	`number`	`0.6`	Area fill opacity
`seriesLabels`	`Record<string, string>`	-	Custom series labels