Area Chart · Library · Reflex Docs

Area Chart

Area charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A Recharts area chart displays quantitative data using filled areas between a line connecting data points and the axis.

Basic Example

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.

Stacked Area Chart

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

Gradient Fill

An SVG linear gradient can give the filled area a smooth fade-out effect. Define the gradient inside an rx.el.svg.defs block as the first child of the chart, then reference it from the area's fill prop with "url(#gradient-id)".

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.

Layout

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.

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.

Related Charts

Explore more chart types you can build with Reflex and Recharts in pure Python:

API Reference

rx.recharts.AreaChart

An Area chart component in Recharts.

Props

Prop Type Description
width Union[int, str] The width of chart container. String or Integer.
height Union[int, str] The height of chart container.
data Sequence 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 "index"`"value" When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes.
layout "vertical"`"horizontal" The layout of area in the chart.
stack_offset "expand""none""wiggle"`"silhouette" The type of offset function used to generate the lower and upper values in the series array.
base_value "dataMin""dataMax""auto" The base value of area.

Valid Children

XAxis``YAxis``ReferenceArea``ReferenceDot``ReferenceLine``Brush``CartesianGrid``Legend``GraphingTooltip``Area``Defs``Layer``Rectangle

Event Triggers

See the full list of default event triggers

rx.recharts.Area

An Area component in Recharts.

Props

Prop Type Description
layout "vertical"`"horizontal" The layout of bar in the chart, usually inherited from parent.
data_key Union[int, str] The key of a group of data which should be unique in an area chart.
x_axis_id Union[int, str] The id of x-axis which is corresponding to the data.
y_axis_id Union[int, str] The id of y-axis which is corresponding to the data.
legend_type "circle""cross""diamond""line""plainline""rect""square""star""triangle""wye""none" The type of icon in legend.
label Union[dict, bool] 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 If set false, animation of bar will be disabled.
animation_begin int Specifies when the animation should begin, the unit of this option is ms.
animation_duration int Specifies the duration of animation, the unit of this option is ms.
animation_easing "ease""ease-in""ease-out""ease-in-out""linear" The type of easing function.
unit Union[int, str] The unit of data.
name Union[int, str] The name of data.
stroke Union[str, Color] The color of the line stroke.
stroke_width Union[str, int, float] The width of the line stroke.
fill Union[str, Color] The color of the area fill.
type_ "basis""basisClosed""basisOpen""bumpX""bumpY""bump""linear""linearClosed""natural""monotoneX""monotoneY""monotone""step""stepBefore""stepAfter" The interpolation type of area.
dot Union[dict, bool] If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
active_dot Union[dict, bool] The dot is shown when user enter an area chart and this chart has tooltip.
base_line Union[int, Sequence] The value which can describe the line, usually calculated internally.
points Sequence The coordinates of all the points in the area, usually calculated internally.
stack_id Union[int, str] The stack id of area.
connect_nulls bool Whether to connect a graph area across null points.

Valid Children

LabelList

Event Triggers

See the full list of default event triggers