Radar Chart
Beautiful radar charts with filled and lines variants, gradient colors, and glow effects
Installation
Usage
import { EvilRadarChart } 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}
dataKey="skill"
chartConfig={chartConfig}
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilRadarChart
data={data}
dataKey="skill"
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
/>Loading State
The radar chart supports loading state with animated data. You can pass the isLoading prop to show a loading animation while your data is being fetched.
Examples
Below are some examples of the radar chart with different configurations.
Lines Variant
Set variant="lines" to show only the outline without fill. This is useful for comparing multiple datasets more clearly.
Circle Grid
Set gridType="circle" to use circular grid lines instead of the default polygon grid.
Gradient Colors
Glowing Radars
Add a subtle glow effect to specific radars using glowingRadars prop. Pass an array of data keys to specify which radars should glow.
API Reference
Data used to display the chart. An array of objects where each object represents a data point on the radar.
type: TData[] where TData extends Record<string, unknown>
The key from your data objects to use for the polar angle axis labels (e.g., categories, skills, months).
type: keyof TData & string
Configuration object that defines the chart's radar series. Each key should match a data key in your data array (the numeric values), with corresponding colors.
type: Record<string, ChartConfig[string]>
Additional CSS classes to apply to the chart container.
type: string
The visual style variant for the radar. "filled" shows filled areas, "lines" shows only the outline.
type: "filled" | "lines"
default: "filled"
The opacity of the filled area when using variant="filled".
type: number
default: 0.3
Whether to hide the polar angle axis (the labels around the perimeter).
type: boolean
default: false
Whether to hide the polar radius axis (the scale values from center outward).
type: boolean
default: true
Whether to hide the polar grid lines.
type: boolean
default: false
Background pattern variant to display behind the chart.
type: BackgroundVariant
The shape of the grid lines. "polygon" creates angular grid lines, "circle" creates circular grid lines.
type: "polygon" | "circle"
default: "polygon"
Whether to hide the tooltip on hover.
type: boolean
default: false
Controls the border-radius of the tooltip.
type: "sm" | "md" | "lg" | "xl"
default: "lg"
Controls the visual style of the tooltip.
type: "default" | "frosted-glass"
default: "default"
When set, the tooltip will be visible by default at the specified data point index.
type: number
The visual style variant for the legend indicators.
type: "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
Whether to hide the chart legend.
type: boolean
default: false
Whether to hide the dots at each data point on the radar.
type: boolean
default: false
The visual style for dots at data points on the radar.
type: "default" | "border" | "colored-border"
The visual style for the active/hovered dot at data points.
type: "default" | "border" | "colored-border"
Enables interactive clicking on radar areas to select/deselect them. When a radar is selected, unselected radars become semi-transparent.
type: boolean
default: false
Callback function that is called when a radar is selected or deselected. Receives the selected data key as a parameter, or null when deselected.
Note: This prop is only available when isClickable is set to true.
type: (selectedDataKey: string | null) => void
Shows a loading animation with animated data when data is being fetched.
type: boolean
default: false
Array of data keys that should have a glowing effect applied. Creates a smooth outer glow around the specified radar areas.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
Array of data keys that should have a neon effect applied. Creates a multi-layered glow with a bright white core for the specified radar areas. Neon effect takes priority over glow effect.
type: NumericDataKeys<TData>[] (array of keys where the value is a number)
default: []
Additional props to pass to the underlying Recharts RadarChart component.
type: ComponentProps<typeof RadarChart>
Read the Recharts RadarChart documentation for available props.
Additional props to pass to the underlying Recharts Radar component.
type: Omit<ComponentProps<typeof Radar>, "dataKey">
Read the Recharts Radar documentation for available props.
Additional props to pass to the underlying Recharts PolarGrid component.
type: ComponentProps<typeof PolarGrid>
Read the Recharts PolarGrid documentation for available props.