Radar Chart API

Stack a few candidates over one shared set of criteria and read who wins where at a glance. See the Radar Chart demo.

Import

import "@michi-vz/wc/radar-chart";
// <michi-vz-radar-chart> is now defined

import { mountRadarChart } from "@michi-vz/core";

const chart = mountRadarChart(el, props);

import { RadarChart } from "@michi-vz/react/radar-chart";

import { RadarChart } from "@michi-vz/vue/radar-chart";

import { radarChart } from "@michi-vz/svelte/radar-chart";

import { bindChart, applyRadarChartProps } from "@michi-vz/angular/radar-chart";
// needs CUSTOM_ELEMENTS_SCHEMA on the component that hosts <michi-vz-radar-chart>

Props

Prop	Type	Default	Description
`timeline`	`boolean \| TimelinePeriodConfig`	-	Opt-in "play through years": snapshots one period at a time over the period tags in the data, with a headless controller (`chart.timeline()`) plus the built-in play button + scrubber. Values tween between periods unless `interpolate: false`. Off by default; wins over `progressiveDraw` when both are set.
`progressiveDraw`	`boolean \| ProgressiveDrawConfig`	-	Opt-in reveal animation: wipes the marks in left to right on mount (a clip reveal; axes and titles stay put). `true` uses defaults (1200 ms, easeInOutCubic); a config tunes durationMs, easing, autoplay, and replayOnUpdate (`tipLabel` is LineChart-only and ignored here). Off by default; respects prefers-reduced-motion (renders fully drawn instantly) and `replay()` re-runs it.
`series`*	`RadarDataItem[]`	-	Array of polygon series to plot, one closed shape per item drawn over the shared polar grid
`axes`	`string[]`	-	spoke labels (the radial axes). Optional when `poles.labels` is supplied (legacy compat).
`poles`	`{ labels: string[]; domain?: number[]; range?: number[] }`	-	Legacy pole config; `poles.labels` are used as the axes when `axes` is omitted.
`showFilled`	`boolean`	-	Stroke-only when false (no polygon fill); default true (fill at fillOpacity).
`showDimmedFill`	`boolean`	-	Fill the DIMMED (e.g. non-current) polygons as a soft background; default true. Set false for stroke-only dimmed paths when the fill obscures the active path.
`radialLabelFormatter`	`(value: number) => string`	-	Formats each ring's value label (the radial scale).
`poleLabelFormatter`	`(axis: string) => string`	-	Formats each spoke (pole) label.
`tooltipContainerStyle`	`Record<string, string \| number>`	-	Inline style merged onto the tooltip container div.
`isLoading`	`boolean`	-	Show the loading overlay and skip the no-data check (legacy michi-vz parity).
`isNodata`	`boolean \| ((dataSet: RadarDataItem[] \| null \| undefined) => boolean)`	-	No-data override: boolean, or a predicate on series; default = empty series.
`noDataLabel`	`string`	-	Text for the vanilla default no-data overlay (ignored when suppressed).
`suppressDefaultOverlay`	`boolean`	-	A framework wrapper sets this to render its OWN loading/no-data node instead.
`title`	`string`	-	Optional chart title rendered above the plot
`maxValue`	`number`	-	Value mapped to the outer ring (full radius), shared by every spoke; defaults to the largest value across all series and axes (or 1 when all are zero)
`niceMaxValue`	`boolean \| number`	`false`	Round the default outer ring UP to the last "nice" tick of [0, data max] (d3-array `tickStep`: 1/2/5 x 10^n steps), so the outer ring label reads 80 or 1 400 000 instead of 73 or 1 234 567. `true` uses `rings` as the tick count; a number sets the tick count itself (e.g. 5). A max already on a tick stays put. Only applies while `maxValue` is unset (an explicit `maxValue` always wins); all-zero or negative data keeps the default outer ring of 1. Inner rings are equal fractions of the nice max, so they are round only when it divides evenly by `rings`. The context `maxValue` reports the rounded value. Default false: the outer ring is the raw data max.
`rings`	`number`	`4`	number of concentric grid rings (default 4).
`fillOpacity`	`number`	`0.2`	polygon fill opacity (default 0.2).
`tooltipFormatter`	`(item: RadarDataItem & { date?: string }) => string`	-	Returns custom tooltip HTML for a hovered datum (sanitized before it is inserted). In canvas mode the datum also carries `date` (the hovered pole's axis label).
`onHighlightItem`	`(labels: string[]) => void`	-	Called when the hovered/highlighted label(s) change

Common props - shared by every chart (14)

Prop	Type	Default	Description
`width`	`number`	`600`	Chart width in pixels
`height`	`number`	`600`	Chart height in pixels
`margin`	`Margin`	`{ top: 60, right: 80, bottom: 60, left: 80 }`	Inner margins (top/right/bottom/left, in px); default 8 (36 top with a title)
`colors`	`string[]`	-	Categorical palette for rings without an explicit colour or colorsMapping entry
`colorsMapping`	`Record<string, string>`	-	Explicit label -> colour map; takes precedence over the palette and per-item colours
`highlightItems`	`string[]`	-	Labels to emphasise (active styling); others keep their base opacity
`disabledItems`	`string[]`	-	Labels to hide entirely (ring + track removed; remaining rings keep their radii order)
`renderer`	`"svg" \| "canvas" \| "webgpu"`	`"svg"`	Render as inline SVG (default) or to a canvas / WebGPU layer; getContext() is identical either way
`locale`	`string`	-	BCP-47 locale used for number formatting
`skipColorMappingDispatch`	`boolean`	`false`	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so arc colours come from your CSS via the data-label-safe contract
`enableTransitions`	`boolean`	`true`	Animate opacity/arc changes with CSS transitions (SVG renderer; default true)
`onColorMappingGenerated`	`(mapping: Record<string, string>) => void`	-	Called with the resolved label -> colour map after the chart assigns colours
`onChartDataProcessed`	`(context: ChartContext) => void`	-	Called with the renderer-agnostic ChartContext whenever the data is (re)processed
`onDataWarning`	`(warnings: DataWarning[]) => void`	-	Called with any non-fatal data warnings (out-of-range values, duplicate labels, ...)

Events

The web component dispatches these bubbling CustomEvents (the engine exposes the same via the on* callbacks in the table above):

Event	Detail	Fires when
`michi-vz:highlight`	`string[]`	hover highlight changes
`michi-vz:colormapping`	`Record<string, string>`	a color mapping is generated
`michi-vz:dataprocessed`	`ChartContext`	data is (re)processed
`michi-vz:datawarning`	`DataWarning[]`	input warnings are detected

getContext()

mountRadarChart(el, props).getContext() returns a renderer-agnostic RadarChartContext (structured stats + a deterministic natural-language summary + an a11y table). See LLM context.

Source

Props are typed as RadarChartProps in @michi-vz/core.

Radar Chart API ​

Import ​

Props ​

Events ​

getContext() ​

Source ​