Getting Started
Resources
Charts
Components
Radar Charts are ideal for showing changes over time or the magnitude of multiple datasets stacked together. They combine the smoothness of line charts with the visual impact of filled areas.
Below are examples demonstrating how these components and charts can be used.
A minimal example showing multivariate data in a radial layout with filled areas.
Radar Chart
Player performance across categories
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 8},
{"category": "Fighting", "score": 7},
{"category": "Aggressiveness", "score": 6},
{"category": "Map Awareness", "score": 5},
{"category": "Objective Control", "score": 9},
{"category": "Positioning", "score": 7},
]
def radar_v1():
return card.root(
card.header(
card.title("Radar Chart"),
card.description("Player performance across categories"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(class_name="opacity-30"),
rx.recharts.polar_angle_axis(
data_key="category",
custom_attrs={"fontSize": "12px"},
),
rx.recharts.radar(
data_key="score",
stroke="var(--chart-1)",
fill="var(--chart-1)",
fill_opacity=0.6,
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)Displays data points with visible markers along the radar lines for clarity.
Radar Chart - Dots
Detailed performance metrics
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 8},
{"category": "Fighting", "score": 7},
{"category": "Aggressiveness", "score": 6},
{"category": "Map Awareness", "score": 5},
{"category": "Objective Control", "score": 9},
{"category": "Positioning", "score": 7},
]
def radar_v2():
return card.root(
card.header(
card.title("Radar Chart - Dots"),
card.description("Detailed performance metrics"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(class_name="opacity-30"),
rx.recharts.polar_angle_axis(
data_key="category",
custom_attrs={"fontSize": "12px"},
),
rx.recharts.radar(
data_key="score",
dot=True,
stroke="var(--chart-1)",
fill="var(--chart-1)",
fill_opacity=0.6,
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)Visualizes multiple data series layered on top of each other for comparison.
Radar Chart - Stacked
Comparing score against average
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 6, "average": 8},
{"category": "Fighting", "score": 8, "average": 9},
{"category": "Aggressiveness", "score": 5, "average": 8},
{"category": "Map Awareness", "score": 9, "average": 9},
{"category": "Objective Control", "score": 7, "average": 8},
{"category": "Positioning", "score": 6, "average": 9},
]
def radar_v3():
return card.root(
card.header(
card.title("Radar Chart - Stacked"),
card.description("Comparing score against average"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(class_name="opacity-30"),
rx.recharts.polar_angle_axis(
data_key="category",
custom_attrs={"fontSize": "12px"},
),
rx.recharts.radar(
data_key="average",
stroke="var(--chart-2)",
fill="var(--chart-2)",
fill_opacity=0.4,
is_animation_active=False,
),
rx.recharts.radar(
data_key="score",
stroke="var(--chart-1)",
fill="var(--chart-1)",
fill_opacity=0.7,
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)Shows only the outline strokes without filled areas for a cleaner look.
Radar Chart - Lines Only
Linear comparison between score and average
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 8, "average": 8},
{"category": "Fighting", "score": 7, "average": 9},
{"category": "Aggressiveness", "score": 6, "average": 8},
{"category": "Map Awareness", "score": 5, "average": 9},
{"category": "Objective Control", "score": 9, "average": 8},
{"category": "Positioning", "score": 7, "average": 9},
]
def radar_v4():
return card.root(
card.header(
card.title("Radar Chart - Lines Only"),
card.description("Linear comparison between score and average"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(class_name="opacity-30"),
rx.recharts.polar_angle_axis(
data_key="category",
custom_attrs={"fontSize": "12px"},
),
rx.recharts.radar(
data_key="average",
stroke="var(--chart-2)",
fill="none",
stroke_width=2,
is_animation_active=False,
),
rx.recharts.radar(
data_key="score",
stroke="var(--chart-1)",
fill="none",
stroke_width=2,
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)Uses circular grid lines instead of polygon shapes for the background.
Radar Chart - Circle Grid
Performance visual with circular boundaries
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 8},
{"category": "Fighting", "score": 7},
{"category": "Aggressiveness", "score": 6},
{"category": "Map Awareness", "score": 5},
{"category": "Objective Control", "score": 9},
{"category": "Positioning", "score": 7},
]
def radar_v5():
return card.root(
card.header(
card.title("Radar Chart - Circle Grid"),
card.description("Performance visual with circular boundaries"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(grid_type="circle", class_name="opacity-30"),
rx.recharts.polar_angle_axis(
data_key="category",
custom_attrs={"fontSize": "12px"},
),
rx.recharts.radar(
data_key="score",
dot=True,
stroke="var(--chart-1)",
fill="var(--chart-1)",
fill_opacity=0.6,
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)Renders the grid with filled background sections for enhanced visual contrast.
Radar Chart - Filled Grid
Player performance across categories
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.ui.card import card
stats_data = [
{"category": "Farming", "score": 7},
{"category": "Fighting", "score": 6},
{"category": "Aggressiveness", "score": 7},
{"category": "Map Awareness", "score": 6},
{"category": "Objective Control", "score": 6},
{"category": "Positioning", "score": 7},
]
def radar_v6():
return card.root(
card.header(
card.title("Radar Chart - Filled Grid"),
card.description("Player performance across categories"),
),
card.content(
rx.recharts.radar_chart(
rx.recharts.polar_grid(
grid_type="circle",
class_name="opacity-20 fill-primary stroke-input",
),
rx.recharts.polar_angle_axis(
data_key="category",
axis_line_type="circle",
class_name="!text-xs stroke-input",
),
rx.recharts.radar(
data_key="score",
dot=False,
fill="white",
stroke="none",
is_animation_active=False,
),
data=stats_data,
width="100%",
height=250,
),
),
card.footer(
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
)
),
class_name="w-full p-0",
)External Tools
︲
Agent Resources
llms.txt