||

Radar Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Radar charts with filled and lines variants, gradient colors, and glow effects

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/recharts-radar-chart

Usage

<EvilRadarChart /> is the root of a composible compound component. Every visual part (<EvilRadarChart.PolarGrid />, <EvilRadarChart.PolarAngleAxis />, <EvilRadarChart.Tooltip />, <EvilRadarChart.Legend />, and the <EvilRadarChart.Radar /> series) composes as a child — render only what you need.

import { EvilRadarChart } from "@/components/evilcharts/charts/recharts-radar-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-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}>
  <EvilRadarChart.PolarGrid />
  <EvilRadarChart.PolarAngleAxis dataKey="skill" />
  <EvilRadarChart.Legend />
  <EvilRadarChart.Tooltip />
  <EvilRadarChart.Radar dataKey="desktop" variant="filled">
    <EvilRadarChart.Dot variant="colored-border" />
    <EvilRadarChart.ActiveDot variant="default" />
  </EvilRadarChart.Radar>
  <EvilRadarChart.Radar dataKey="mobile" variant="filled" />
</EvilRadarChart>

Interactive Selection

Set isClickable on a <Radar /> or <Legend /> to toggle selection by clicking. The root's onSelectionChange callback fires on every selection change:

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

Loading State

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

Examples

Radar charts in different configurations.

Lines Variant

variant='lines'

Circle Grid

gridType='circle'

Gradient Colors

gradient colors

Glowing Radars

<Radar isGlowing />

API Reference

A root container plus a set of composible parts, each documented below.

EvilRadarChart

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

PropTypeDefaultDescription
data*TData[]–

The chart data — an array of objects, one per radar data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Defines the radar series. Each key matches a numeric data key and sets its colors and label.

children*ReactNode–

The composed parts of the chart — <PolarGrid />, <PolarAngleAxis />, <PolarRadiusAxis />, <Tooltip />, <Legend />, and one or more <Radar /> series.

classNamestring–

Extra CSS classes for the chart container.

backgroundVariantBackgroundVariant–

Background pattern shown behind the chart.

defaultSelectedDataKeystring | nullnull

The radar series selected on first render.

onSelectionChange(selectedDataKey: string | null) => void–

Fires when a radar is selected or deselected. Receives the data key, or null when deselected.

isLoadingbooleanfalse

Shows an animated loading skeleton while data is being fetched.

loadingPointsnumber6

Number of points rendered in the loading skeleton radar.

chartPropsComponentProps<typeof RadarChart>–

Extra props forwarded to the underlying Recharts RadarChart. See the Recharts RadarChart documentation for available props.

Radar

A single radar series. Each <Radar /> generates its own gradients and glow filter under a unique id, so radars never collide on styles. Compose <Dot /> and <ActiveDot /> inside for point markers.

PropTypeDefaultDescription
dataKey*string–

The series key to render. Must exist on both the data and the config.

variantfilled|lines"filled"

The visual style for this radar. "filled" shows a filled area, "lines" shows only the outline.

fillOpacitynumber0.3

Opacity of the filled area when variant="filled".

isGlowingbooleanfalse

Adds a soft outer glow. Each radar controls its own glow independently.

isClickablebooleanfalse

Lets clicking this radar select or deselect it. Unselected radars dim while one is selected.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> for point markers on this radar.

radarPropsOmit<ComponentProps<typeof Radar>, "dataKey">–

Extra props forwarded to the underlying Recharts Radar. See the Recharts Radar documentation for available props.

Dot / ActiveDot

Configuration slots inside a <Radar />. <Dot /> styles the resting markers; <ActiveDot /> styles the active marker. Neither renders anything on its own.

PropTypeDefaultDescription
variantdefault|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.

PropTypeDefaultDescription
gridTypepolygon|circle"polygon"

Shape of the grid lines. "polygon" for angular, "circle" for circular.

...propsComponentProps<typeof PolarGrid>–

Forwarded to the underlying Recharts PolarGrid. See the Recharts PolarGrid documentation for available props.

PolarAngleAxis

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

PropTypeDefaultDescription
dataKeystring–

The data key for the angle axis labels (e.g. categories, skills, months).

...propsComponentProps<typeof PolarAngleAxis>–

Forwarded to the underlying Recharts PolarAngleAxis. See the Recharts PolarAngleAxis documentation for available props.

PolarRadiusAxis

The radial value axis — the scale from center outward. Hidden while loading.

PropTypeDefaultDescription
...propsComponentProps<typeof PolarRadiusAxis>–

Forwarded to the underlying Recharts PolarRadiusAxis. See the Recharts PolarRadiusAxis documentation for available props.

Tooltip

The hover tooltip. Dims unselected series based on the chart's selection. Hidden while loading.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Visual style of the tooltip.

roundnesssm|md|lg|xl"lg"

Border-radius of the tooltip.

defaultIndexnumber–

Shows the tooltip by default at this data point index.

Legend

The series legend. With isClickable, each entry toggles selection of its series. Hidden while loading.

PropTypeDefaultDescription
variant"square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | …–

Visual style of the legend indicators.

alignleft|center|right"center"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"bottom"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each entry toggle its series' selection, driving the shared state read by every <Radar />.

Did you like the content?