DocumentationRadarChart
RadarChart
A responsive radar chart component built on Recharts for visualizing multivariate data and comparing multiple variables across different categories.
Install Dependencies
npx quickcode-ui add RadarChartpnpm dlx quickcode-ui add RadarChartyarn dlx quickcode-ui add RadarChartbunx quickcode-ui add RadarChartExamples
Basic
Basic Radar Chart
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function BasicRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
With Dots
Radar Chart with Dots
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function DotsRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} dot={{ fill: "var(--color-sales)", r: 4 }} /> </RadarChart> </ChartContainer> ) }
Lines Only
Radar Chart - Lines Only
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function LinesOnlyRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="transparent" stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Custom Label
Radar Chart - Custom Label
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "desktop": 186, "mobile": 80 }, { "month": "February", "desktop": 305, "mobile": 200 }, { "month": "March", "desktop": 237, "mobile": 120 }, { "month": "April", "desktop": 273, "mobile": 190 }, { "month": "May", "desktop": 209, "mobile": 130 }, { "month": "June", "desktop": 214, "mobile": 140 } ] const config: ChartConfig = { desktop: { label: "Desktop", color: "var(--chart-1)", }, mobile: { label: "Mobile", color: "var(--chart-2)", }, } export function CustomLabelRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" tick={{ fill: "var(--foreground)", fontSize: 12 }} /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Grid Custom
Radar Chart - Grid Custom
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridCustomRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" strokeDasharray="3 3" gridType="polygon" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Grid Radius
Radar Chart - Grid Radius
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, PolarRadiusAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridRadiusRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <PolarRadiusAxis stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Grid Circle
Radar Chart - Grid Circle
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridCircleRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" gridType="circle" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Grid Circle No Basis
Radar Chart - Grid Circle No Basis
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridCircleNoBasisRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" gridType="circle" polarRadius={[20, 40, 60, 80]} /> <PolarAngleAxis dataKey="month" stroke="transparent" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.6} stroke="var(--color-sales)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Grid Circle Filled
Radar Chart - Grid Circle Filled
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridCircleFilledRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data} outerRadius="80%"> <PolarGrid stroke="var(--border)" gridType="circle" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.8} stroke="var(--color-sales)" strokeWidth={0} /> </RadarChart> </ChartContainer> ) }
Grid Filled
Radar Chart - Grid Filled
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "sales": 186 }, { "month": "February", "sales": 305 }, { "month": "March", "sales": 237 }, { "month": "April", "sales": 273 }, { "month": "May", "sales": 209 }, { "month": "June", "sales": 214 } ] const config: ChartConfig = { sales: { label: "Sales", color: "var(--chart-1)", }, } export function GridFilledRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data} outerRadius="80%"> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="sales" fill="var(--color-sales)" fillOpacity={0.8} stroke="var(--color-sales)" strokeWidth={0} /> </RadarChart> </ChartContainer> ) }
Multiple
Radar Chart - Multiple
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "desktop": 186, "mobile": 80 }, { "month": "February", "desktop": 305, "mobile": 200 }, { "month": "March", "desktop": 237, "mobile": 120 }, { "month": "April", "desktop": 273, "mobile": 190 }, { "month": "May", "desktop": 209, "mobile": 130 }, { "month": "June", "desktop": 214, "mobile": 140 } ] const config: ChartConfig = { desktop: { label: "Desktop", color: "var(--chart-1)", }, mobile: { label: "Mobile", color: "var(--chart-2)", }, } export function MultipleRadarChart() { return ( <ChartContainer config={config} className="h-[400px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} stroke="var(--color-desktop)" strokeWidth={2} /> <Radar dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.4} stroke="var(--color-mobile)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
With Legend
Radar Chart - Legend
import { RadarChart, Radar, ChartContainer, ChartTooltip, ChartTooltipContent, PolarGrid, PolarAngleAxis, ChartLegend, ChartLegendContent, type ChartConfig } from '@/components/ui/RadarChart' const data = [ { "month": "January", "desktop": 186, "mobile": 80 }, { "month": "February", "desktop": 305, "mobile": 200 }, { "month": "March", "desktop": 237, "mobile": 120 }, { "month": "April", "desktop": 273, "mobile": 190 }, { "month": "May", "desktop": 209, "mobile": 130 }, { "month": "June", "desktop": 214, "mobile": 140 } ] const config: ChartConfig = { desktop: { label: "Desktop", color: "var(--chart-1)", }, mobile: { label: "Mobile", color: "var(--chart-2)", }, } export function LegendRadarChart() { return ( <ChartContainer config={config} className="h-[450px]"> <RadarChart data={data}> <PolarGrid stroke="var(--border)" /> <PolarAngleAxis dataKey="month" stroke="var(--muted-foreground)" /> <ChartTooltip content={ChartTooltipContent} /> <ChartLegend content={ChartLegendContent} /> <Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} stroke="var(--color-desktop)" strokeWidth={2} /> <Radar dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.4} stroke="var(--color-mobile)" strokeWidth={2} /> </RadarChart> </ChartContainer> ) }
Props
ChartContainer
| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | — | Configuration object defining chart colors and labels |
children | ReactNode | — | Chart components to render |
className | string | — | Additional CSS classes |
RadarChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | any[] | — | Array of data objects to visualize |
outerRadius | string | — | Outer radius of the radar chart |
className | string | — | Additional CSS classes |
Radar
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | — | Key in data object for this radar |
fill | string | — | Fill color for the radar area |
fillOpacity | number | — | Opacity of the fill |
stroke | string | — | Stroke color for the radar line |
strokeWidth | number | — | Width of the stroke line |
dot | object | — | Configuration for dots at data points |
ChartTooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
indicator | 'line' | 'dot' | 'dashed' | 'dot' | Visual indicator style |
hideLabel | boolean | false | Hide the tooltip label |
hideIndicator | boolean | false | Hide the visual indicator |
className | string | — | Additional CSS classes |
PolarGrid
| Prop | Type | Default | Description |
|---|---|---|---|
gridType | 'polygon' | 'circle' | — | Type of grid to display |
stroke | string | — | Color of the grid lines |
strokeDasharray | string | — | Dash pattern for grid lines |
polarRadius | number[] | — | Custom radius values |
PolarAngleAxis
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | — | Key in data for axis labels |
stroke | string | — | Color of the axis lines |
tick | object | — | Configuration for axis labels |
PolarRadiusAxis
| Prop | Type | Default | Description |
|---|---|---|---|
stroke | string | — | Color of the axis lines |
Last updated on