Charts

Radar Chart

Polar comparison. Default and Motion variants.

Examples

Default

Cronus polar comparison across metrics.

tsx

<RadarChart data={rows} series={[{ key: "current", label: "Current" }, { key: "target", label: "Target" }]} />

Motion

Layered radar with grid, axis, and area.

tsx

import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@cronus-ui/ui/charts";

<RadarChart data={rows} metrics={metrics} size={320}>
  <RadarGrid />
  <RadarAxis />
  <RadarLabels />
  <RadarArea index={0} />
</RadarChart>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add radar-chart

tsx

import { RadarChart } from "@cronus-ui/ui";

Usage

tsx

import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@cronus-ui/ui/charts";

<RadarChart data={series} metrics={metrics}>
  <RadarGrid />
  <RadarAxis />
  <RadarLabels />
  {series.map((_, i) => <RadarArea index={i} key={i} />)}
</RadarChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

RadarChart

Polar comparison. `data` is one polygon per series; `metrics` are the axes.

Prop	Type	Default	Description
`data`*	`RadarData[]`	—	label, values map, optional color.
`metrics`*	`RadarMetric[]`	—	Axes: { key, label }.
`levels`	`number`	`5`	Concentric grid circles.
`margin`	`number`	`60`	Padding around the chart.
`hoveredIndex`	`number \| null`	—	Controlled hover.

RadarGrid

Concentric circles and optional level labels.

Prop	Type	Default	Description
`showLabels`	`boolean`	`true`	Level values.
`stroke`	`string`	`var(--border)`	Grid stroke.

RadarAxis

Spokes from center to each metric.

Prop	Type	Default	Description
`stroke`	`string`	`var(--border)`	Spoke color.

RadarLabels

Metric names around the rim.

Prop	Type	Default	Description
`offset`	`number`	`24`	Distance from the edge.
`interactive`	`boolean`	`false`	Hover on labels.

RadarArea

One filled polygon. Hover thickens the stroke and glows.

Prop	Type	Default	Description
`index`*	`number`	—	Index in data.
`color`	`string`	—	Override color.
`showPoints`	`boolean`	`true`	Vertex dots.
`showGlow`	`boolean`	`true`	Glow on hover.

Controlled hover

hoveredIndex / onHoverChange dim the other polygons. Pair with a Legend using the same index.

Data format

Values are typically 0–100.

type RadarMetric = { key: string; label: string };
type RadarData = { label: string; color?: string; values: Record<string, number> };

const metrics: RadarMetric[] = [
  { key: "speed", label: "Speed" },
  { key: "reliability", label: "Reliability" },
];
const series: RadarData[] = [
  { label: "Current", values: { speed: 86, reliability: 72 } },
  { label: "Target", values: { speed: 95, reliability: 90 } },
];

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. defaultRadarColors cycles `--chart-1`…`--chart-5`. Grid/axis use `--border`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/shape @visx/responsive @visx/scale motion

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

RadarChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`Record<string, unknown>[]`	—	—
`angleKey`	`string`	`"metric"`	—
`series`*	`ChartSeries[]`	—	—