# Area Chart

Filled series over time: overlapping, stacked or normalized to 100%.

Group: Charts

## Import

```tsx
import { AreaChart } from "@indoku/ui"
```

## Examples

### Gradient fill

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function AreaGradient() {
  return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} /></Box>
}
```

### Stacked

`mode=stacked` adds series on top of each other.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function AreaStacked() {
  return <Box maxW="2xl"><AreaChart series={stacked} categories={months} mode="stacked" legend /></Box>
}
```

### Percent

`mode=percent` shows each share of the total.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function AreaPercent() {
  return <Box maxW="2xl"><AreaChart series={stacked} categories={months} mode="percent" legend /></Box>
}
```

### Reference area

Shade a range of categories.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function AreaReference() {
  return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} referenceArea={{ from: 2, to: 4, label: "Campaign" }} /></Box>
}
```

### Dot markers

`showDots` marks every point.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function AreaDots() {
  return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} showDots gradient={false} /></Box>
}
```

## Props

### AreaChart

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `'overlap' \| 'stacked' \| 'percent'` | `'overlap'` | How series combine. |
| `gradient` | `boolean` | `true` | Gradient or flat fill. |
| `showDots` | `boolean` | `false` | Circle on every point. |
| `referenceArea` | `{ from: number; to: number; label?: string }` |  | Shaded span between two category indexes. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Line Chart: https://ui.indoku.org/docs/line-chart
- Bar Chart: https://ui.indoku.org/docs/bar-chart