AreaChart
Responsive area chart with support for stacked areas, gradients, and multiple series.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
xAxisKey* | string | — | |
areas* | AreaConfig[] | — | — |
stacked | boolean | — | |
xAxis | AxisConfig | — | — |
yAxis | AxisConfig | — | — |
Usage
// Simple area chart
<AreaChart
data={timeSeriesData}
xAxisKey="date"
areas={[{ dataKey: 'value', name: 'Revenue', gradient: true }]}
/>
// Stacked area chart
<AreaChart
data={timeSeriesData}
xAxisKey="date"
areas={[
{ dataKey: 'product', name: 'Products', stackId: 'total' },
{ dataKey: 'services', name: 'Services', stackId: 'total' },
]}
stacked
/>