✨ Reflex is in Hosting Alpha! Learn more here. ✨

Search documentation...

Star

13k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

API Reference

Recipes

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.

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"),
    data=data,
)

data = [
    {
        "subject": "Math",
        "A": 120,
        "B": 110,
        "fullMark": 150,
    },
    {
        "subject": "Chinese",
        "A": 98,
        "B": 130,
        "fullMark": 150,
    },
    {
        "subject": "English",
        "A": 86,
        "B": 130,
        "fullMark": 150,
    },
    {
        "subject": "Geography",
        "A": 99,
        "B": 100,
        "fullMark": 150,
    },
    {
        "subject": "Physics",
        "A": 85,
        "B": 90,
        "fullMark": 150,
    },
    {
        "subject": "History",
        "A": 65,
        "B": 85,
        "fullMark": 150,
    },
]

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

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.legend(),
    data=data,
)

data = [
    {
        "subject": "Math",
        "A": 120,
        "B": 110,
        "fullMark": 150,
    },
    {
        "subject": "Chinese",
        "A": 98,
        "B": 130,
        "fullMark": 150,
    },
    {
        "subject": "English",
        "A": 86,
        "B": 130,
        "fullMark": 150,
    },
    {
        "subject": "Geography",
        "A": 99,
        "B": 100,
        "fullMark": 150,
    },
    {
        "subject": "Physics",
        "A": 85,
        "B": 90,
        "fullMark": 150,
    },
    {
        "subject": "History",
        "A": 65,
        "B": 85,
        "fullMark": 150,
    },
]

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.

Strength

Dexterity

Constitution

Intelligence

Wisdom

Charisma

Remaining points: 10

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

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

RadarChart

A Radar chart component in Recharts.

Props

Prop	Type	Description
`cx`	Union	The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number \| Percentage
`cy`	Union	The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number \| Percentage
`start_angle`	int	The angle of first radial direction line.
`end_angle`	int	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_radius`	Union	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_radius`	Union	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
`data`	List	The source data, in which each element is an object.
`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`	Literal	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
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	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'

Base Event Triggers

← Pie Scatter →

[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

RadarChart

Dynamic Data

RadarChart

Props

Base Event Triggers

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

RadarChart

Dynamic Data

RadarChart

Props

Base Event Triggers

[ Learn ]