Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Areachart

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

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,
    )

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.

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%",
    )

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.

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 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.

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,
    )

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

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.

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%",
    )

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.

Curve Type:

class AreaState(rx.State):
    data = data
    curve_type = ""

    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%",
    )

An Area chart component in Recharts.

PropTypeDescriptionValues
base_valueUnion

The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'

dataList

The source data, in which each element is an object.

marginDict

The sizes of whitespace around the chart.

sync_idstr

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_methodLiteral

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

layoutLiteral

The layout of area in the chart. 'horizontal' | 'vertical'

stack_offsetLiteral

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'

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • XAxis
  • YAxis
  • ReferenceArea
  • ReferenceDot
  • ReferenceLine
  • Brush
  • CartesianGrid
  • Legend
  • GraphingTooltip
  • Area
  • Defs

An Area component in Recharts.

PropTypeDescriptionValues
strokeUnion

The color of the line stroke.

stroke_widthint

The width of the line stroke.

fillUnion

The color of the area fill.

type_Literal

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' |

dotbool

If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.

active_dotbool

The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.

labelbool

If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally.

stack_idUnion

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.

unitUnion

The unit of data. This option will be used in tooltip.

nameUnion

The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.

layoutLiteral

The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'

data_keyUnion

The key of a group of data which should be unique in an area chart.

x_axis_idUnion

The id of x-axis which is corresponding to the data.

y_axis_idUnion

The id of y-axis which is corresponding to the data.

legend_typeLiteral

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

Valid Children

  • LabelList

Did you find this useful?

HomeGalleryChangelogIntroductionHosting