@rokkit/chart 1.3.15 → 1.4.0

package/dist/Sparkline.svelte.d.ts

@@ -21,6 +21,8 @@ type Props = {
     baseline?: number;
     highlight?: HighlightSelector | HighlightSelector[];
     trend?: TrendMethod | TrendMethod[];
+    /** Accessible name, forwarded to `Spark`. Omitted → generated from the series. */
+    label?: string;
 };
 declare const Sparkline: import("svelte").Component<Props, {}, "">;
 type Sparkline = ReturnType<typeof Sparkline>;

package/dist/charts/RadarChart.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import Plot from '../Plot.svelte'
+	import Radar from '../geoms/Radar.svelte'
+
+	type Row = Record<string, unknown>
+
+	type AxisSpec = {
+		key: string
+		label?: string
+		unit?: string
+		domain?: [number, number]
+		ticks?: number
+		tickLabels?: string[]
+		format?: (value: number) => unknown
+		weight?: number
+	}
+
+	type Props = {
+		data?: Row[]
+		/** Field naming which axis each row belongs to. */
+		axis?: string
+		/** Field holding the plotted magnitude. */
+		value?: string
+		/** Field distinguishing one polygon from another. */
+		series?: string
+		/** Axis order and per-axis config — bare names, full specs, or a mix. */
+		axes?: (string | AxisSpec)[]
+		pattern?: string
+		grid?: boolean
+		rings?: number
+		sharedDomain?: boolean
+		radiusScale?: 'linear' | 'sqrt' | 'auto'
+		alpha?: number
+		stat?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		title?: string
+		tooltip?: boolean | ((data: Row) => string)
+		/** Omit to let it default: on for 2+ series, off for one. */
+		legend?: boolean
+		/** Plot-level selection: receives the `buildSelectDetail` shape, not a bare row —
+		 *  same as AreaChart/BarChart. The geom's own `onselect` (a row) is reached by
+		 *  composing `<Plot><Radar onselect /></Plot>` directly. */
+		onselect?: (detail: unknown) => void
+	}
+
+	let {
+		data = [],
+		axis = undefined,
+		value = undefined,
+		series = undefined,
+		axes = undefined,
+		pattern = undefined,
+		grid = true,
+		rings = undefined,
+		sharedDomain = undefined,
+		radiusScale = undefined,
+		alpha = undefined,
+		stat = 'identity',
+		width = 400,
+		height = 400,
+		mode = undefined,
+		title = undefined,
+		tooltip = false,
+		legend = undefined,
+		onselect = undefined
+	}: Props = $props()
+
+	// ⚠ Diverges from PieChart, which defaults `legend` to false. Radar fills are washed out
+	// (preset alpha 0.25) and they overlap, so where they intersect the blend is a colour
+	// that belongs to neither series — matching a polygon to its series by colour alone is
+	// unreliable. A legend is therefore on by default as soon as there is more than one
+	// series. Still fully overridable in both directions.
+	//
+	// With no `series` channel there is exactly one polygon by construction, so the count
+	// cannot exceed one and the legend is simply off — no need to distinguish empty data
+	// from one implicit series.
+	const multiSeries = $derived(series ? new Set(data.map((row) => row[series])).size > 1 : false)
+	const showLegend = $derived(legend ?? multiSeries)
+</script>
+
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{title}
+	grid={false}
+	axes={false}
+	margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+	legend={showLegend}
+	{tooltip}
+	{onselect}
+>
+	<Radar
+		{axis}
+		{value}
+		{series}
+		{axes}
+		{pattern}
+		{alpha}
+		{stat}
+		options={{ grid, rings, sharedDomain, radiusScale }}
+	/>
+</Plot>

package/dist/charts/RadarChart.svelte.d.ts

