Radardiagram API

Zet een paar kandidaten tegen elkaar af op één gedeelde set criteria en zie in één oogopslag wie waar wint. Zie de Radardiagram-demo.

Import

Web Component

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

Vanilla JS

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

const chart = mountRadarChart(el, props);

Eigenschappen

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)
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) reserved for axes, titles, and labels
colors	string[]	-	Categorical palette for series/labels 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; all other marks dim
disabledItems	string[]	-	Labels to hide and exclude from scales/stacks
renderer	"svg" | "canvas" | "webgpu"	"svg"	Render as inline SVG (default) or to a canvas (faster for large datasets); getContext() is identical either way
locale	string	-	BCP-47 locale used for number and date formatting
skipColorMappingDispatch	boolean	false	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so mark colours come from your CSS via the data-label-safe contract
enableTransitions	boolean	true	Animate updates with CSS transitions (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 (duplicate labels, non-finite values, non-monotonic dates, ...)

Gebeurtenissen

Het webcomponent verzendt deze bubbelende CustomEvents (de engine biedt dezelfde functionaliteit via de on*-callbacks in de tabel hierboven):

Gebeurtenis	Detail	Wordt geactiveerd wanneer
michi-vz:highlight	string[]	de hover-markering verandert
michi-vz:colormapping	Record<string, string>	een kleurmapping wordt gegenereerd
michi-vz:dataprocessed	ChartContext	data (opnieuw) wordt verwerkt
michi-vz:datawarning	DataWarning[]	invoerwaarschuwingen worden gedetecteerd

getContext()

mountRadarChart(el, props).getContext() retourneert een renderer-onafhankelijke RadarChartContext (gestructureerde statistieken + een deterministische samenvatting in gewone taal + een a11y-tabel). Zie LLM-context.

Bron

Eigenschappen zijn getypeerd als RadarChartProps in @michi-vz/core.