Components

Radar Chart

Compare the profile of a few series across several dimensions. Inspect each value and its range, with a polygon or circular reference grid.

Install

npx mario-charts@latest add radar-chart

Playground

Compare grid styles, scales, loading, and interaction.

Settings

The same chart through every state.

DataStateGridScaleGrid levels · 5Fill opacity · 25%

Show dotsAxis labelsLegend

Animate

Team skills

Illustrative assessment · 0 to 100 on each axis

Waiting for chart space

Hover or tap a point. Left/Right changes axis; Up/Down changes team. Enter selects.

Usage

tsx

import { RadarChart, type RadarAxis } from "@/components/charts/radar-chart";

type Scores = { frontend: number; backend: number; database: number; devops: number; design: number };
const axes = [
  { key: "frontend", label: "Frontend", min: 0, max: 100 },
  { key: "backend", label: "Backend", min: 0, max: 100 },
  { key: "database", label: "Database", min: 0, max: 100 },
  { key: "devops", label: "DevOps", min: 0, max: 100 },
  { key: "design", label: "Design", min: 0, max: 100 },
] satisfies readonly RadarAxis<Scores>[];

const series = [
  { id: "atlas", name: "Team Atlas", data: { frontend: 85, backend: 70, database: 90, devops: 60, design: 75 } },
  { id: "nova", name: "Team Nova", data: { frontend: 65, backend: 90, database: 65, devops: 85, design: 50 } },
];

export function TeamSkills() {
  return <RadarChart axes={axes} series={series} height={400} ariaLabel="Team skills comparison" />;
}

Reading the chart

Use the same explicit range when dimensions share a scale, such as these 0–100 scores. With automatic ranges, the same distance from the center can represent different values on different axes. Hover or focus a point to see its range.

Negative values are supported when the axis range includes them. The center represents that axis’s minimum, which may be below zero. All-zero observations stay at the center of a 0–100 scale and remain keyboard accessible.

Keep the number and order of dimensions consistent. Polygon area depends on the chosen ranges and axis order; use the individual observations for exact comparisons. Missing observations and values outside explicit bounds produce an error instead of a misleading shape.

API Reference

Prop	Type	Default	Description
`series`Required	readonly RadarSeries<T>[]	—	Series with unique id, name, data, and optional color. Every axis needs a finite observation, including an explicit zero when measured.
`axes`Required	readonly RadarAxis<T>[]	—	At least three unique keys from T, with label and optional min/max. Order determines the polygon; keep it consistent between comparisons.
`gridType`	'polygon' \| 'circular'	'polygon'	Shape of the reference grid. The data remains a polygon connecting measured vertices.
`gridLevels`	number	5	Concentric grid levels, as an integer from 1 to 20. Each level is the same fraction of each axis range.
`height`	number	400	Total frame height including the legend, in loading, empty, error, and ready states.
`colors`	readonly string[]	DEFAULT_COLORS	Colors follow series order. A series color overrides the palette.
`showLegend`	boolean	series.length > 1	Wrapping, scrollable legend with keyboard inspection and optional series selection.
`showDots`	boolean	true	Show data markers. Hover, touch, and keyboard inspection remain available when hidden.
`showAxisLabels`	boolean	true	Wrap labels in bounded boxes; full names remain in accessible labels and the data table.
`showAxisLines`	boolean	true	Show spokes from the center to each axis endpoint.
`showGridLines`	boolean	true	Show the reference grid.
`labelOffset`	number	30	Label distance in pixels, reduced on narrow frames to keep labels inside the chart.
`fillOpacity`	number	0.25	Polygon fill opacity, from 0 to 1.
`strokeWidth`	number	2	Finite, nonnegative polygon stroke width in pixels.
`loading`	boolean	false	Retain series for a skeleton with identical geometry. Without data, show a neutral placeholder.
`error`	string \| null	null	Show an actionable error inside the existing frame.
`animation`	boolean	true	Grow data from the fixed center, leaving the reference grid still. Respects reduced motion; keyboard focus completes entrance immediately.
`valueFormatter`	(value: number, axis: RadarAxis<T>) => string	formatValue	Format values and ranges in tooltips and accessible data. Use the axis key for units.
`onSeriesClick`	(series: RadarSeries<T>, index: number) => void	—	Original series and index, from a polygon, point, legend click, or keyboard activation.
`onAxisClick`	(axis: RadarAxis<T>, index: number) => void	—	Original axis and index. Axis labels and endpoints are keyboard accessible when this callback is provided.
`tooltipRenderer`	TooltipRenderer<RadarChartTooltipData<T>>	—	Custom content with original data, series name and color. Point inspection adds axisLabel, parsed value, formattedValue, and type 'point'.
`ariaLabel`	string	—	Accessible chart name.
`description`	string	—	Context prepended to keyboard instructions and the scale explanation.
`className`	string	—	Additional classes for the persistent chart frame.