Radar Chart
A web of hairline rings and spokes holding up to four series polygons.
$149 once · every Pro piece
The axis labels fade in, then the polygons spring out of the centre one after another. Point inside a polygon (overlaps resolve to the smallest one) or hover its legend row: that series lifts while the others step back, both ways. At the same time the pointer's angle picks an axis: the legend rolls every series' value on it, and the axis is marked quietly with vertex dots and a soft wedge of the sector (or dots only, nothing, or an opt-in accent spoke that fades in from the centre and stops at the outer ring). Options: hover by axis, series or both; straight-edged rings (a triangle at three axes, a hexagon at six), circles or spokes only; solid, hatched or outline-only polygons; smoothed outlines; one series selected at rest; loading and empty states. ←/→ walk the axes, ↑/↓ the series.
Install
npx shadcn@latest add @obsyde/radar-chartNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RadarChart } from '@/components/obsyde/ember/radar-chart/RadarChart';
export function Example() {
return (
<RadarChart />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/radar-chart/RadarChart.tsxcomponentember/radar-chart/radar-chart.cssstylesember/radar-chart/RadarChartDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/size.tssharedember/viz-kit/shape.tssharedember/viz-kit/scale.tssharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/motion.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/shared/ember.csssharedember/viz-kit/touch.tsshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
axesAxes | number | 6 |
compareCompare | boolean | false |
seriesCountSeries (0 = compare) | number | 0 |
indicatorAxis indicator | 'wedge' | 'dots' | 'spoke' | 'none' | 'wedge' |
hoverHover | 'both' | 'axis' | 'series' | 'both' |
gridGrid | 'polygon' | 'circle' | 'none' | 'polygon' |
fillFill | 'solid' | 'pattern' | 'none' | 'solid' |
curvedCurved | boolean | false |
levelsRings | number | 4 |
selectedSelected | number | -1 |
sizeSize | number | 360 |
legendLegend | 'row' | 'list' | 'none' | 'row' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 9 |