Radar Chart · Kind UI charts

Loading chart…

Product research scores out of 100
Dimension	Studio	Field
Speed	88	62
Quality	76	91
Value	63	84
Support	92	68
Reach	58	89
Trust	81	74

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Speed", studio: 88, field: 62 },
  { period: "Quality", studio: 76, field: 91 },
  { period: "Value", studio: 63, field: 84 },
  { period: "Support", studio: 92, field: 68 },
  { period: "Reach", studio: 58, field: 89 },
  { period: "Trust", studio: 81, field: 74 },
];
const config = {
  studio: { label: "Studio", color: "#733bff" },
  field: { label: "Field", color: "#008b82" },
} satisfies Chart.SeriesConfig;

export function ProductRadarChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadarChart
          data={data}
          animate
          outerRadius="68%"
          margin={{ top: 24, right: 36, bottom: 24, left: 36 }}
          aria-label="Product research scores out of 100: Studio and Field"
        >
          <Chart.PolarGrid radialLines={false} />
          <Chart.PolarAngleAxis dataKey="period" tick={{ fontSize: 12 }} />
          <Chart.PolarRadiusAxis
            domain={[0, 100]}
            ticks={[25, 50, 75, 100]}
            angle={60}
            axisLine={false}
            tick={{ fontSize: 10 }}
          />
          <Chart.RadarSeries dataKey="studio" strokeWidth={2} fillOpacity={0.18} />
          <Chart.RadarSeries dataKey="field" strokeWidth={2} fillOpacity={0.18} />
          <Chart.Tooltip />
        </Chart.RadarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Compare measures on a shared radial scale with one RadarSeries per profile.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.RadarChart data={data} animate outerRadius="68%" aria-label="Product research scores out of 100">
      <Chart.PolarGrid radialLines={false} />
      <Chart.PolarAngleAxis dataKey="period" />
      <Chart.PolarRadiusAxis domain={[0, 100]} ticks={[25, 50, 75, 100]} />
      <Chart.RadarSeries dataKey="studio" fillOpacity={0.18} />
      <Chart.RadarSeries dataKey="field" fillOpacity={0.18} />
      <Chart.Tooltip />
    </Chart.RadarChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Use comparable units and a fixed domain across spokes. These research scores share a 0–100 scale.

Center-out motion

animate reveals the polygon from its center. Interaction or data/layout changes finish it; reduced motion skips it. Custom shapes, masks, filters or transforms can bypass the reveal.

Series selection

Click a polygon or press Enter/Space on its series control to select it. Repeat to clear; Escape clears selection. Values and visibility stay unchanged.

Loading chart…

Product research scores out of 100
Dimension	Studio	Field
Speed	88	62
Quality	76	91
Value	63	84
Support	92	68
Reach	58	89
Trust	81	74

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import { useState } from "react";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Speed", studio: 88, field: 62 },
  { period: "Quality", studio: 76, field: 91 },
  { period: "Value", studio: 63, field: 84 },
  { period: "Support", studio: 92, field: 68 },
  { period: "Reach", studio: 58, field: 89 },
  { period: "Trust", studio: 81, field: 74 },
];
const config = {
  studio: { label: "Studio", color: "#733bff" },
  field: { label: "Field", color: "#008b82" },
} satisfies Chart.SeriesConfig;

export function SelectableRadarChart() {
  const [selectedSeries, setSelectedSeries] = useState<string | null>(null);
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadarChart
          data={data}
          animate
          outerRadius="68%"
          margin={{ top: 24, right: 36, bottom: 24, left: 36 }}
          aria-label="Product research scores out of 100: Studio and Field"
          selection="series"
          selectedSeries={selectedSeries}
          onSelectedSeriesChange={setSelectedSeries}
        >
          <Chart.PolarGrid radialLines={false} />
          <Chart.PolarAngleAxis dataKey="period" tick={{ fontSize: 12 }} />
          <Chart.PolarRadiusAxis
            domain={[0, 100]}
            ticks={[25, 50, 75, 100]}
            angle={60}
            axisLine={false}
            tick={{ fontSize: 10 }}
          />
          <Chart.RadarSeries dataKey="studio" strokeWidth={2} fillOpacity={0.18} />
          <Chart.RadarSeries dataKey="field" strokeWidth={2} fillOpacity={0.18} />
          <Chart.Tooltip />
        </Chart.RadarChart>
      </Chart.ResponsiveContainer>
      <output aria-live="polite">
        {selectedSeries
          ? `Highlighted: ${config[selectedSeries as keyof typeof config].label}`
          : "All series"}
      </output>
    </Chart.Root>
  );
}

Enable selection="series". Omit selectedSeries for local state, or pair it with onSelectedSeriesChange for controlled selection.

