Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Graphing

/

Areachart

An area chart combines the line chart and bar chart to show how one or more groups’ numeric values change over the progression of a second variable, typically that of time. An area chart is distinguished from a line chart by the addition of shading between lines and a baseline, like in a bar chart.

For an area chart we must define an rx.recharts.area() component that has a data_key which clearly states which variable in our data we are tracking. In this simple example we track uv against name and therefore set the rx.recharts.x_axis to equal name.

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

Multiple areas can be placed on the same area_chart.

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.area(
        data_key="pv", stroke="#82ca9d", fill="#82ca9d"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

You can also assign a range in the area by assiging the data_key in the rx.recharts.area to a list with two elements, i.e. here a range of two temperatures for each date.

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.area(
        data_key="pv", stroke="#82ca9d", fill="#82ca9d"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

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.

class AreaState(rx.State):
    data = data

    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 index():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
            type_="natural",
            on_click=AreaState.randomize_data,
        ),
        rx.recharts.area(
            data_key="pv",
            stroke="#82ca9d",
            fill="#82ca9d",
            type_="natural",
        ),
        rx.recharts.x_axis(
            data_key="name",
        ),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        rx.recharts.cartesian_grid(
            stroke_dasharray="3 3",
        ),
        data=AreaState.data,
        width="100%",
        height=400,
    )

An Area chart component in Recharts.

PropTypeDescriptionValues
base_valueUnion

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

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.

dataList

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

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

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

layoutLiteral

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

marginDict

The sizes of whitespace around the chart.

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'

Valid Children

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

Event Triggers

No component specific event triggers

An Area component in Recharts.

PropTypeDescriptionValues
strokestr

The color of the line stroke.

stroke_widthint

The width of the line stroke.

fillstr

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 false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.

active_dotbool

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.

labelbool

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

stack_idstr

The stack id of area, when two areas have the same value axis and same stackId, then the two areas area stacked in order.

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.

Valid Children

  • LabelList

Event Triggers

No component specific event triggers

← UploadAxis →

Did you find this useful?