Radar Chart
Used to display data as segments of a circular chart
AI TipWant to skip the docs? Use the MCP Server
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
PolarAngleAxis,
PolarGrid,
PolarRadiusAxis,
Radar,
RadarChart,
} from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 110, month: "January" },
{ windows: 130, month: "February" },
{ windows: 110, month: "March" },
{ windows: 90, month: "May" },
{ windows: 75, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<PolarAngleAxis dataKey={chart.key("month")} />
<PolarRadiusAxis />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Usage
import { Chart, useChart } from "@chakra-ui/charts"
import { Radar, RadarChart } from "recharts"<Chart.Root>
<RadarChart>
<Radar />
</RadarChart>
</Chart.Root>Examples
Lines Only
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Legend, PolarGrid, Radar, RadarChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 30, mac: 100, month: "January" },
{ windows: 120, mac: 20, month: "February" },
{ windows: 45, mac: 130, month: "March" },
{ windows: 140, mac: 40, month: "May" },
{ windows: 60, mac: 50, month: "June" },
{ windows: 20, mac: 160, month: "July" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "orange.solid" },
],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<Legend content={<Chart.Legend />} />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
strokeWidth={2}
stroke={chart.color(item.color)}
fill="none"
/>
))}
</RadarChart>
</Chart.Root>
)
}
Multiple
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Legend, PolarGrid, Radar, RadarChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 30, mac: 100, month: "January" },
{ windows: 120, mac: 20, month: "February" },
{ windows: 45, mac: 130, month: "March" },
{ windows: 140, mac: 40, month: "May" },
{ windows: 60, mac: 50, month: "June" },
{ windows: 20, mac: 160, month: "July" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "orange.solid" },
],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<Legend content={<Chart.Legend />} />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
strokeWidth={2}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Point Labels
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 110, month: "January" },
{ windows: 130, month: "February" },
{ windows: 110, month: "March" },
{ windows: 90, month: "May" },
{ windows: 75, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<PolarAngleAxis dataKey={chart.key("month")} tickLine={false} />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
label={{ fill: chart.color("fg") }}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Filled Grid
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 110, month: "January" },
{ windows: 130, month: "February" },
{ windows: 110, month: "March" },
{ windows: 90, month: "May" },
{ windows: 75, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid
stroke="none"
style={{ fill: chart.color("teal.solid"), fillOpacity: 0.1 }}
/>
<PolarAngleAxis dataKey={chart.key("month")} />
{chart.series.map((item) => (
<Radar
dot={{ fillOpacity: 1 }}
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Circle Grid
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
PolarAngleAxis,
PolarGrid,
PolarRadiusAxis,
Radar,
RadarChart,
} from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 120, month: "January" },
{ windows: 120, month: "February" },
{ windows: 80, month: "March" },
{ windows: 140, month: "May" },
{ windows: 60, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} gridType="circle" />
<PolarAngleAxis dataKey={chart.key("month")} />
<PolarRadiusAxis />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Dots
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 110, month: "January" },
{ windows: 130, month: "February" },
{ windows: 110, month: "March" },
{ windows: 90, month: "May" },
{ windows: 75, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<PolarAngleAxis dataKey={chart.key("month")} />
{chart.series.map((item) => (
<Radar
dot={{ fillOpacity: 1 }}
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}
Tooltip
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ windows: 110, month: "January" },
{ windows: 130, month: "February" },
{ windows: 110, month: "March" },
{ windows: 90, month: "May" },
{ windows: 75, month: "June" },
],
series: [{ name: "windows", color: "teal.solid" }],
})
return (
<Chart.Root maxW="sm" chart={chart} mx="auto">
<RadarChart data={chart.data}>
<PolarGrid stroke={chart.color("border")} />
<PolarAngleAxis dataKey={chart.key("month")} />
<Tooltip content={<Chart.Tooltip />} />
{chart.series.map((item) => (
<Radar
isAnimationActive={false}
key={item.name}
name={item.name}
dataKey={chart.key(item.name)}
stroke={chart.color(item.color)}
fill={chart.color(item.color)}
fillOpacity={0.2}
/>
))}
</RadarChart>
</Chart.Root>
)
}