> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.recharts.AreaChart
  - rx.recharts.Area
---

# Area Chart

```python exec
import reflex as rx
import random
```

A Recharts area chart displays quantitative data using filled areas between a line connecting data points and the axis.

## Basic Example

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def area_simple():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=250,
    )
```

## Syncing Charts

The `sync_id` prop allows you to sync two graphs. In the example, it is set to "1" for both charts, indicating that they should be synchronized. This means that any interactions (such as brushing) performed on one chart will be reflected in the other chart.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def area_sync():
    return rx.vstack(
        rx.recharts.bar_chart(
            rx.recharts.graphing_tooltip(),
            rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
            rx.recharts.bar(
                data_key="pv",
                stroke="#82ca9d",
                fill="#82ca9d",
            ),
            rx.recharts.x_axis(data_key="name"),
            rx.recharts.y_axis(),
            data=data,
            sync_id="1",
            width="100%",
            height=200,
        ),
        rx.recharts.composed_chart(
            rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
            rx.recharts.line(
                data_key="pv",
                type_="monotone",
                stroke="#ff7300",
            ),
            rx.recharts.x_axis(data_key="name"),
            rx.recharts.y_axis(),
            rx.recharts.graphing_tooltip(),
            rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
            data=data,
            sync_id="1",
            width="100%",
            height=250,
        ),
        width="100%",
    )
```

## Stacking Charts

The `stack_id` prop allows you to stack multiple graphs on top of each other. In the example, it is set to "1" for both charts, indicating that they should be stacked together. This means that the bars or areas of the charts will be vertically stacked, with the values of each chart contributing to the total height of the stacked areas or bars.

This is similar to the `sync_id` prop, but instead of synchronizing the interaction between the charts, it just stacks the charts on top of each other.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def area_stack():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
            stack_id="1",
        ),
        rx.recharts.area(
            data_key="pv",
            stroke=rx.color("green", 9),
            fill=rx.color("green", 8),
            stack_id="1",
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        stack_offset="none",
        margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
        width="100%",
        height=300,
    )
```

## Multiple Axis

Multiple axes can be used for displaying different data series with varying scales or units on the same chart. This allows for a more comprehensive comparison and analysis of the data.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def area_multi_axis():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
            x_axis_id="primary",
            y_axis_id="left",
        ),
        rx.recharts.area(
            data_key="pv",
            x_axis_id="secondary",
            y_axis_id="right",
            type_="monotone",
            stroke="#82ca9d",
            fill="#82ca9d",
        ),
        rx.recharts.x_axis(data_key="name", x_axis_id="primary"),
        rx.recharts.x_axis(data_key="name", x_axis_id="secondary", orientation="top"),
        rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
        rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
        rx.recharts.graphing_tooltip(),
        rx.recharts.legend(),
        data=data,
        width="100%",
        height=300,
    )
```

## Layout

Use the `layout` prop to set the orientation to either `"horizontal"` (default) or `"vertical"`.

```md alert info
# Include margins around your graph to ensure proper spacing and enhance readability. By default, provide margins on all sides of the chart to create a visually appealing and functional representation of your data.
```

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def area_vertical():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke=rx.color("accent", 8),
            fill=rx.color("accent", 3),
        ),
        rx.recharts.x_axis(type_="number"),
        rx.recharts.y_axis(data_key="name", type_="category"),
        data=data,
        layout="vertical",
        height=300,
        width="100%",
    )
```

## Stateful Example

Here is an example of an area graph with a `State`. Here we have defined a function `randomize_data`, which randomly changes the data for both graphs when the first defined `area` is clicked on using `on_click=AreaState.randomize_data`.

```python demo exec
class AreaState(rx.State):
    data = data
    curve_type = ""

    @rx.event
    def randomize_data(self):
        for i in range(len(self.data)):
            self.data[i]["uv"] = random.randint(0, 10000)
            self.data[i]["pv"] = random.randint(0, 10000)
            self.data[i]["amt"] = random.randint(0, 10000)

    def change_curve_type(self, type_input):
        self.curve_type = type_input


