Radar Chart

Beautiful radar charts with filled and lines variants, gradient colors, and glow effects

Basic Chart

Installation

npx shadcn@latest add @evilcharts/radar-chart

The radar chart is a composible compound component. <EvilRadarChart /> is the root container — every visual part (<PolarGrid />, <PolarAngleAxis />, <Tooltip />, <Legend />, and the <Radar /> series) is composed as a child, so you render exactly what you need.

import {
  EvilRadarChart,
  Radar,
  PolarGrid,
  PolarAngleAxis,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/evilcharts/charts/radar-chart";

const data = [
  { skill: "JavaScript", desktop: 186, mobile: 80 },
  { skill: "TypeScript", desktop: 305, mobile: 200 },
  { skill: "React", desktop: 237, mobile: 120 },
  { skill: "Node.js", desktop: 173, mobile: 190 },
  { skill: "CSS", desktop: 209, mobile: 130 },
];
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
  },
  mobile: {
    label: "Mobile",
    colors: { light: ["#10b981"], dark: ["#34d399"] },
  },
} satisfies ChartConfig;
 
<EvilRadarChart data={data} config={chartConfig}>
  <PolarGrid />
  <PolarAngleAxis dataKey="skill" />
  <Legend />
  <Tooltip />
  <Radar dataKey="desktop" variant="filled">
    <Dot variant="colored-border" />
    <ActiveDot variant="default" />
  </Radar>
  <Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>

Interactive Selection

Set isClickable on a <Radar /> to let it be selected by clicking, and on <Legend /> to let legend entries toggle selection. Use the root's onSelectionChange callback to react to selection events:

<EvilRadarChart
  data={data}
  config={chartConfig}
  onSelectionChange={(selectedDataKey) => {
    if (selectedDataKey) {
      console.log("Selected:", selectedDataKey);
    } else {
      console.log("Deselected");
    }
  }}
>
  <PolarGrid />
  <PolarAngleAxis dataKey="skill" />
  <Legend isClickable />
  <Tooltip />
  <Radar dataKey="desktop" variant="filled" isClickable />
  <Radar dataKey="mobile" variant="filled" isClickable />
</EvilRadarChart>

Loading State

isLoading='true'

Note

The radar chart supports loading state with animated data. You can pass the isLoading prop to the root to show a loading animation while your data is being fetched.

<EvilRadarChart data={[]} config={chartConfig} isLoading>
  <PolarGrid />
  <PolarAngleAxis dataKey="skill" />
  <Legend />
  <Tooltip />
  <Radar dataKey="desktop" variant="filled" />
  <Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>

Examples

Below are some examples of the radar chart with different configurations.

Lines Variant

variant='lines'

Note

Set variant="lines" to show only the outline without fill. This is useful for comparing multiple datasets more clearly.

Circle Grid

gridType='circle'

Note

Set gridType="circle" to use circular grid lines instead of the default polygon grid.

Gradient Colors

gradient colors

Glowing Radars

Note

Add a subtle glow effect to a radar by setting isGlowing on its <Radar />. Each radar controls its own glow independently.

API Reference

The radar chart is composed of a root container and a set of composible parts. Each part is documented in its own section below.

EvilRadarChart

The root container. Owns the data, the shared context, and the loading skeleton. All other parts must be rendered as its children.

Prop	Type	Default	Description
data*	TData[]	–	Data used to display the chart. An array of objects where each object represents a data point on the radar (`TData extends Record<string, unknown>`).
config*	Record<string, ChartConfig[string]>	–	Configuration object that defines the chart's radar series. Each key should match a numeric data key in your data array, with corresponding colors and labels.
children*	ReactNode	–	The composed parts of the chart — `<PolarGrid />`, `<PolarAngleAxis />`, `<PolarRadiusAxis />`, `<Tooltip />`, `<Legend />`, and one or more `<Radar />` series.
className	string	–	Additional CSS classes to apply to the chart container.
backgroundVariant	BackgroundVariant	–	Background pattern variant to display behind the chart.
defaultSelectedDataKey	string \| null	null	The radar series selected on first render.
onSelectionChange	(selectedDataKey: string \| null) => void	–	Callback fired when a radar is selected or deselected. Receives the selected data key, or `null` when deselected.
isLoading	boolean	false	Shows a loading animation with animated data when data is being fetched.
loadingPoints	number	6	Number of points rendered in the loading skeleton radar.
chartProps	ComponentProps<typeof RadarChart>	–	Additional props to pass to the underlying Recharts RadarChart component. Read the Recharts RadarChart documentation for available props.

