Radar Chart

Radar plots with filled or outline series, circle grids, and glow.

variant='filled'

@spectrumui/radar-chart
  • Desktop
  • Mobile

variant='lines'

  • Desktop
  • Mobile

gridType='circle'

  • Desktop
  • Mobile

glowing

  • Desktop
  • Mobile

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.tsx
  • radar-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} />
Work with me