@@ -0,0 +1,43 @@
+type Row = Record<string, unknown>;
+type AxisSpec = {
+    key: string;
+    label?: string;
+    unit?: string;
+    domain?: [number, number];
+    ticks?: number;
+    tickLabels?: string[];
+    format?: (value: number) => unknown;
+    weight?: number;
+};
+type Props = {
+    data?: Row[];
+    /** Field naming which axis each row belongs to. */
+    axis?: string;
+    /** Field holding the plotted magnitude. */
+    value?: string;
+    /** Field distinguishing one polygon from another. */
+    series?: string;
+    /** Axis order and per-axis config — bare names, full specs, or a mix. */
+    axes?: (string | AxisSpec)[];
+    pattern?: string;
+    grid?: boolean;
+    rings?: number;
+    sharedDomain?: boolean;
+    radiusScale?: 'linear' | 'sqrt' | 'auto';
+    alpha?: number;
+    stat?: string;
+    width?: number;
+    height?: number;
+    mode?: 'light' | 'dark';
+    title?: string;
+    tooltip?: boolean | ((data: Row) => string);
+    /** Omit to let it default: on for 2+ series, off for one. */
+    legend?: boolean;
+    /** Plot-level selection: receives the `buildSelectDetail` shape, not a bare row —
+     *  same as AreaChart/BarChart. The geom's own `onselect` (a row) is reached by
+     *  composing `<Plot><Radar onselect /></Plot>` directly. */
+    onselect?: (detail: unknown) => void;
+};
+declare const RadarChart: import("svelte").Component<Props, {}, "">;
+type RadarChart = ReturnType<typeof RadarChart>;
+export default RadarChart;

package/dist/geoms/Area.svelte

@@ -10,6 +10,8 @@
 		/** @deprecated use `position="stack"` — kept as an alias. */
 		stack?: boolean
 		curve?: 'linear' | 'smooth' | 'step'
+		/** Data-space value to anchor/split the fill at; splits the area into above/below segments. */
+		baseline?: number
 	}
 
 	type Props = {
@@ -40,7 +42,12 @@
 		type: 'area',
 		channels: { x, y, color, fill, pattern },
 		stat,
-		options: { stack: options?.stack ?? false, position: resolvedPosition, curve: options?.curve },
+		options: {
+			stack: options?.stack ?? false,
+			position: resolvedPosition,
+			curve: options?.curve,
+			baseline: options?.baseline
+		},
 		alpha,
 		build: buildAreaMarks
 	}))
@@ -80,9 +87,17 @@
 				fill-opacity={seg.patternId ? 1 : seg.alpha}
 				stroke={seg.stroke ?? 'none'}
 				data-plot-element="area"
