Graphs

Radar chart

Apache ECharts profile lines with a transparent-center range ring, based on the WAfM radar designs.

Radar playground

Compare profile lines and a per-axis range band. Hover the graph or use arrow keys to inspect values.

Alina Wiking
Elias Becker
Wunsch

Chart data: Profile comparison

Profile comparison
Axis	Alina Wiking	Elias Becker	Wunsch
Flexibilität, Umstellungsfähigkeit	5	8	6–8
Sorgfalt / Gewissenhaftigkeit	8	5	6–9
Flexibilität / Umstellungsfähigkeit	6	7	5–7
Leistungs- und Problemlösefähigkeit	7	6	6–9
Sorgfalt / Gewissenhaftigkeit	8	5	5–7
Flexibilität, Umstellungsfähigkeit	6	8	6–8

Properties

Axes

Profiles

Edit axis

Edit profile

Profile value

Range minimum

Range maximum

Range opacity

Line width (px)

Range ring

Average line

Show legend

Tooltips

Animation

The range is a transparent-center band between per-axis bounds. The average is calculated from the visible profiles; values below are editable example data.

States

A single unfilled profile line and a five-axis comparison with a range ring. Hover an axis to inspect its values.

Single profile

Alina Wiking

Chart data: Single profile

Single profile
Axis	Alina Wiking
Flexibilität, Umstellungsfähigkeit	5
Sorgfalt / Gewissenhaftigkeit	8
Flexibilität / Umstellungsfähigkeit	6
Leistungs- und Problemlösefähigkeit	7
Sorgfalt / Gewissenhaftigkeit	8
Flexibilität, Umstellungsfähigkeit	6

Five axes with range

Alina Wiking
Elias Becker
Lena Schulz
Sophie Richter
Wunsch

Chart data: Abilities comparison

Abilities comparison
Axis	Alina Wiking	Elias Becker	Lena Schulz	Sophie Richter	Wunsch
Problemlösefähigkeit, Allgemeinwissen	5	8	7	5	6–8
Planungs- und Organisationsfähigkeit	8	5	6	8	6–9
Wahrnehmungs- und Bearbeitungsfähigkeit	6	7	8	5	5–7
Rechtschreibfähigkeit	7	6	5	9	6–9
Logisches Zahlendenken	8	5	6	6	5–7

Color tokens

Category / Subcategory / State names mapped to shared tokens. Theme colors update automatically.

Data / Attendee 2 / Default: --wafm-attendee-2
Data / Attendee 1 / Default: --wafm-attendee-1
Data / Attendee 3 / Default: --wafm-attendee-3
Data / Attendee 4 / Default: --wafm-attendee-4
Data / Attendee 5 / Default: --wafm-attendee-5
Data / Attendee 6 / Default: --wafm-attendee-6
Data / Attendee 7 / Default: --wafm-attendee-7
Data / Attendee 8 / Default: --wafm-attendee-8
Data / Range / Default: --wafm-wish · 40% opacity
Data / Average / Default: --foreground · dashed
Surface / Reference band / Default: --muted · middle third of the scale
Border / Grid / Default: --border
Content / Axis / Default: --muted-foreground
Surface / Tooltip / Default: --popover · --popover-foreground

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

RadarChart

import { RadarChart } from '@wafm/ui/components/radar-chart'

<RadarChart
  label="Profile comparison"
  axes={axes}
  series={[
    { id: 'alina', label: 'Alina Wiking', values: [5, 8, 6, 7, 8, 6], color: '--wafm-attendee-2' },
  ]}
  range={{ min: [6, 6, 5, 6, 5, 6], max: [8, 9, 7, 9, 7, 8], label: 'Wunsch' }}
  maxValue={9}
/>

axes: At least three axes, each with a unique id and label. Order runs clockwise from the top; the examples include five and six axes.
series: Profile lines with unique id, label, values in axis order, and color (CSS color or --token name). dashed enables an average/reference line. No series fills the center.
range: Optional min and max arrays in axis order, with label (Wunsch) and color (--wafm-wish). Only the band between the lower and upper polygons is shaded; its center remains transparent. Reversed bounds are ordered automatically.
maxValue / splitNumber: Scale maximum and number of grid intervals; both default to 9. The neutral background band spans the middle third of the scale (3–6 by default), independently of the grid intervals and optional Wunsch range. Values outside the scale are clamped; missing or non-finite values become zero.
size / lineWidth / rangeOpacity: Maximum width (630px), profile line width (2px), and range opacity (0.4). The chart keeps a 4:3 aspect ratio and responds to the playground frame.
showLegend / showTooltip / animation: All default to true. Hover an axis to see profile values and its range. Keyboard users can focus the chart and use left/right arrows; Escape dismisses the tooltip. Reduced-motion preferences disable animation.
label / className: Accessible chart name and outer layout customization. A screen-reader data table exposes all values and bounds.