RADAR CHART

SVG radar (spider) chart with configurable axes, concentric grid polygons, fade-in animation, and four color variants. Values normalized to 0–100.

PREVIEW

SHIP SYSTEMS // STATUS

INSTALLATION

BASH

npx shadcn@latest add @scificn/radar-chart

USAGE

TSX

import { RadarChart, type RadarChartEntry } from '@/ui/radar-chart'

const data: RadarChartEntry[] = [
  { axis: 'SHIELDS', value: 82 },
  { axis: 'WEAPONS', value: 74 },
  { axis: 'ENGINES', value: 91 },
  { axis: 'SENSORS', value: 68 },
]

<RadarChart
  data={data}
  title="SHIP SYSTEMS"
  variant="ACTIVE"
  size={240}
  showGrid
  showLabels
  showValues
/>

AXIS COUNTS

5 AXES

6 AXES

8 AXES

VARIANTS

ACTIVE

WARNING

CRITICAL

DEFAULT

WITH VALUES

SHIP SYSTEMS // SHOW VALUES

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
data	RadarChartEntry[]	—	Array of { axis, value } entries. value is 0–100.
variant	DEFAULT \| ACTIVE \| WARNING \| CRITICAL	ACTIVE	Controls polygon color and glow.
title	string	undefined	Optional header label.
size	number	240	SVG width and height in px.
showGrid	boolean	true	Show concentric polygon grid rings.
showLabels	boolean	true	Show axis labels at vertices.
showValues	boolean	false	Show numeric value near each vertex dot.
className	string	—	Additional classes merged via cn().