Charts

Radar

A radar/spider chart for comparing multiple metrics across categories on a radial grid.

import { Radar } from "metricui";

Use Radar for multi-dimensional comparison — team skill profiles, product feature scores, competitive analysis. Works best with 5-8 dimensions and 1-3 series. For two-variable correlation, use ScatterPlot; for ranked comparison, use BarChart.

Basic Example

Team Skills Assessment

<Radar
  data={[
    { skill: "Frontend", score: 92 },
    { skill: "Backend", score: 78 },
    { skill: "DevOps", score: 65 },
    { skill: "Design", score: 84 },
    { skill: "Testing", score: 71 },
    { skill: "Documentation", score: 58 },
  ]}
  index="skill"
  categories={["score"]}
  title="Team Skills Assessment"
  height={350}
/>

Multiple Series

Pass multiple categories to overlay several series. A legend is shown automatically for multi-series data.

Team Comparison

<Radar
  data={[
    { skill: "Frontend", alpha: 92, beta: 68, gamma: 75 },
    { skill: "Backend", alpha: 78, beta: 90, gamma: 82 },
    { skill: "DevOps", alpha: 65, beta: 85, gamma: 60 },
    { skill: "Design", alpha: 84, beta: 52, gamma: 70 },
    { skill: "Testing", alpha: 71, beta: 77, gamma: 88 },
    { skill: "Documentation", alpha: 58, beta: 62, gamma: 45 },
  ]}
  index="skill"
  categories={["alpha", "beta", "gamma"]}
  title="Team Comparison"
  height={380}
/>

Custom Fill Opacity

Adjust fillOpacity and borderWidth to control the visual density. Lower opacity works better for overlapping series.

Product Feature Scores

<Radar
  data={productData}
  index="feature"
  categories={["product"]}
  title="Product Feature Scores"
  fillOpacity={0.5}
  borderWidth={3}
  dotSize={8}
  gridLevels={4}
  height={350}
/>

Props

Prop	Type	Default	Description
`data`	`DataRow[]`	—	Flat rows with an index dimension + numeric category columns.
`index`	`string`	—	Column name for the dimension labels (spokes). Auto-inferred if omitted.
`categories`	`Category[]`	—	Metric columns to compare on the radar. Auto-inferred if omitted.
`title`	`string`	—	Chart card title.
`subtitle`	`string`	—	Chart card subtitle.
`description`	`string \| React.ReactNode`	—	Description popover content.
`footnote`	`string`	—	Footnote.
`action`	`React.ReactNode`	—	Action slot.
`format`	`FormatOption`	—	Format for value labels and tooltips.
`height`	`number`	`300`	Chart height in px.
`colors`	`string[]`	—	Series colors.
`animate`	`boolean`	`true`	Enable/disable animation.
`fillOpacity`	`number`	`0.25`	Fill opacity for each series area.
`borderWidth`	`number`	`2`	Border width for each series.
`dotSize`	`number`	`6`	Dot size at each vertex.
`gridLevels`	`number`	`5`	Number of concentric grid levels.
`legend`	`boolean \| LegendConfig`	—	Legend configuration. Default: shown for multi-series.
`crossFilter`	`boolean \| { field?: string }`	—	Enable cross-filtering. true uses index as the field.
`drillDown`	`true \| ((event: { id: string; index: string }) => React.ReactNode)`	—	Drill-down. true = auto table, function = custom content.
`drillDownMode`	`"slide-over" \| "modal"`	`"slide-over"`	Drill-down presentation mode.
`tooltipHint`	`boolean \| string`	—	Tooltip action hint.
`variant`	`CardVariant`	—	Card variant.
`dense`	`boolean`	—	Compact layout.
`className`	`string`	—	Additional CSS class names.
`classNames`	`{ root?: string; header?: string; chart?: string; body?: string; legend?: string }`	—	Sub-element class name overrides.
`id`	`string`	—	HTML id attribute.
`data-testid`	`string`	—	Test id.
`loading`	`boolean`	—	Loading state.
`empty`	`EmptyState`	—	Empty state configuration.
`error`	`ErrorState`	—	Error state configuration.
`stale`	`StaleState`	—	Stale data indicator.

Data Shape

// Flat-row format — same as BarChart/AreaChart unified format
// index = dimension labels (spokes), categories = metric columns
const data = [
  { skill: "JavaScript", "Dev A": 90, "Dev B": 70 },
  { skill: "TypeScript",  "Dev A": 85, "Dev B": 80 },
  { skill: "React",       "Dev A": 95, "Dev B": 60 },
  { skill: "Node.js",     "Dev A": 70, "Dev B": 90 },
  { skill: "CSS",          "Dev A": 60, "Dev B": 85 },
];
// index="skill" categories={["Dev A", "Dev B"]}

Notes

Uses forwardRef.
Uses the unified flat-row data format (same as BarChart, AreaChart). Auto-infers index and categories if omitted.
Each category becomes a filled polygon on the radar. Multiple categories overlay for comparison.
gridLevels controls the number of concentric circles — reduce for cleaner look, increase for precision.
Radar works best with 4-8 dimensions. More than 10 spokes becomes hard to read.
The aiContext prop (inherited from BaseComponentProps) adds business context for AI Insights analysis. See the AI Insights guide for details.