Radar Chart

Mobile

Tablet

Desktop

Channels

Organic73
Paid67
Referral66

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

RadarChart is built on polar polygon geometry and the motion library. It is a single component: pass data (one row per metric — the spokes, first metric at 12 o'clock, clockwise) and a series array — each series draws a closed translucent polygon across the spokes on one shared [0, maxValue] scale, with a vertex point at every metric. Series colors cycle --chart-1 … --chart-5 positionally; chart chrome (grid rings, spokes, labels) maps to the neutral tokens. Hover is per-series: pointing at a polygon (or its legend row, through hoveredIndex/onHoverChange) scales it up and glows it in its own color while the other series dim.

import {RadarChart} from "@blakeui/pro-react";

const channels = [
  {metric: "Reach", organic: 82, paid: 95},
  {metric: "Engagement", organic: 74, paid: 48},
  // …one row per spoke
];

function App() {
  return (
    <RadarChart
      data={channels}
      series={[
        {dataKey: "organic", name: "Organic"},
        {dataKey: "paid", name: "Paid"},
      ]}
    />
  );
}

Motion

On mount the concentric grid rings scale in from the center on a staggered spring, the spokes draw outward, the labels settle into place, and each series polygon grows radially from the center over the animationDuration tween after a short hand-off — later series follow at 150ms intervals. Hovering scales the active polygon to 1.05 on a spring and dims the others over 150ms. All motion collapses to an instant render under prefers-reduced-motion, and the chart exposes the active series to assistive tech through a polite live region (arrow keys, Home/End, and Escape drive the selection from the keyboard).

Loading state

Set status="loading" to show a stroke-only skeleton polygon while data resolves; flip it to "ready" and the load→ready choreography plays — the pulse flows out around the perimeter, the caption exits, and the grid, spokes, and polygons play their entrance.

Mobile

Tablet

Desktop

Loading channels…

Organic
Paid
Referral

API Reference

RadarChart

The single chart component. Measures its container into a square, maps every series onto one shared radial scale, and renders the grid, spokes, labels, polygons, hover layer, and loading chrome.

Prop	Type	Default	Description
`data`	`Record<string, unknown>[]`	—	One row per metric (spoke) — the label key plus one numeric field per series.
`series`	`RadarChartSeries[]`	—	The polygons to draw, in paint order (see the series table below).
`metricKey`	`string`	`"metric"`	Key in each row holding the metric's axis label.
`maxValue`	`number`	`100`	Radial domain maximum — values plot as `value / maxValue` of the radius, shared by every spoke and series.
`levels`	`number`	`5`	Number of concentric grid rings.
`margin`	`number`	`60`	Margin around the plot in px — the label room outside the outer ring.
`size`	`number`	—	Fixed box size in px. Omit for responsive sizing (a square that fills the container width).
`labelOffset`	`number`	`24`	Distance of the metric labels beyond the outer ring in px.
`showGrid`	`boolean`	`true`	Render the concentric grid rings.
`showLevelLabels`	`boolean`	`true`	Render the ring level values along the upper spoke.
`showAxisLines`	`boolean`	`true`	Render the center→ring spoke lines.
`showLabels`	`boolean`	`true`	Render the metric labels around the perimeter.
`showPoints`	`boolean`	`true`	Render the vertex points on each polygon.
`showGlow`	`boolean`	`true`	Glow the hovered polygon with a drop-shadow in its own color.
`hoveredIndex`	`number \| null`	—	Controlled hover — the active series index. Pair with `onHoverChange` for legend sync.
`onHoverChange`	`(index: number \| null) => void`	—	Called when the active series changes (pointer, keyboard, or a controlled legend).
`animationDuration`	`number`	`1100`	Entrance tween duration in ms — every stagger delay scales with it.
`status`	`"loading" \| "ready"`	`"ready"`	While loading, shows the skeleton polygon. Flipping to ready plays the entrance.
`loadingLabel`	`string`	`""`	Centered caption shown while loading. Empty string hides it.

Also supports all native div HTML attributes.

RadarChartSeries

Each entry in the series array describes one polygon.

Option	Type	Default	Description
`dataKey`	`string`	—	Key in each data row for this series' values.
`name`	`string`	`dataKey`	Legend/announcement label.
`color`	`string`	`var(--chart-1..5)`	Series color. Defaults cycle the chart palette by series position.