Radar Chart · Library · Reflex Docs

Radar Chart

Radar charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A radar chart (also called a spider chart) shows multivariate data of three or more quantitative variables mapped onto an axis.

Simple Example

For a radar chart we must define an rx.recharts.radar() component for each set of values we wish to plot. Each rx.recharts.radar() component has a data_key which clearly states which variable in our data we are plotting. In this simple example we plot the A column of our data against the subject column which we set as the data_key in rx.recharts.polar_angle_axis.

Start Building Now!

Multiple Radars

We can also add two radars on one chart by using two rx.recharts.radar components.

In this plot an inner_radius and an outer_radius are set which determine the chart's size and shape. The inner_radius sets the distance from the center to the innermost part of the chart (creating a hollow center if greater than zero), while the outer_radius defines the chart's overall size by setting the distance from the center to the outermost edge of the radar plot.

Start Building Now!

Using More Props

The dot prop shows points at each data vertex when true. legend_type="line" displays a line in the chart legend. animation_begin=0 starts the animation immediately, animation_duration=8000 sets an 8-second animation, and animation_easing="ease-in" makes the animation start slowly and speed up. These props control the chart's appearance and animation behavior.

Start Building Now!

Dynamic Data

Chart data tied to a State var causes the chart to automatically update when the state changes, providing a nice way to visualize data in response to user interface elements. View the "Data" tab to see the substate driving this radar chart of character traits.

Start Building Now!

Related Charts

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

API Reference

rx.recharts.RadarChart

A Radar 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.
`cx`	`Union[int, str]`	The x-coordinate of center.
`cy`	`Union[int, str]`	The y-coordinate of center.
`start_angle`	`int`	The angle of first radial direction line.
`end_angle`	`int`	The angle of last point in the circle which should be...
`inner_radius`	`Union[int, str]`	Inner radius of the first circle grid.
`outer_radius`	`Union[int, str]`	Outer radius of the last circle grid.

Valid Children

PolarAngleAxis, PolarRadiusAxis, PolarGrid, Legend, GraphingTooltip, Radar, Defs, Layer, Rectangle

Event Triggers

See the full list of default event triggers

rx.recharts.Radar

A Radar chart component in Recharts.

Props

Prop	Type	Description
`data_key`	`Union[int, str]`	The key of a group of data which should be unique...
`points`	`Sequence`	The coordinates of all the vertices of the radar shape...
`dot`	`Union[dict, bool]`	If false set, dots will not be drawn.
`stroke`	`Union[str, Color]`	Stroke color.
`fill`	`Union[str, Color]`	Fill color.
`fill_opacity`	`float`	The opacity to fill the chart.
`legend_type`	`