Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Radarchart

A radar chart shows multivariate data of three or more quantitative variables mapped onto an axis.

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.

def radar_simple():
    return rx.recharts.radar_chart(
        rx.recharts.radar(
            data_key="A",
            stroke="#8884d8",
            fill="#8884d8",
        ),
        rx.recharts.polar_grid(),
        rx.recharts.polar_angle_axis(data_key="subject"),
        rx.recharts.polar_radius_axis(
            angle=90, domain=[0, 150]
        ),
        data=data,
        width="100%",
        height=300,
    )

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.

def radar_multiple():
    return rx.recharts.radar_chart(
        rx.recharts.radar(
            data_key="A",
            stroke="#8884d8",
            fill="#8884d8",
        ),
        rx.recharts.radar(
            data_key="B",
            stroke="#82ca9d",
            fill="#82ca9d",
            fill_opacity=0.6,
        ),
        rx.recharts.polar_grid(),
        rx.recharts.polar_angle_axis(data_key="subject"),
        rx.recharts.polar_radius_axis(
            angle=90, domain=[0, 150]
        ),
        rx.recharts.legend(),
        data=data,
        inner_radius="15%",
        outer_radius="80%",
        width="100%",
        height=300,
    )

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.

def radar_start_end():
    return rx.recharts.radar_chart(
        rx.recharts.radar(
            data_key="A",
            dot=True,
            stroke="#8884d8",
            fill="#8884d8",
            fill_opacity=0.6,
            legend_type="line",
            animation_begin=0,
            animation_duration=8000,
            animation_easing="ease-in",
        ),
        rx.recharts.polar_grid(),
        rx.recharts.polar_angle_axis(data_key="subject"),
        rx.recharts.polar_radius_axis(
            angle=90, domain=[0, 150]
        ),
        rx.recharts.legend(),
        data=data,
        width="100%",
        height=300,
    )

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.

Strength

15

Dexterity

15

Constitution

15

Intelligence

15

Wisdom

15

Charisma

15

Remaining points: 10

class RadarChartState(rx.State):
    total_points: int = 100
    traits: list[dict[str, Any]] = [
        dict(trait="Strength", value=15),
        dict(trait="Dexterity", value=15),
        dict(trait="Constitution", value=15),
        dict(trait="Intelligence", value=15),
        dict(trait="Wisdom", value=15),
        dict(trait="Charisma", value=15),
    ]

    @rx.var
    def remaining_points(self) -> int:
        return self.total_points - sum(
            t["value"] for t in self.traits
        )

    @rx.cached_var
    def trait_names(self) -> list[str]:
        return [t["trait"] for t in self.traits]

    def set_trait(self, trait: str, value: int):
        for t in self.traits:
            if t["trait"] == trait:
                available_points = (
                    self.remaining_points + t["value"]
                )
                value = min(value, available_points)
                t["value"] = value
                break


def radar_dynamic():
    return rx.hstack(
        rx.recharts.radar_chart(
            rx.recharts.radar(
                data_key="value",
                stroke="#8884d8",
                fill="#8884d8",
            ),
            rx.recharts.polar_grid(),
            rx.recharts.polar_angle_axis(data_key="trait"),
            data=RadarChartState.traits,
        ),
        rx.vstack(
            rx.foreach(
                RadarChartState.trait_names,
                lambda trait_name, i: rx.hstack(
                    rx.text(trait_name, width="7em"),
                    rx.chakra.slider(
                        value=RadarChartState.traits[i][
                            "value"
                        ].to(int),
                        on_change=lambda value: RadarChartState.set_trait(
                            trait_name, value
                        ),
                        width="25vw",
                    ),
                    rx.text(
                        RadarChartState.traits[i]["value"]
                    ),
                ),
            ),
            rx.text(
                "Remaining points: ",
                RadarChartState.remaining_points,
            ),
        ),
        width="100%",
        height="15em",
    )

A Radar chart component in Recharts.

PropTypeDescriptionValues
dataList

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

marginDict

The sizes of whitespace around the chart.

cxUnion

The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage

cyUnion

The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage

start_angleint

The angle of first radial direction line.

end_angleint

The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.

inner_radiusUnion

The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage

outer_radiusUnion

The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • PolarAngleAxis
  • PolarRadiusAxis
  • PolarGrid
  • Legend
  • GraphingTooltip
  • Radar

A Radar chart component in Recharts.

PropTypeDescriptionValues
data_keyUnion

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

pointsList

The coordinates of all the vertexes of the radar shape, like [{ x, y }].

dotbool

If false set, dots will not be drawn

strokestr

Stoke color

fillstr

Fill color

fill_opacityfloat

opacity

legend_typestr

The type of icon in legend. If set to 'none', no legend item will be rendered.

labelbool

If false set, labels will not be drawn

animation_beginint

Specifies when the animation should begin, the unit of this option is ms.

animation_durationint

Specifies the duration of animation, the unit of this option is ms.

animation_easingLiteral

The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

Valid Children

  • LabelList

Did you find this useful?

HomeGalleryChangelogIntroductionHosting