React Radar Chart

Compare multiple dimensions at a glance with a React radar chart. SVG rendering, Tailwind CSS on every polygon and axis, multi-series overlay, and accessible by default.

$npm install @chartts/react
example.tsx
import { RadarChart } from "@chartts/react"

export function SkillRadar() {
  const data = [
    { skill: "React", level: 95 },
    { skill: "TypeScript", level: 88 },
    { skill: "CSS", level: 82 },
    { skill: "Node.js", level: 75 },
    { skill: "SQL", level: 68 },
    { skill: "DevOps", level: 55 },
  ]

  return (
    <RadarChart
      data={data}
      label="skill"
      value="level"
      className="h-72"
      fillClassName="fill-cyan-400/20"
    />
  )
}

Features

Multi-dimensional data comparison
Multi-series overlay for A/B comparisons
SVG rendering with polygon fills
Tailwind className on polygons, axes, labels
Customizable grid levels
WCAG AA accessible
Under 3kb tree-shaken
Read the DocsSee DemosExamples