Selection dims paint, not spoke tooltip values. Keep Root emphasis at "auto"; visibility and persistent selection remain separate.

SVG series controls expose labels and pressed state, but provide no arrow-key spoke navigation. Keep the accessible data alternative and verify support in your target assistive technologies.

Materials

Choose plain, paper, clay or glow. Glow’s exterior halo is decorative, not a score boundary.

Loading chart…

Product research scores out of 100
Dimension	Studio	Field
Speed	88	62
Quality	76	91
Value	63	84
Support	92	68
Reach	58	89
Trust	81	74

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Speed", studio: 88, field: 62 },
  { period: "Quality", studio: 76, field: 91 },
  { period: "Value", studio: 63, field: 84 },
  { period: "Support", studio: 92, field: 68 },
  { period: "Reach", studio: 58, field: 89 },
  { period: "Trust", studio: 81, field: 74 },
];
const config = {
  studio: { label: "Studio", color: "#733bff" },
  field: { label: "Field", color: "#008b82" },
} satisfies Chart.SeriesConfig;

export function MaterialRadarChart({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
} = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadarChart
          data={data}
          animate
          outerRadius="68%"
          margin={{ top: 24, right: 36, bottom: 24, left: 36 }}
          aria-label="Product research scores out of 100: Studio and Field"
        >
          <Chart.PolarGrid radialLines={false} />
          <Chart.PolarAngleAxis dataKey="period" tick={{ fontSize: 12 }} />
          <Chart.PolarRadiusAxis
            domain={[0, 100]}
            ticks={[25, 50, 75, 100]}
            angle={60}
            axisLine={false}
            tick={{ fontSize: 10 }}
          />
          <Chart.RadarSeries
            dataKey="studio"
            strokeWidth={2}
            fillOpacity={0.18}
            material={material}
          />
          <Chart.RadarSeries
            dataKey="field"
            strokeWidth={2}
            fillOpacity={0.18}
            material={material}
          />
          <Chart.Tooltip />
        </Chart.RadarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Custom shape, filter or style.filter overrides the finish. Dots and labels retain native rendering. See material support.

API reference

Focused props for explicit Radar composition; upstream links cover native geometry.

RadarChart

Use inside Root and a sized ResponsiveContainer.

Prop	Type	Default	Description
`data`	`Row[]`	—	Category rows used by explicit axes and series.
`animate`	`boolean \| RadarAnimation`	`false`	Center-out entrance for default polygons; respects reduced motion.
`selection`	`"none" \| "series"`	`"none"`	Opts in to persistent series controls.
`selectedSeries`	`string \| null`	Local state	Controlled selection when supplied; requires a callback.
`onSelectedSeriesChange`	`(next: string \| null) => void`	—	User toggle/reset requests; does not control visibility.
`cx` / `cy`	`number \| string`	`"50%"`	Native polar center.
`outerRadius`	`number \| string`	`"80%"`	Plot radius; these components reserve label space with `"68%"`.
`aria-label` / `aria-labelledby`	`string`	—	Accessible plot name; does not add spoke keyboard inspection.
`children`	`ReactNode`	—	Explicit polar axes, grid, series and tooltip.

Entrance runs once per mount. Unavailable uncontrolled selections clear without a callback; controlled values remain consumer-owned and show no selected paint while unavailable.

RadarAnimation accepts revealDurationMs (default 1000), revealEasing (default "easeOut") and hoverTransition (shared spring). See Recharts RadarChart.

RadarSeries

String dataKey values identify config entries. Use seriesKey for numeric keys or accessors with visibility or selection.

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	—	Value field or native accessor; supplied for both profiles here.
`seriesKey`	`string`	String `dataKey`	Metadata, visibility and selection identity.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Finish on default polygons; consumer rendering takes precedence.
`stroke` / `fill`	`string`	Config color	Override outline or fill independently.
`fillOpacity`	`number`	SVG default `1`	These overlapping profiles explicitly use `0.18`.
`dot`	`boolean` or native dot props / renderer	`false`	Optional native category marks.
`activeDot`	`boolean` or native dot props / renderer	Kind active marker	Native inspected-category marker; independent of selection.
`hide`	`boolean`	`false`	Hides the series; Root visibility also applies.
`shape`	Native element or renderer	Kind default polygon	Consumer-owned shape bypasses material and center-out masking.

Per-series animation is disabled. Recharts exposes no Radar series component ref; attach refs to custom marks. See Recharts Radar.

Shared components

Root, SeriesConfig, Axes and grid, Legend, Tooltip, ResponsiveContainer.

UsageCopy Anchor Link

Center-out motionCopy Anchor Link

Series selectionCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

RadarChartCopy Anchor Link

RadarSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Center-out motion

Series selection

Materials

API reference

RadarChart

RadarSeries

Shared components