Radar Chart
A radar/spider chart component built using Recharts v3. Visualize multi-variable data across 3+ dimensions with customizable colors, gradients, glow effects, and interactive legend.
Installation
$ npx shadcn@latest add @orecus/radar-chartRegistry:
@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card
Component
Skill Assessment
Single series performance profile
Employee Comparison
Alice vs Bob across 6 competencies
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, any>[] | — | Chart data array — each item represents a dimension/axis |
categories* | string[] | — | Data keys to plot as radar series |
index* | string | — | Data key for the angle axis (dimension labels) |
colors | ThemeColor[] | ["primary", "blue", "green"] | Theme colors for each category |
variant | 'default' | 'gradient' | 'gradient' | Stroke style |
glow | boolean | true | Add colored glow/blur effect behind radar areas |
valueFormatter | (value: number) => string | — | Formatter for values (tooltip & radius axis) |
showGrid | boolean | true | Show polar grid lines |
showLegend | boolean | true | Show legend |
showTooltip | boolean | true | Show tooltip on hover |
showRadiusAxis | boolean | false | Show radius axis (value scale) |
showDots | boolean | true | Show dots at data vertices |
dotSize | number | 4 | Dot radius in pixels |
fillOpacity | number | — | Fill opacity for radar areas (default: 0.3 for gradient, 0.15 for default) |
interactiveLegend | boolean | false | Allow clicking legend items to toggle series visibility |
legendIndicator | 'square' | 'circle' | 'line' | 'line' | Legend indicator shape |
legendWrap | boolean | true | Allow legend items to wrap |
tooltipSortByValue | boolean | false | Sort tooltip items by value (descending) |
tooltipShowTotal | boolean | false | Show total in tooltip for multi-series |
tooltipTotalLabel | string | "Total" | Label for the total row in tooltip |
cardProps | CardProps | — | Props passed to the Card wrapper |