Radar

A single radar series. Each <Radar /> is self-contained — it generates its own gradients and glow filter under a unique id, so multiple radars never collide on styles. Compose <Dot /> and <ActiveDot /> inside it to add point markers.

Prop	Type	Default	Description
dataKey*	string	–	The series key to render. Must exist on both the data and the config.
variant	filled\|lines	"filled"	The visual style for this radar. `"filled"` shows a filled area, `"lines"` shows only the outline.
fillOpacity	number	0.3	The opacity of the filled area when using `variant="filled"`.
isGlowing	boolean	false	Adds a soft outer glow around this radar. Each radar controls its own glow independently.
isClickable	boolean	false	Enables interactive clicking on this radar to select/deselect it. When a radar is selected, unselected radars become semi-transparent.
children	ReactNode	–	Optional `<Dot />` and `<ActiveDot />` composition for point markers on this radar.
radarProps	Omit<ComponentProps<typeof Radar>, "dataKey">	–	Additional props to pass to the underlying Recharts Radar component. Read the Recharts Radar documentation for available props.

Dot / ActiveDot

Configuration slots composed inside a <Radar />. <Dot /> styles the resting point markers; <ActiveDot /> styles the hovered/active marker. They render nothing on their own.

Prop	Type	Default	Description
variant	default\|border\|colored-border	–	The visual style for the point marker.

PolarGrid

The polar grid lines. Defaults to a dashed polygon grid and forwards every Recharts PolarGrid prop.

Prop	Type	Default	Description
gridType	polygon\|circle	"polygon"	The shape of the grid lines. `"polygon"` creates angular grid lines, `"circle"` creates circular grid lines.
...props	ComponentProps<typeof PolarGrid>	–	All other props are forwarded to the underlying Recharts PolarGrid component. Read the Recharts PolarGrid documentation for available props.

PolarAngleAxis

The angular category axis — the labels around the chart's perimeter. Hidden automatically while the chart is loading.

Prop	Type	Default	Description
dataKey	string	–	The key from your data objects to use for the angle axis labels (e.g., categories, skills, months).
...props	ComponentProps<typeof PolarAngleAxis>	–	All other props are forwarded to the underlying Recharts PolarAngleAxis component. Read the Recharts PolarAngleAxis documentation for available props.

PolarRadiusAxis

The radial value axis — the scale running from the center outward. Hidden automatically while the chart is loading.

Prop	Type	Default	Description
...props	ComponentProps<typeof PolarRadiusAxis>	–	All props are forwarded to the underlying Recharts PolarRadiusAxis component. Read the Recharts PolarRadiusAxis documentation for available props.

Tooltip

The hover tooltip. Reads the chart's selection so its content dims unselected series. Hidden automatically while the chart is loading.

Prop	Type	Default	Description
variant	default\|frosted-glass	"default"	Controls the visual style of the tooltip.
roundness	sm\|md\|lg\|xl	"lg"	Controls the border-radius of the tooltip.
defaultIndex	number	–	When set, the tooltip will be visible by default at the specified data point index.

Legend

The series legend. When isClickable is set, each entry toggles selection of its series. Hidden automatically while the chart is loading.

Prop	Type	Default	Description
variant	"square" \| "circle" \| "circle-outline" \| "rounded-square" \| "rounded-square-outline" \| …	–	The visual style variant for the legend indicators.
align	left\|center\|right	"center"	Horizontal placement of the legend.
verticalAlign	top\|middle\|bottom	"bottom"	Vertical placement of the legend.
isClickable	boolean	false	Lets each legend entry toggle selection of its series, driving the shared selection state read by every `<Radar />`.

Did you like the content?

Composed ChartSimple static & beautifully designed composed charts combining bars and lines

Pie ChartSimple static & beautifully designed pie charts with donut, gradient, and glow effects

On This Page

Installation Usage Interactive Selection Loading State Examples Lines Variant Circle Grid Gradient Colors Glowing Radars API Reference

Radar Chart

Documentation Index

Installation

Usage

Interactive Selection

Loading State

Examples

Lines Variant

Circle Grid

Gradient Colors

Glowing Radars

API Reference