def area_stateful():
    return rx.vstack(
        rx.hstack(
            rx.text("Curve Type:"),
            rx.select(
                ["basis", "natural", "step"],
                on_change=AreaState.change_curve_type,
                default_value="basis",
            ),
        ),
        rx.recharts.area_chart(
            rx.recharts.area(
                data_key="uv",
                on_click=AreaState.randomize_data,
                type_=AreaState.curve_type,
            ),
            rx.recharts.area(
                data_key="pv",
                stroke="#82ca9d",
                fill="#82ca9d",
                on_click=AreaState.randomize_data,
                type_=AreaState.curve_type,
            ),
            rx.recharts.x_axis(
                data_key="name",
            ),
            rx.recharts.y_axis(),
            rx.recharts.legend(),
            rx.recharts.cartesian_grid(),
            data=AreaState.data,
            width="100%",
            height=400,
        ),
        width="100%",
    )
```

## API Reference

### rx.recharts.AreaChart

An Area chart component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | str, int | - | The width of chart container. String or Integer. |
| `height` | str, int | - | The height of chart container. |
| `data` | Sequence[dict[str, Any]] | - | The source data, in which each element is an object. |
| `margin` | dict[str, Any] | - | The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. |
| `sync_id` | str | - | If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush. |
| `sync_method` | Literal["index", "value"] | `"index"` | When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index', 'value', function. |
| `layout` | Literal["vertical", "horizontal"] | `"horizontal"` | The layout of area in the chart. 'horizontal', 'vertical'. |
| `stack_offset` | Literal["expand", "none", "wiggle", "silhouette"] | - | The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand', 'none', 'wiggle', 'silhouette'. |
| `base_value` | int, Literal["dataMin", "dataMax", "auto"] | `"auto"` | The base value of area. Number, 'dataMin', 'dataMax', 'auto'. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.recharts.Area

An Area component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | Literal["vertical", "horizontal"] | - | The layout of bar in the chart, usually inherited from parent. 'horizontal', 'vertical'. |
| `data_key` | str, int | - | The key of a group of data which should be unique in an area chart. |
| `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. |
| `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. |
| `legend_type` | Literal["circle", "cross", "diamond", "line", "plainline", "rect", "square", "star", "triangle", "wye", "none"] | - | The type of icon in legend. If set to 'none', no legend item will be rendered. 'line', 'plainline', 'square', 'rect'\| 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye', 'none' optional. |
| `label` | dict[str, Any], bool | `False` | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. |
| `is_animation_active` | bool | `True` | If set false, animation of bar will be disabled. |
| `animation_begin` | int | `0` | Specifies when the animation should begin, the unit of this option is ms. |
| `animation_duration` | int | `1500` | Specifies the duration of animation, the unit of this option is ms. |
| `animation_easing` | Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"] | `"ease"` | The type of easing function. |
| `unit` | str, int | - | The unit of data. This option will be used in tooltip. |
| `name` | str, int | - | The name of data. This option will be used in tooltip and legend to represent the component. If no value was set to this option, the value of dataKey will be used alternatively. |
| `stroke` | str, Color | `rx.color("accent", 9)` | The color of the line stroke. |
| `stroke_width` | str, int, float | `1` | The width of the line stroke. |
| `fill` | str, Color | `rx.color("accent", 5)` | The color of the area fill. |
| `type_` | Literal["basis", "basisClosed", "basisOpen", "bumpX", "bumpY", "bump", "linear", "linearClosed", "natural", "monotoneX", "monotoneY", "monotone", "step", "stepBefore", "stepAfter"] | `"monotone"` | The interpolation type of area. And customized interpolation function can be set to type. 'basis', 'basisClosed', 'basisOpen', 'bumpX', 'bumpY', 'bump', 'linear', 'linearClosed', 'natural', 'monotoneX', 'monotoneY', 'monotone', 'step', 'stepBefore', 'stepAfter'. |
| `dot` | dict[str, Any], bool | `False` | If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. |
| `active_dot` | dict[str, Any], bool | `{stroke: rx.color("accent", 2), fill: rx.color("accent", 10)}` | The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. |
| `base_line` | int, Sequence[dict[str, Any]] | - | The value which can describle the line, usually calculated internally. |
| `points` | Sequence[dict[str, Any]] | - | The coordinates of all the points in the area, usually calculated internally. |
| `stack_id` | str, int | - | The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order. |
| `connect_nulls` | bool | `False` | Whether to connect a graph area across null points. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_animation_start` | The customized event handler of animation start. |
| `on_animation_end` | The customized event handler of animation end. |