+				data-plot-area
+				data-plot-area-sign={seg.sign}
 			/>
 			{#if seg.patternId}
-				<path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+				<path
+					d={seg.d}
+					fill="url(#{seg.patternId})"
+					data-plot-element="area"
+					data-plot-area
+					data-plot-area-sign={seg.sign}
+				/>
 			{/if}
 		{/each}
 		<!-- Invisible hit circles for tooltip: one per data point -->

package/dist/geoms/Area.svelte.d.ts

@@ -2,6 +2,8 @@ type Options = {
     /** @deprecated use `position="stack"` — kept as an alias. */
     stack?: boolean;
     curve?: 'linear' | 'smooth' | 'step';
+    /** Data-space value to anchor/split the fill at; splits the area into above/below segments. */
+    baseline?: number;
 };
 type Props = {
     x?: string;

package/dist/geoms/Bar.svelte

@@ -4,6 +4,7 @@
 	import type { createCrossFilter } from '../crossfilter/createCrossFilter.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildBarMarks } from './lib/marks/bar.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -60,14 +61,6 @@
 	// `options.stack: true` is the back-compat alias for position='stack'.
 	const resolvedPosition = $derived(position ?? (options?.stack ? 'stack' : 'dodge'))
 
-	function resolveLabel(data: Row, defaultField: string | undefined): string | null {
-		if (!label) return null
-		if (label === true) return String((defaultField ? data[defaultField] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		if (typeof label === 'string') return String(data[label] ?? '')
-		return null
-	}
-
 	/**
 	 * Pick white or dark text based on perceived luminance of a hex fill color.
 	 */
@@ -198,7 +191,7 @@
 				/>
 			{/if}
 			{#if label}
-				{@const text = resolveLabel(bar.data, effectiveOrientation === 'horizontal' ? x : y)}
+				{@const text = resolveLabel(label, bar.data, effectiveOrientation === 'horizontal' ? x : y)}
 				{#if text}
 					{#if effectiveOrientation === 'horizontal'}
 						{#if options.labelInside}

package/dist/geoms/Highlight.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { resolveHighlight } from '../lib/highlight.js'
 	import { scalePos } from '../lib/scale.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 
 	type Row = Record<string, unknown>
 	type Props = {
@@ -52,12 +53,6 @@
 		return out.filter((m) => Number.isFinite(m.cx) && Number.isFinite(m.cy))
 	})
 
-	function resolveLabel(row: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? row[y] : '') ?? '')
-		if (typeof label === 'function') return String(label(row) ?? '')
-		return String(row[label] ?? '')
-	}
 </script>
 
 {#if marks.length}
@@ -70,7 +65,7 @@
 				data-plot-selected={m.selected ? 'true' : undefined}
 			/>
 			{#if label}
-				{@const text = resolveLabel(m.row)}
+				{@const text = resolveLabel(label, m.row, y)}
 				{#if text}
 					<text x={m.cx} y={m.cy} dy="-8" text-anchor="middle" data-plot-highlight-label
 						>{text}</text

package/dist/geoms/Line.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildLineMarks } from './lib/marks/line.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
@@ -47,13 +48,6 @@
 		keyboard = false
 	}: Props = $props()
 
-	function resolveLabel(data: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? data[y] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		return typeof label === 'string' ? String(data[label] ?? '') : null
-	}
-
 	const plotState = getContext<PlotState>('plot-state')
 
 	const geom = new GeomState(plotState, () => ({
@@ -113,7 +107,7 @@
 			{/if}
 			{#if label}
 				{#each seg.points as pt (`label::${pt.i}`)}
-					{@const text = resolveLabel(pt.data)}
+					{@const text = resolveLabel(label, pt.data, y)}
 					{#if text}
 						<LabelPill
 							x={pt.x + (options.labelOffset?.x ?? 0)}

package/dist/geoms/Point.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildPointMarks } from './lib/marks/point.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -49,13 +50,6 @@
 		keyboard = false
 	}: Props = $props()
 
-	function resolveLabel(data: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? data[y] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		return typeof label === 'string' ? String(data[label] ?? '') : null
-	}
-
 	const plotState = getContext<PlotState>('plot-state')
 
 	// All plumbing (register/data/scales/colors) + mark building (geometry + fill/color/alpha)
@@ -141,7 +135,7 @@
 				/>
 			{/if}
 			{#if label}
-				{@const text = resolveLabel(pt.data)}
+				{@const text = resolveLabel(label, pt.data, y)}
 				{#if text}
 					<LabelPill
 						x={pt.cx + (options.labelOffset?.x ?? 0)}

package/dist/geoms/Radar.svelte

@@ -0,0 +1,352 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildRadarMarks, resolveRadarRadius } from './lib/marks/radar.js'
+	import { buildRadarLayout } from '../lib/brewing/polar.js'
+	import { buildSelectDetail } from '../lib/select.js'
+
+	type Row = Record<string, unknown>
+
+	type AxisSpec = {
+		key: string
+		label?: string
+		unit?: string
+		domain?: [number, number]
+		ticks?: number
+		tickLabels?: string[]
+		format?: (value: number) => unknown
+		weight?: number
+	}
+
+	// The shape `buildRadarMarks` documents in its `@returns`. Other geoms leave `geom.marks`
+	// untyped because they only ever spread it in a template; this one also reads it in script
+	// (see `strokeBySeries`), which needs a real element type.
+	type RadarMark = {
+		d: string
+		fill: string
+		stroke: string
+		alpha: number
+		key: string
+		patternId: string | null
+	}
+
+	type Options = {
+		grid?: boolean
+		rings?: number
+		sharedDomain?: boolean
+		radiusScale?: 'linear' | 'sqrt' | 'auto'
+		/** Alias for the `axes` prop, for callers that can only reach `options` — notably
+		 *  Plot's spec-driven path, whose passthrough is a fixed prop list. */
+		axes?: (string | AxisSpec)[]
+	}
+
+	type Props = {
+		axes?: (string | AxisSpec)[]
+		axis?: string
+		value?: string
+		series?: string
+		/** Generic-pipeline aliases for `axis`/`value`/`series`. Radar's own names say what
+		 *  the channels mean here (an axis is not an x position), but Plot's spec-driven
+		 *  path passes only the generic set, so these let a spec drive radar too. The
+		 *  specific names win when both are given. */
+		x?: string
+		y?: string
+		color?: string
+		pattern?: string
+		/** Fixed area opacity 0–1; defaults to the per-geom preset (radar = 0.25). */
+		alpha?: number
+		stat?: string
+		options?: Options
+		onselect?: (data: Row) => void
+	}
+
+	let {
+		axes: axesProp,
+		axis: axisProp,
+		value: valueProp,
+		series: seriesProp,
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		pattern,
+		alpha,
+		stat = 'identity',
+		options = {},
+		onselect = undefined
+	}: Props = $props()
+
+	// Radar's own channel names take precedence; the generic ones are the fallback so a
+	// spec-driven <Plot> (which passes only x/y/color) can drive this geom too.
+	const axis = $derived(axisProp ?? x)
+	const value = $derived(valueProp ?? y)
+	const series = $derived(seriesProp ?? color)
+	const axes = $derived(axesProp ?? options.axes)
+
+	const LABEL_GAP = 12
+	const ZERO_MARKER_HALF_SPAN_DEG = 6
+	const VERTEX_RADIUS = 3
+
+	const plotState = getContext<PlotState>('plot-state')
+
+	const geom = new GeomState(plotState, () => ({
+		type: 'radar',
+		channels: { x: axis, y: value, color: series, pattern },
+		stat,
+		options: {
+			axes,
+			sharedDomain: options.sharedDomain,
+			rings: options.rings,
+			radiusScale: options.radiusScale
+		},
+		alpha,
+		build: buildRadarMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const marks: RadarMark[] = $derived(geom.marks)
+	const w = $derived(plotState.innerWidth)
+	const h = $derived(plotState.innerHeight)
+
+	// One shared definition of the radius AND of which form we're drawing — the adapter
+	// builds its polygons from the very same call, so the grid can no longer disagree
+	// with them. `micro` is derived from the space actually available rather than from
+	// "am I inside a Spark": that keeps the geom free of any container-specific branch
+	// (the spec's requirement) and correctly also covers a Plot too small for chrome.
+	//
+	// Deliberately NOT `plotState.interactive`, which the plan proposed: that is
+	// `Boolean(onselect) || selectable`, so an ordinary static <Plot> reads false too and
+	// would silently lose its rings, spokes and axis labels.
+	const geometry = $derived(resolveRadarRadius(w, h))
+	const R = $derived(geometry.R)
+	const micro = $derived(geometry.micro)
+
+	// Radar takes its own channel props — like `GeomState.marks`, this never falls back to the
+	// container's `x`/`y`. Without both `axis` and `value` there is nothing coherent to lay a
+	// polar grid out against, so no layout is computed at all (mirrors `buildRadarMarks`'s own
+	// `!channels?.x || !channels?.y` guard for the polygons).
+	const layout = $derived(
+		axis !== undefined && value !== undefined
+			? buildRadarLayout(
+					geom.data,
+					{ x: axis, y: value, color: series },
+					{
+						axes,
+						sharedDomain: options.sharedDomain,
+						rings: options.rings,
+						radiusScale: options.radiusScale,
+						R
+					}
+				)
+			: null
+	)
+
+	function toXY(angleDeg: number, radius: number) {
+		const rad = (angleDeg * Math.PI) / 180
+		return { x: radius * Math.cos(rad), y: radius * Math.sin(rad) }
+	}
+
+	// cos(angle) is within float error of 0 only at true vertical (±90°, top/bottom); every
+	// other axis angle sits comfortably to one side, so a tight epsilon can't misclassify a
+	// real left/right axis as 'middle'.
+	function anchorFor(angleDeg: number): 'start' | 'middle' | 'end' {
+		const cosA = Math.cos((angleDeg * Math.PI) / 180)
+		if (Math.abs(cosA) < 1e-6) return 'middle'
+		return cosA > 0 ? 'start' : 'end'
+	}
+
+	// `buildRadarMarks` keys every mark `${seriesKey}::fill` / `${seriesKey}::stroke` so paint
+	// order (all fills, then all strokes) is inspectable from the key alone; this recovers the
+	// series value from that key for the `data-plot-series` hook.
+	function seriesOf(key: string) {
+		return key.slice(0, key.lastIndexOf('::'))
+	}
+
+	// Series stroke colour, recovered from the adapter's stroke marks (the ones with no fill)
+	// rather than re-resolving the palette here. A vertex dot has to match its own polygon's
+	// outline, and the only way to guarantee that is to read the same value the outline used.
+	const strokeBySeries = $derived(
+		new Map(
+			marks.filter((mark) => mark.fill === 'none').map((mark) => [seriesOf(mark.key), mark.stroke])
+		)
+	)
+
+	// A vertex is reachable when either the geom was handed its own callback or the plot is
+	// running interactively. Deliberately NOT the `keyboardNav` action: that walks a 1-D
+	// category list in DOM order, and radar's vertices are a 2-D series × axis grid, so
+	// left/right traversal has no meaning here. Tab reach plus Enter/Space, like Point/Arc.
+	const reachable = $derived(Boolean(onselect) || plotState.interactive)
+
+	function selectVertex(row: Row, seriesKey: unknown, event: MouseEvent | KeyboardEvent) {
+		onselect?.(row)
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(
+					row,
+					// `row` is one of the container's original row objects — averaging happens
+					// inside polar.js precisely so this lookup resolves instead of returning -1.
+					plotState.data.indexOf(row),
+					{ x: axis, y: value },
+					'radar',
+					seriesKey,
+					event
+				)
+			)
+	}
+
+	// A short dashed arc at the radius where value 0 sits on this one spoke — see
+	// `zeroRingFor`'s doc comment for why this can't just be a shared ring.
+	function zeroMarkerPath(angleDeg: number, radius: number) {
+		const p1 = toXY(angleDeg - ZERO_MARKER_HALF_SPAN_DEG, radius)
+		const p2 = toXY(angleDeg + ZERO_MARKER_HALF_SPAN_DEG, radius)
+		return `M${p1.x},${p1.y} A${radius},${radius} 0 0 1 ${p2.x},${p2.y}`
+	}
+</script>
+
+<g data-plot-geom="radar" transform="translate({w / 2}, {h / 2})">
+	{#if layout && options.grid && !micro}
+		{#each layout.rings as ring, i (i)}
+			<circle data-plot-element="radar-grid-ring" cx="0" cy="0" r={ring.radius} />
+		{/each}
+		{#each layout.axes as ax, i (ax.key)}
+			{@const { x: sx, y: sy } = toXY(layout.angles[i], layout.radius)}
+			<line
+				data-plot-element="radar-grid-spoke"
+				data-plot-axis={ax.key}
+				x1="0"
+				y1="0"
+				x2={sx}
+				y2={sy}
+			/>
+		{/each}
+		{#each layout.zeroRings as zr, i (i)}
+			{#if zr !== null}
+				<path data-plot-element="radar-zero-ring" d={zeroMarkerPath(layout.angles[i], zr)} />
+			{/if}
+		{/each}
+		{#if layout.axes.length > 0}
+			{#each layout.rings as ring, ringIndex (ringIndex)}
+				{@const { x: lx, y: ly } = toXY(layout.angles[0], ring.radius)}
+				<text class="radar-ring-label" x={lx} y={ly} dy="-2">{ring.labels[0]}</text>
+			{/each}
+		{/if}
+	{/if}
+
+	{#each marks as mark (mark.key)}
+		{#if mark.fill !== 'none'}
+			<path
+				d={mark.d}
+				fill={mark.fill}
+				fill-opacity={mark.alpha}
+				stroke="none"
+				data-plot-element="radar-area"
+				data-plot-series={seriesOf(mark.key)}
+			/>
+			{#if mark.patternId}
+				<path
+					d={mark.d}
+					fill="url(#{mark.patternId})"
+					stroke="none"
+					pointer-events="none"
+					data-plot-element="radar-area"
+					data-plot-series={seriesOf(mark.key)}
+				/>
+			{/if}
+		{:else}
+			<path
+				d={mark.d}
+				fill="none"
+				stroke={mark.stroke}
+				stroke-width="2"
+				data-plot-element="radar-outline"
+				data-plot-series={seriesOf(mark.key)}
+			/>
+		{/if}
+	{/each}
+
+	{#if layout && !micro}
+		{#each [...layout.series] as [seriesKey, seriesVertices] (seriesKey)}
+			{#each seriesVertices as vertex, i (i)}
+				<!-- A null vertex is a genuine gap in the data — no reading for this (series, axis)
+				     cell — so it renders as nothing at all. Plotting it at the centre would invent
+				     a zero the source never contained. -->
+				{#if vertex}
+					{@const { x: vx, y: vy } = toXY(vertex.angle, vertex.radius)}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<circle
+						data-plot-element="radar-vertex"
+						data-plot-series={String(seriesKey)}
+						data-plot-axis={vertex.axisKey}
+						cx={vx}
+						cy={vy}
+						r={VERTEX_RADIUS}
+						fill={strokeBySeries.get(String(seriesKey))}
+						role={reachable ? 'button' : 'graphics-symbol'}
+						tabindex={reachable ? 0 : undefined}
+						style:cursor={reachable ? 'pointer' : undefined}
+						aria-label="{layout.axes[i].displayLabel}, {vertex.value}"
+						onmouseenter={() => plotState.setHovered(vertex.row)}
+						onmouseleave={() => plotState.clearHovered()}
+						onclick={reachable ? (e) => selectVertex(vertex.row, seriesKey, e) : undefined}
+						onkeydown={reachable
+							? (e) =>
+									(e.key === 'Enter' || e.key === ' ') && selectVertex(vertex.row, seriesKey, e)
+							: undefined}
+					/>
+				{/if}
+			{/each}
+		{/each}
+	{/if}
+
+	{#if layout && !micro}
+		{#each layout.axes as ax, i (ax.key)}
+			{@const { x: lx, y: ly } = toXY(layout.angles[i], layout.radius + LABEL_GAP)}
+			<text
+				data-plot-element="radar-axis-label"
+				data-plot-axis={ax.key}
+				x={lx}
+				y={ly}
+				text-anchor={anchorFor(layout.angles[i])}
+				dominant-baseline="central">{ax.displayLabel}</text
+			>
+		{/each}
+	{/if}
+</g>
+
+<style>
+	[data-plot-element='radar-grid-ring'] {
+		fill: none;
+		stroke: var(--chart-grid-color, currentColor);
+		stroke-width: var(--chart-grid-width, 1);
+		stroke-dasharray: var(--chart-grid-dash, 2 4);
+		opacity: var(--chart-grid-opacity, 0.15);
+		pointer-events: none;
+	}
+	[data-plot-element='radar-grid-spoke'] {
+		stroke: var(--chart-grid-color, currentColor);
+		stroke-width: var(--chart-grid-width, 1);
+		opacity: var(--chart-grid-opacity, 0.15);
+		pointer-events: none;
+	}
+	[data-plot-element='radar-zero-ring'] {
+		fill: none;
+		stroke: var(--chart-grid-color, currentColor);
+		stroke-width: var(--chart-grid-width, 1);
+		stroke-dasharray: 3 3;
+		opacity: 0.5;
+		pointer-events: none;
+	}
+	[data-plot-element='radar-axis-label'] {
+		font-size: 11px;
+		fill: currentColor;
+		pointer-events: none;
+	}
+	.radar-ring-label {
+		font-size: 9px;
+		fill: currentColor;
+		opacity: 0.6;
+		pointer-events: none;
+	}
+</style>