---
title: AreaChart
description: Visualize volume and trends with filled regions.
icon: chart-area
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

AreaChart fills the region between a line and the axis, emphasizing the magnitude of values over time. It supports stacking, which makes it easy to show how parts contribute to a whole.

## Basic Usage

<ComponentPreview json={{"view":{"type":"AreaChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"stacked":false,"curve":"linear","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components.charts import AreaChart, ChartSeries

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
    {"month": "Mar", "desktop": 237, "mobile": 120},
    {"month": "Apr", "desktop": 73, "mobile": 190},
    {"month": "May", "desktop": 209, "mobile": 130},
    {"month": "Jun", "desktop": 214, "mobile": 140},
]

AreaChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "AreaChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "stacked": false,
    "curve": "linear",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Stacked

Stacking shows how each series contributes to the total. The topmost line represents the combined value.

<ComponentPreview json={{"view":{"type":"AreaChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"stacked":true,"curve":"linear","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="QXJlYUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIHN0YWNrZWQ9VHJ1ZSwKICAgIHNob3dfbGVnZW5kPVRydWUsCikK">
<CodeGroup>
```python Python {8} icon="python"
AreaChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    stacked=True,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "AreaChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "stacked": true,
    "curve": "linear",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Minimal

Turn off the grid for a cleaner look.

<ComponentPreview json={{"view":{"type":"AreaChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"value","label":"Requests"}],"xAxis":"month","height":300,"stacked":false,"curve":"linear","showDots":false,"showLegend":false,"showTooltip":true,"showGrid":false,"showYAxis":true,"yAxisFormat":"auto"}}} playground="QXJlYUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVtDaGFydFNlcmllcyhkYXRhX2tleT0idmFsdWUiLCBsYWJlbD0iUmVxdWVzdHMiKV0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIHNob3dfZ3JpZD1GYWxzZSwKKQo=">
<CodeGroup>
```python Python {5} icon="python"
AreaChart(
    data=data,
    series=[ChartSeries(data_key="value", label="Requests")],
    x_axis="month",
    show_grid=False,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "AreaChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [{"dataKey": "value", "label": "Requests"}],
    "xAxis": "month",
    "height": 300,
    "stacked": false,
    "curve": "linear",
    "showDots": false,
    "showLegend": false,
    "showTooltip": true,
    "showGrid": false,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Smooth

Set `curve="smooth"` for gently curved lines between data points. The filled area follows the curve.

<ComponentPreview json={{"view":{"type":"AreaChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"stacked":false,"curve":"smooth","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="QXJlYUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIGN1cnZlPSJzbW9vdGgiLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python {8} icon="python"
AreaChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    curve="smooth",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "AreaChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "stacked": false,
    "curve": "smooth",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Step

Set `curve="step"` to connect points with step-shaped lines. The filled area follows the stepped edges.

<ComponentPreview json={{"view":{"type":"AreaChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"stacked":false,"curve":"step","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="QXJlYUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIGN1cnZlPSJzdGVwIiwKICAgIHNob3dfbGVnZW5kPVRydWUsCikK">
<CodeGroup>
```python Python {8} icon="python"
AreaChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    curve="step",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "AreaChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "stacked": false,
    "curve": "step",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="AreaChart Parameters">
<ParamField body="data" type="list[dict] | str" required>
  Data as a list of dicts, or a `{{ field }}` interpolation reference.
</ParamField>

<ParamField body="series" type="list[ChartSeries]" required>
  Series definitions — each becomes a filled area on the chart.
</ParamField>

<ParamField body="x_axis" type="str | None" default="None">
  Data key for x-axis labels.
</ParamField>

<ParamField body="height" type="int" default="300">
  Chart height in pixels.
</ParamField>

<ParamField body="stacked" type="bool" default="False">
  Stack areas on top of each other.
</ParamField>

<ParamField body="curve" type='Literal["linear", "smooth", "step"]' default='"linear"'>
  Interpolation curve between data points.
</ParamField>

<ParamField body="show_dots" type="bool" default="False">
  Show a dot at each data point.
</ParamField>

<ParamField body="show_legend" type="bool" default="False">
  Show a legend below the chart.
</ParamField>

<ParamField body="show_tooltip" type="bool" default="True">
  Show tooltips on hover.
</ParamField>

<ParamField body="show_grid" type="bool" default="True">
  Show horizontal grid lines.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="ChartSeries Parameters">
<ParamField body="data_key" type="str" required>
  Data field to plot — must match a key in the data dicts.
</ParamField>

<ParamField body="label" type="str | None" default="None">
  Display label for legends and tooltips. Defaults to the `data_key` value.
</ParamField>

<ParamField body="color" type="str | None" default="None">
  CSS color override. By default, colors cycle through the theme's chart palette (`--chart-1` through `--chart-5`).
</ParamField>
</Card>

## Protocol Reference

```json AreaChart
{
  "type": "AreaChart",
  "data": "Action[] | string (required)",
  "series": "[ChartSeries] (required)",
  "xAxis?": "string",
  "height?": "300",
  "stacked?": false,
  "curve?": "linear | smooth | step",
  "showDots?": false,
  "showLegend?": false,
  "showTooltip?": true,
  "showGrid?": true,
  "cssClass?": "string"
}
```

```json ChartSeries
{
  "dataKey": "string (required)",
  "label?": "string",
  "color?": "string"
}
```

For the complete protocol schema, see [AreaChart](/protocol/area-chart), [ChartSeries](/protocol/chart-series).
