Radar Chart
Radar plots with filled or outline series, circle grids, and glow.
variant='filled'
@spectrumui/radar-chart
- Desktop
- Mobile
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
variant='lines'
- Desktop
- Mobile
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
gridType='circle'
- Desktop
- Mobile
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
glowing
- Desktop
- Mobile
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Manual installation
Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:
chart-kit.tsxcomponents/spectrumui/charts/chart-kit.tsxradar-chart.tsxcomponents/spectrumui/charts/radar-chart.tsx
Then install its dependencies: npm i recharts framer-motion
Usage
import { RadarChart } from '@/components/spectrumui/charts/radar-chart';
<RadarChart data={data} />