shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartRadarMinimal } from "@/components/charts/chart-radar-minimal";<ChartRadarMinimal />API Reference
RadarChart
dataRadarData[]
The series to draw, one polygon each. Every item holds a values record keyed by metric key; the series index is what RadarArea refers to with index.
metricsRadarMetric[]
The metrics, one spoke each, in clockwise order from 12 o'clock. A metric's key selects its value in every series' values, and its label is what RadarLabels prints.
size?number
Chart width and height in pixels. Omit to fill the width of the parent element; the chart stays square.
levels?number
Number of concentric grid rings drawn by RadarGrid. Ring n marks n / levels of the 0 to 100 value scale.
- Default
5
margin?number
Space in pixels kept free around the chart for the metric labels.
- Default
60
animate?boolean
Play the entrance animation. Set false to draw the chart immediately.
- Default
true
enterDurationMs?number
Total time budget of the entrance animation in milliseconds. Grid, labels and series timings scale with it.
- Default
1100
staggerScale?number
Multiplier for the delays between grid rings, labels and series during the entrance. 0 starts everything together.
- Default
1
enterTransition?RadarEnterTransition
Transition for the series entrance, in the shape used by the motion library (type: "spring" with spring values, or a tween with duration in seconds and ease). Defaults to a 1.1 second tween on the shared reveal curve.
motionReplayKey?string
Changing this string replays the entrance animation.
- Default
""
hoveredIndex?number | null
Index of the hovered series, for controlled hover. Pass null for no hover; leave it undefined to let the chart manage hover itself.
- Type
number | null
onHoverChange?(index: number | null) => void
Called with the index of the hovered or keyboard-focused series, or null when hover ends.
- Type
(index: number | null) => void
className?string
Extra class name for the chart container.
style?CSSProperties
Inline styles for the chart container, merged over the default sizing.
childrenReactNode
The parts to draw: RadarGrid, RadarAxis, RadarLabels and one RadarArea per series. Only the parts you include are drawn.
ariaLabel?string
Accessible name of the chart.
- Default
"Radar chart"
ariaDescription?string
Longer accessible description of the chart.
RadarLabels
offset?number
Distance in pixels between the outer grid ring and the labels.
- Default
24
fontSize?number
Font size of the labels in pixels.
- Default
11
interactive?boolean
Dim the labels at rest and brighten them while a series is hovered.
- Default
false
className?string
Extra class name for the labels.
RadarArea
indexnumber
Index of the series this element draws, matching its position in the data array of the chart. Entries with an index outside the array are ignored.
color?string
Colour of the series. Takes precedence over the data item's color, which in turn takes precedence over the --chart-1 to --chart-5 palette (by index).
showPoints?boolean
Draw a dot at each metric value.
- Default
true
showStroke?boolean
Draw an outline around the polygon.
- Default
true
showGlow?boolean
Draw a glow behind the polygon while the series is hovered.
- Default
true
className?string
Extra class name for the polygon.