Radar

Zero-dependency SVG radar chart with concentric grid, category axes, theme-synced series colors and legend toggling

Part of the chart family with Chart, Donut and Sparkline — reach for Chart when you need axes or tooltips.

Installation

$npx litefy@latest add radar
$pnpm dlx litefy@latest add radar
$yarn dlx litefy@latest add radar
$bun --bun litefy@latest add radar

Usage

A basic radar chart with multiple series and a clickable legend.

"use client";

import { Radar } from "@/ui";

const axes = ["Design", "Performance", "Pricing", "Support", "Docs"];

const series = [
  { label: "Litefy", values: [85, 92, 78, 88, 95] },
  { label: "Baseline", values: [70, 60, 85, 55, 50] },
];

export default function RadarBasicDemo() {
  return <Radar axes={axes} series={series} ariaLabel="Litefy versus baseline feature comparison" className="max-w-sm" />;
}

API Reference

Prop	Type	Default	Description
`axes`	`string[]`	-	Category labels, one per spoke
`series`	`RadarSeries[]`	-	Series: `{ label, values, color? }`, `values` aligned with `axes`
`max`	`number`	max of visible values	Value scale ceiling; values are clamped to it
`levels`	`number`	`4`	Number of concentric grid rings
`showLegend`	`boolean`	`true`	Renders the clickable legend above the chart
`className`	`ClassNameValue`	-	Extra classes appended to the root element
`classNames`	`RadarClassNames`	-	Slot overrides: `root` / `svg` / `grid` / `label` / `polygon` / `legend`
`styles`	`RadarStyles`	-	Slot inline styles, matching the `classNames` slots

Radar

Installation

Usage

API Reference

Radar

On this page