Radar

Radar renders multivariate series as overlaid SVG polygons on a concentric polygon grid — no chart library underneath. Series colors come from useChartPalette and follow brand, surface and dark-mode changes. Hovering a polygon or its legend entry dims the others; legend entries are clickable to hide or restore a series.

Part of the chart family: it shares the chart-kit math layer with Chart, Donut and Sparkline — reach for Chart when you need axes, tooltips or large time series. Each member installs independently.

Installation

Usage

Basic Usage

"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" />;
}

axes holds one category per spoke; each series' values maps one-to-one onto axes. max fixes the value scale — omit it to use the largest visible value across series. levels controls how many grid rings are drawn.

API Reference

Radar

Behavior Notes

• Hover focus: hovering a polygon or its legend entry lifts that series' fill opacity and dims every other series to 35%.
• Legend toggle: clicking a legend entry hides or restores a series; hidden series are excluded from the auto max.
• Theme sync: stroke and grid colors follow data-brand, data-surface and dark mode — the grid uses the border token, axis labels the muted-foreground token.
• Sizing: the chart fills the container up to max-w-72; labels may extend past the viewBox edge — the SVG allows visible overflow.