Node / Charts · guide

Radar chart

Current Apexify.js 6.0.0 documentation for Radar chart.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

1await painter.createChart('radar', seriesList, options);

Requirements

options.radar.categories — ≥ 3 strings (throws otherwise).
Each RadarSeries.values length must equal categories.length.

RadarSeries

Field	Purpose
`label`	Legend text.
`values`	Numeric polygon vertices (same order as `categories`).
`color`	Fill tint (preset palette + golden-angle HSL fallback by index).
`stroke`	Outline colour (distinct from `color` fill when set).
`gradient`	Fill gradient.
`fillOpacity`	Polygon fill alpha.
`lineWidth`	Edge stroke width.
`opacity`	Multiplier on fill/stroke/dots (overrides chart-level `radar.opacity`**).

When color and stroke are both omitted, stroke/fill tint and legend swatches use the built‑in preset by series index (see below). Setting gradient still fills from that gradient when radar.fill is not false.

Built‑in colour preset (series index)

radarSeriesColor in radarchart.ts assigns colours in order:

Fixed palette (indices 0…8): #38bdf8, #a78bfa, #f472b6, #34d399, #fbbf24, #fb7185, #22d3ee, #f97316, #a3e635
Golden‑angle HSL for index ≥ 9: hue = (index × 137.508) % 360 with stepped saturation/lightness

Use this when you want distinct series without hand‑picking hex values — legend entries pick up the same colours automatically.

RadarChartOptions.radar

Field	Default / notes
`maxValue`	Ceiling — defaults niceMax(maxData × 1.05).
`gridLevels`	Concentric polygons (≥ 3, default 5).
`labelMarginRatio`	Outer label padding (default ~0.12).
`fill`	Fill under polygon (default true).
`showPoints`, `pointRadius`	Vertex dots.
`gridColor`, `gridWidth`	Web styling.
`axisLabelFontSize`, `axisLabelColor`	Category captions.
`opacity`	Global series multiplier (0…1).

Example — skills matrix

1await painter.createChart(2  'radar',3  [4    {5      label: 'Candidate A',6      values: [85, 70, 90, 65, 80],7      color: 'rgba(56,189,248,0.35)',8      stroke: '#0284c7',9      lineWidth: 2,10    },11    {12      label: 'Candidate B',13      values: [72, 88, 74, 82, 77],14      color: 'rgba(244,114,182,0.35)',15      stroke: '#db2777',16      lineWidth: 2,17    },18  ],19  {20    dimensions: { width: 720, height: 560 },21    radar: {22      categories: ['Math', 'Coding', 'Design', 'Comm', 'Leadership'],23      maxValue: 100,24      gridLevels: 5,25      showPoints: true,26      pointRadius: 5,27    },28    labels: {29      title: { text: 'Interview radar', fontSize: 22 },30    },31  }32);

Example — preset colours only (omit color / stroke)

Three polygons share no explicit colours; strokes and light fills follow the preset order above.

1await painter.createChart(2  'radar',3  [4    { label: 'Sprint 1', values: [70, 60, 75, 65, 80], lineWidth: 2 },5    { label: 'Sprint 2', values: [82, 72, 68, 78, 74], lineWidth: 2 },6    { label: 'Sprint 3', values: [65, 85, 88, 70, 72], lineWidth: 2 },7  ],8  {9    dimensions: { width: 760, height: 560 },10    radar: {11      categories: ['Build', 'Test', 'Docs', 'Review', 'Deploy'],12      maxValue: 100,13      gridLevels: 5,14      opacity: 1,15    },16    labels: { title: { text: 'Preset palette — no manual colours', fontSize: 20 } },17  }18);

Example — outline‑first preset (fill: false)

Turn off polygon fill to emphasize spokes and shared grid; stroke still defaults through color or the preset.

1await painter.createChart(2  'radar',3  [4    {5      label: 'Baseline',6      values: [50, 55, 48, 52, 49],7      lineWidth: 3,8      stroke: '#64748b',9    },10    {11      label: 'Target',12      values: [88, 90, 85, 92, 87],13      lineWidth: 3,14      stroke: '#16a34a',15    },16  ],17  {18    dimensions: { width: 700, height: 540 },19    radar: {20      categories: ['Reliability', 'Speed', 'Cost', 'Safety', 'UX'],21      maxValue: 100,22      fill: false,23      showPoints: true,24      pointRadius: 6,25      gridColor: 'rgba(71, 85, 105, 0.35)',26      gridWidth: 1.5,27      axisLabelColor: '#334155',28      axisLabelFontSize: 13,29    },30    labels: { title: { text: 'Wireframe radar', fontSize: 22 } },31  }32);

#Requirements

#RadarSeries

#Built‑in colour preset (series index)

#RadarChartOptions.radar

#Example — skills matrix

#Example — preset colours only (omit color / stroke)

#Example — outline‑first preset (fill: false)

Related guides and reference

Next steps