Radar Chart
Plot multi-dimensional metrics along radial axes to highlight performance profiles.
Source
LLM docs
Package
npm install @plocks/chartsExamples
8
Properties
45
Playground
Skill Comparison
Comparison of three engineering guilds with polygon grid, crosshair, and aggregated tooltip.
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Engineering guild comparison"
subtitle="Quarterly capability radar"
maw={700}
h={440}
series={SERIES}
maxValue={100}
radialGrid={{ rings: 5, shape: 'polygon', showAxes: true }}
enableCrosshair
multiTooltip
liveTooltip
legend={{ show: true, position: 'right', align: 'start' }}
tooltip={{
show: true,
formatter: (point) => `${point.axis}: ${Math.round(point.value)}%`,
}}
/>
);
}Product Health
Product health snapshot with circular grid, point markers, and custom tooltip messaging.
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Product health radar"
subtitle="Operational score vs. strategic goal"
maw={580}
h={440}
series={SERIES}
maxValue={10}
radialGrid={{ rings: 4, shape: 'circle', showAxes: false }}
enableCrosshair
legend={{ show: true, position: 'bottom', align: 'center' }}
tooltip={{
show: true,
formatter: (point) => `${point.axis}: ${point.value.toFixed(1)} / 10`,
}}
/>
);
}Basics
Displays multivariate data across axes starting from the same origin.
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Team capability radar"
maw={560}
h={380}
series={SERIES}
maxValue={60}
radialGrid={{ rings: 5, shape: 'polygon', showAxes: true }}
smooth
fill
enableCrosshair
multiTooltip
liveTooltip
legend={{ show: true, position: 'bottom' }}
tooltip={{
show: true,
formatter: (point) => `${point.axis}: ${point.value}`,
}}
/>
);
}Data Platform Maturity
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Data platform maturity"
subtitle="Governance and enablement dimensions"
maw={620}
h={480}
series={SERIES}
maxValue={5}
fill
enableCrosshair
multiTooltip
legend={{ show: true, position: 'bottom', align: 'center' }}
radialGrid={{
rings: 5,
shape: 'polygon',
axisLabelPlacement: 'outside',
axisLabelOffset: 24,
ringLabels: [
'Ad hoc',
'Emerging',
'Defined',
'Managed',
'Optimized',
],
ringLabelPosition: 'outside',
ringLabelOffset: 16,
}}
tooltip={{
show: true,
formatter: (point) => `${point.label ?? point.axis}: ${point.value.toFixed(1)} / 5`,
}}
/>
);
}Engineering Readiness
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Engineering readiness radar"
subtitle="Security, reliability, scalability, performance, maintainability"
maw={600}
h={440}
series={SERIES}
maxValue={5}
fill
enableCrosshair
legend={{ show: true, position: 'bottom' }}
radialGrid={{
rings: 5,
shape: 'circle',
showAxes: true,
axisLabelPlacement: 'outside',
ringLabels: [
'Reactive',
'Developing',
'Consistent',
'Resilient',
'Elite',
],
ringLabelPosition: 'inside',
ringLabelOffset: 18,
}}
tooltip={{
show: true,
formatter: (point) => `${point.axis}: ${point.value.toFixed(1)} readiness`,
}}
/>
);
}Market Perception Interviews
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Market perception signal"
subtitle="Customer interview scorecard"
maw={700}
h={460}
series={SERIES}
maxValue={5}
fill
enableCrosshair
multiTooltip
legend={{ show: true, position: 'right', align: 'center' }}
radialGrid={{
rings: 5,
shape: 'polygon',
axisLabelPlacement: 'outside',
axisLabelOffset: 18,
ringLabels: ({ index }) => ['Poor', 'Fair', 'Good', 'Great', 'Exceptional'][index],
}}
tooltip={{
show: true,
formatter: (point) => `${point.label ?? point.axis}: ${point.value.toFixed(1)} / 5`,
}}
/>
);
}Product Capability Benchmark
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Product capability vs. competition"
subtitle="Benchmarking core differentiators"
maw={620}
h={460}
series={SERIES}
maxValue={10}
fill
enableCrosshair
legend={{ show: true, position: 'bottom', align: 'center' }}
radialGrid={{
rings: 5,
shape: 'polygon',
showAxes: true,
axisLabelPlacement: 'outside',
axisLabelOffset: 20,
ringLabels: [
'Baseline',
'Market ready',
'Parity',
'Differentiated',
'Category leader',
],
}}
tooltip={{
show: true,
formatter: (point) => `${point.label ?? point.axis}: ${point.value.toFixed(1)} / 10`,
}}
/>
);
}Skills Gap Role Family
Loading demo…
import { RadarChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<RadarChart
title="Role family skills gap analysis"
subtitle="Percent attainment against competency targets"
maw={720}
h={480}
series={SERIES}
maxValue={100}
fill
enableCrosshair
multiTooltip
legend={{ show: true, position: 'right', align: 'start' }}
radialGrid={{
rings: 4,
shape: 'polygon',
axisLabelPlacement: 'outside',
axisLabelOffset: 24,
ringLabels: ({ value }) => `${Math.round(value)} pts`,
}}
tooltip={{
show: true,
formatter: (point) => `${point.label ?? point.axis}: ${Math.round(point.value)} / 100`,
}}
/>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources