From 760cc660ff48d2f78dfd5cd65de00fc3a688b32a Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 5 Feb 2026 23:42:26 +0000
Subject: [PATCH 1/4] feat: add RadarChart component for spider/radar
 visualizations

Co-Authored-By: Caleb Keller <calebmkeller@gmail.com>
---
 .../src/lib/unsorted/viz/index.js             |   2 +
 .../src/lib/unsorted/viz/radar/Radar.svelte   | 243 ++++++++++++++++++
 .../lib/unsorted/viz/radar/RadarChart.svelte  | 125 +++++++++
 3 files changed, 370 insertions(+)
 create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/index.js b/packages/ui/core-components/src/lib/unsorted/viz/index.js
index 2759ded702..3d830ad605 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/viz/index.js
@@ -24,6 +24,8 @@ export { default as Histogram } from './histogram/Histogram.svelte';
 export { default as Hist } from './histogram/Hist.svelte';
 export { default as LineChart } from './line/LineChart.svelte';
 export { default as Line } from './line/Line.svelte';
+export { default as RadarChart } from './radar/RadarChart.svelte';
+export { default as Radar } from './radar/Radar.svelte';
 export { default as BaseMap } from './map/BaseMap.svelte';
 export { default as AreaMap } from './map/AreaMap.svelte';
 export { default as PointMap } from './map/PointMap.svelte';
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte
new file mode 100644
index 0000000000..8959c6b9f5
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte
@@ -0,0 +1,243 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { getContext, beforeUpdate } from 'svelte';
+	import { propKey, configKey } from '@evidence-dev/component-utilities/chartContext';
+	let props = getContext(propKey);
+	let config = getContext(configKey);
+
+	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
+	import { getThemeStores } from '../../../themes/themes.js';
+	import { toBoolean } from '$lib/utils.js';
+
+	const { resolveColor } = getThemeStores();
+
+	import {
+		formatValue,
+		getFormatObjectFromString
+	} from '@evidence-dev/component-utilities/formatting';
+
+	export let y = undefined;
+	const ySet = y ? true : false;
+	export let series = undefined;
+	const seriesSet = series ? true : false;
+	export let options = undefined;
+	export let name = undefined;
+
+	export let fillColor = undefined;
+	$: fillColorStore = resolveColor(fillColor);
+
+	export let fillOpacity = 0.3;
+
+	export let lineColor = undefined;
+	$: lineColorStore = resolveColor(lineColor);
+
+	export let lineWidth = 2;
+
+	export let markers = false;
+	$: markers = toBoolean(markers);
+	export let markerShape = 'circle';
+	export let markerSize = 8;
+
+	export let labels = false;
+	$: labels = toBoolean(labels);
+	export let labelSize = 11;
+	export let labelPosition = 'top';
+
+	export let labelColor = undefined;
+	$: labelColorStore = resolveColor(labelColor);
+
+	export let labelFmt = undefined;
+	let labelFormat;
+	if (labelFmt) {
+		labelFormat = getFormatObjectFromString(labelFmt);
+	}
+	export let showAllLabels = false;
+	$: showAllLabels = toBoolean(showAllLabels);
+
+	export let seriesOrder = undefined;
+
+	export let shape = 'polygon';
+	export let max = undefined;
+
+	$: data = $props.data;
+	$: x = $props.x;
+	$: y = ySet ? y : $props.y;
+	$: yFormat = $props.yFormat;
+	$: columnSummary = $props.columnSummary;
+	$: series = seriesSet ? series : $props.series;
+
+	let indicators = [];
+	let seriesConfig = [];
+
+	$: {
+		indicators = [];
+		seriesConfig = [];
+
+		if (data && x && y) {
+			const xValues = getDistinctValues(data, x);
+
+			let maxValues = {};
+			if (typeof y === 'object') {
+				for (const yCol of y) {
+					for (const row of data) {
+						const xVal = row[x];
+						const yVal = row[yCol];
+						if (yVal !== null && yVal !== undefined) {
+							if (!maxValues[xVal] || yVal > maxValues[xVal]) {
+								maxValues[xVal] = yVal;
+							}
+						}
+					}
+				}
+			} else {
+				for (const row of data) {
+					const xVal = row[x];
+					const yVal = row[y];
+					if (yVal !== null && yVal !== undefined) {
+						if (!maxValues[xVal] || yVal > maxValues[xVal]) {
+							maxValues[xVal] = yVal;
+						}
+					}
+				}
+			}
+
+			indicators = xValues.map((xVal) => ({
+				name: xVal,
+				max: max !== undefined ? max : maxValues[xVal] * 1.1
+			}));
+
+			if (series) {
+				const seriesDistinct = getDistinctValues(data, series);
+
+				for (const seriesVal of seriesDistinct) {
+					const filteredData = data.filter((d) => d[series] === seriesVal);
+
+					let values = [];
+					if (typeof y === 'object') {
+						for (const xVal of xValues) {
+							const row = filteredData.find((d) => d[x] === xVal);
+							let sum = 0;
+							for (const yCol of y) {
+								sum += row ? (row[yCol] ?? 0) : 0;
+							}
+							values.push(sum);
+						}
+					} else {
+						for (const xVal of xValues) {
+							const row = filteredData.find((d) => d[x] === xVal);
+							values.push(row ? (row[y] ?? 0) : 0);
+						}
+					}
+
+					seriesConfig.push({
+						name: seriesVal ?? 'null',
+						value: values
+					});
+				}
+			} else if (typeof y === 'object') {
+				for (const yCol of y) {
+					let values = [];
+					for (const xVal of xValues) {
+						const row = data.find((d) => d[x] === xVal);
+						values.push(row ? (row[yCol] ?? 0) : 0);
+					}
+					seriesConfig.push({
+						name: columnSummary[yCol]?.title ?? yCol,
+						value: values
+					});
+				}
+			} else {
+				let values = [];
+				for (const xVal of xValues) {
+					const row = data.find((d) => d[x] === xVal);
+					values.push(row ? (row[y] ?? 0) : 0);
+				}
+				seriesConfig.push({
+					name: name ?? columnSummary[y]?.title ?? y,
+					value: values
+				});
+			}
+		}
+
+		if (seriesOrder) {
+			seriesConfig.sort((a, b) => seriesOrder.indexOf(a.name) - seriesOrder.indexOf(b.name));
+		}
+	}
+
+	$: baseConfig = {
+		type: 'radar',
+		areaStyle: {
+			color: $fillColorStore,
+			opacity: fillOpacity
+		},
+		lineStyle: {
+			width: parseInt(lineWidth),
+			color: $lineColorStore
+		},
+		itemStyle: {
+			color: $lineColorStore
+		},
+		label: {
+			show: labels,
+			formatter: function (params) {
+				return formatValue(params.value, labelFormat ?? yFormat);
+			},
+			fontSize: labelSize,
+			color: $labelColorStore,
+			position: labelPosition,
+			padding: 3
+		},
+		labelLayout: {
+			hideOverlap: showAllLabels ? false : true
+		},
+		emphasis: {
+			focus: 'series',
+			lineStyle: {
+				width: 3
+			}
+		},
+		showSymbol: labels || markers,
+		symbol: markerShape,
+		symbolSize: labels && !markers ? 0 : markerSize
+	};
+
+	$: radarSeries = seriesConfig.map((s) => ({
+		...baseConfig,
+		name: s.name,
+		data: [{ name: s.name, value: s.value }]
+	}));
+
+	$: config.update((d) => {
+		d.series.push(...radarSeries);
+		d.legend.data.push(...radarSeries.map((s) => s.name.toString()));
+		return d;
+	});
+
+	$: if (options) {
+		config.update((d) => {
+			return { ...d, ...options };
+		});
+	}
+
+	beforeUpdate(() => {
+		config.update((d) => {
+			d.radar = {
+				indicator: indicators,
+				shape: shape
+			};
+
+			d.xAxis = { show: false };
+			d.yAxis = [{ show: false }];
+			d.grid = { show: false };
+
+			if (labels) {
+				d.axisPointer = { triggerEmphasis: false };
+			}
+
+			return d;
+		});
+	});
+</script>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
new file mode 100644
index 0000000000..8b4c262e9d
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
@@ -0,0 +1,125 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { getThemeStores } from '../../../themes/themes.js';
+
+	import Chart from '../core/Chart.svelte';
+	import Radar from './Radar.svelte';
+	import { toBoolean } from '$lib/utils.js';
+
+	const { resolveColor, resolveColorsObject, resolveColorPalette } = getThemeStores();
+
+	export let data = undefined;
+	export let x = undefined;
+	export let y = undefined;
+	export let series = undefined;
+
+	export let yFmt = undefined;
+	export let xFmt = undefined;
+
+	export let title = undefined;
+	export let subtitle = undefined;
+	export let legend = undefined;
+	export let chartAreaHeight = undefined;
+
+	export let fillColor = undefined;
+	$: fillColorStore = resolveColor(fillColor);
+
+	export let fillOpacity = undefined;
+
+	export let lineColor = undefined;
+	$: lineColorStore = resolveColor(lineColor);
+
+	export let lineWidth = undefined;
+
+	export let markers = undefined;
+	export let markerShape = undefined;
+	export let markerSize = undefined;
+
+	export let labels = undefined;
+	export let labelSize = undefined;
+	export let labelPosition = undefined;
+
+	export let labelColor = undefined;
+	$: labelColorStore = resolveColor(labelColor);
+
+	export let labelFmt = undefined;
+	export let showAllLabels = undefined;
+
+	export let colorPalette = 'default';
+	$: colorPaletteStore = resolveColorPalette(colorPalette);
+
+	export let echartsOptions = undefined;
+	export let seriesOptions = undefined;
+	/** @type {Boolean} */
+	export let printEchartsConfig = false;
+	$: printEchartsConfig = toBoolean(printEchartsConfig);
+
+	export let emptySet = undefined;
+	export let emptyMessage = undefined;
+
+	export let renderer = undefined;
+	/** @type {Boolean | undefined} */
+	export let downloadableData = undefined;
+	$: downloadableData = toBoolean(downloadableData);
+	/** @type {Boolean | undefined} */
+	export let downloadableImage = undefined;
+	$: downloadableImage = toBoolean(downloadableImage);
+
+	export let seriesColors = undefined;
+	$: seriesColorsStore = resolveColorsObject(seriesColors);
+
+	export let seriesOrder = undefined;
+
+	export let connectGroup = undefined;
+
+	export let shape = undefined;
+	export let max = undefined;
+</script>
+
+<Chart
+	{data}
+	{x}
+	{y}
+	{xFmt}
+	{yFmt}
+	{series}
+	{legend}
+	{title}
+	{subtitle}
+	chartType="Radar Chart"
+	{chartAreaHeight}
+	colorPalette={colorPaletteStore}
+	{echartsOptions}
+	{seriesOptions}
+	{printEchartsConfig}
+	{emptySet}
+	{emptyMessage}
+	{renderer}
+	{downloadableData}
+	{downloadableImage}
+	{connectGroup}
+	seriesColors={seriesColorsStore}
+>
+	<Radar
+		fillColor={fillColorStore}
+		lineColor={lineColorStore}
+		{fillOpacity}
+		{lineWidth}
+		{markers}
+		{markerShape}
+		{markerSize}
+		{labels}
+		{labelSize}
+		{labelPosition}
+		labelColor={labelColorStore}
+		{labelFmt}
+		{showAllLabels}
+		{seriesOrder}
+		{shape}
+		{max}
+	/>
+	<slot />
+</Chart>

From 60676f3c1c19e504f2d21c9317e807d645d011a5 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 00:02:26 +0000
Subject: [PATCH 2/4] refactor: rewrite RadarChart to use direct ECharts config
 (like Sankey)

- Rewrote RadarChart to follow the Sankey pattern with direct ECharts config
- Renamed inner component to InnerRadarChart.svelte
- Removed old Radar.svelte that used Chart wrapper (incompatible with radar coordinate system)
- Fixed lint errors and formatting

Co-Authored-By: Caleb Keller <calebmkeller@gmail.com>
---
 .../src/lib/unsorted/viz/index.js             |   1 -
 .../unsorted/viz/radar/InnerRadarChart.svelte | 362 ++++++++++++++++++
 .../src/lib/unsorted/viz/radar/Radar.svelte   | 243 ------------
 .../lib/unsorted/viz/radar/RadarChart.svelte  | 135 ++-----
 4 files changed, 387 insertions(+), 354 deletions(-)
 create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/radar/InnerRadarChart.svelte
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/index.js b/packages/ui/core-components/src/lib/unsorted/viz/index.js
index 3d830ad605..6f03b9f992 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/viz/index.js
@@ -25,7 +25,6 @@ export { default as Hist } from './histogram/Hist.svelte';
 export { default as LineChart } from './line/LineChart.svelte';
 export { default as Line } from './line/Line.svelte';
 export { default as RadarChart } from './radar/RadarChart.svelte';
-export { default as Radar } from './radar/Radar.svelte';
 export { default as BaseMap } from './map/BaseMap.svelte';
 export { default as AreaMap } from './map/AreaMap.svelte';
 export { default as PointMap } from './map/PointMap.svelte';
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/radar/InnerRadarChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/InnerRadarChart.svelte
new file mode 100644
index 0000000000..0fcea6add0
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/radar/InnerRadarChart.svelte
@@ -0,0 +1,362 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { ECharts } from '@evidence-dev/core-components';
+	import { strictBuild } from '@evidence-dev/component-utilities/chartContext';
+
+	import {
+		formatValue,
+		getFormatObjectFromString
+	} from '@evidence-dev/component-utilities/formatting';
+	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
+	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
+	import { ErrorChart } from '@evidence-dev/core-components';
+	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
+	import { getThemeStores } from '../../../themes/themes.js';
+	import { toBoolean } from '$lib/utils.js';
+
+	const { resolveColor, resolveColorPalette } = getThemeStores();
+
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
+	$: printEchartsConfig = toBoolean(printEchartsConfig);
+
+	export let colorPalette = 'default';
+	$: colorPaletteStore = resolveColorPalette(colorPalette);
+
+	export let data = undefined;
+	export let x = undefined;
+	export let y = undefined;
+	export let series = undefined;
+
+	export let title = undefined;
+	export let subtitle = undefined;
+	export let legend = true;
+	$: legend = toBoolean(legend);
+
+	export let yFmt = undefined;
+	let yFormat;
+
+	export let fillColor = undefined;
+	$: fillColorStore = resolveColor(fillColor);
+
+	export let fillOpacity = 0.3;
+
+	export let lineColor = undefined;
+	$: lineColorStore = resolveColor(lineColor);
+
+	export let lineWidth = 2;
+
+	export let markers = false;
+	$: markers = toBoolean(markers);
+	export let markerShape = 'circle';
+	export let markerSize = 8;
+
+	export let labels = false;
+	$: labels = toBoolean(labels);
+	export let labelSize = 11;
+	export let labelPosition = 'top';
+
+	export let labelColor = undefined;
+	$: labelColorStore = resolveColor(labelColor);
+
+	export let labelFmt = undefined;
+	let labelFormat;
+
+	export let showAllLabels = false;
+	$: showAllLabels = toBoolean(showAllLabels);
+
+	export let seriesOrder = undefined;
+
+	export let shape = 'polygon';
+	export let max = undefined;
+
+	// Chart area sizing
+	export let chartAreaHeight = '300';
+	let hasTitle;
+	let hasSubtitle;
+	let hasLegend;
+	let titleFontSize;
+	let subtitleFontSize;
+	let titleBoxPadding;
+	let titleBoxHeight;
+	let chartAreaPaddingTop;
+	let chartAreaPaddingBottom;
+	let legendHeight;
+	let legendPaddingTop;
+	let legendTop;
+	let chartTop;
+	let chartBottom;
+	let chartContainerHeight;
+
+	let height = '400px';
+	let width = '100%';
+
+	let columnSummary;
+	let error;
+	let config;
+
+	$: try {
+		error = undefined;
+
+		checkInputs(data);
+
+		columnSummary = getColumnSummary(data);
+		const columnNames = Object.keys(columnSummary);
+
+		// Default x to first column if not provided
+		if (!x) {
+			x = columnNames[0];
+		}
+
+		// Default y to first numeric column if not provided
+		if (!y) {
+			const numericCols = columnNames.filter(
+				(col) => col !== x && col !== series && columnSummary[col].type === 'number'
+			);
+			y = numericCols.length > 1 ? numericCols : numericCols[0];
+		}
+
+		checkInputs(data, [x, y], [series]);
+
+		// Get format objects
+		yFormat = yFmt
+			? getFormatObjectFromString(yFmt)
+			: columnSummary[typeof y === 'object' ? y[0] : y]?.format;
+		if (labelFmt) {
+			labelFormat = getFormatObjectFromString(labelFmt);
+		}
+
+		// Build indicators and series data
+		const xValues = getDistinctValues(data, x);
+
+		// Calculate max values for each indicator
+		let maxValues = {};
+		if (typeof y === 'object') {
+			for (const yCol of y) {
+				for (const row of data) {
+					const xVal = row[x];
+					const yVal = row[yCol];
+					if (yVal !== null && yVal !== undefined) {
+						if (!maxValues[xVal] || yVal > maxValues[xVal]) {
+							maxValues[xVal] = yVal;
+						}
+					}
+				}
+			}
+		} else {
+			for (const row of data) {
+				const xVal = row[x];
+				const yVal = row[y];
+				if (yVal !== null && yVal !== undefined) {
+					if (!maxValues[xVal] || yVal > maxValues[xVal]) {
+						maxValues[xVal] = yVal;
+					}
+				}
+			}
+		}
+
+		const indicators = xValues.map((xVal) => ({
+			name: xVal,
+			max: max !== undefined ? max : maxValues[xVal] * 1.1
+		}));
+
+		// Build series config
+		let seriesData = [];
+
+		if (series) {
+			const seriesDistinct = getDistinctValues(data, series);
+
+			for (const seriesVal of seriesDistinct) {
+				const filteredData = data.filter((d) => d[series] === seriesVal);
+
+				let values = [];
+				if (typeof y === 'object') {
+					for (const xVal of xValues) {
+						const row = filteredData.find((d) => d[x] === xVal);
+						let sum = 0;
+						for (const yCol of y) {
+							sum += row ? (row[yCol] ?? 0) : 0;
+						}
+						values.push(sum);
+					}
+				} else {
+					for (const xVal of xValues) {
+						const row = filteredData.find((d) => d[x] === xVal);
+						values.push(row ? (row[y] ?? 0) : 0);
+					}
+				}
+
+				seriesData.push({
+					name: seriesVal ?? 'null',
+					value: values
+				});
+			}
+		} else if (typeof y === 'object') {
+			for (const yCol of y) {
+				let values = [];
+				for (const xVal of xValues) {
+					const row = data.find((d) => d[x] === xVal);
+					values.push(row ? (row[yCol] ?? 0) : 0);
+				}
+				seriesData.push({
+					name: columnSummary[yCol]?.title ?? yCol,
+					value: values
+				});
+			}
+		} else {
+			let values = [];
+			for (const xVal of xValues) {
+				const row = data.find((d) => d[x] === xVal);
+				values.push(row ? (row[y] ?? 0) : 0);
+			}
+			seriesData.push({
+				name: columnSummary[y]?.title ?? y,
+				value: values
+			});
+		}
+
+		if (seriesOrder) {
+			seriesData.sort((a, b) => seriesOrder.indexOf(a.name) - seriesOrder.indexOf(b.name));
+		}
+
+		// Chart area sizing
+		if (chartAreaHeight) {
+			chartAreaHeight = Number(chartAreaHeight);
+			if (isNaN(chartAreaHeight)) {
+				throw Error('chartAreaHeight must be a number');
+			} else if (chartAreaHeight <= 0) {
+				throw Error('chartAreaHeight must be a positive number');
+			}
+		} else {
+			chartAreaHeight = 300;
+		}
+
+		hasTitle = title ? true : false;
+		hasSubtitle = subtitle ? true : false;
+		hasLegend = legend && seriesData.length > 1;
+
+		titleFontSize = 15;
+		subtitleFontSize = 13;
+		titleBoxPadding = 6 * hasSubtitle;
+		titleBoxHeight =
+			hasTitle * titleFontSize +
+			hasSubtitle * subtitleFontSize +
+			titleBoxPadding * Math.max(hasTitle, hasSubtitle);
+
+		chartAreaPaddingTop = 10;
+		chartAreaPaddingBottom = 10;
+
+		legendHeight = 15;
+		legendHeight = legendHeight * hasLegend;
+
+		legendPaddingTop = 7;
+		legendPaddingTop = legendPaddingTop * Math.max(hasTitle, hasSubtitle);
+
+		legendTop = titleBoxHeight + legendPaddingTop;
+		chartTop = legendTop + legendHeight + chartAreaPaddingTop;
+		chartBottom = chartAreaPaddingBottom;
+
+		chartContainerHeight = chartAreaHeight + chartTop + chartBottom;
+
+		height = chartContainerHeight + 'px';
+		width = '100%';
+
+		// Build ECharts series
+		const radarSeries = seriesData.map((s, index) => ({
+			type: 'radar',
+			name: s.name,
+			data: [{ name: s.name, value: s.value }],
+			areaStyle: {
+				color: $fillColorStore ?? $colorPaletteStore?.[index % $colorPaletteStore?.length],
+				opacity: fillOpacity
+			},
+			lineStyle: {
+				width: parseInt(lineWidth),
+				color: $lineColorStore ?? $colorPaletteStore?.[index % $colorPaletteStore?.length]
+			},
+			itemStyle: {
+				color: $lineColorStore ?? $colorPaletteStore?.[index % $colorPaletteStore?.length]
+			},
+			label: {
+				show: labels,
+				formatter: function (params) {
+					const val = params.value;
+					if (Array.isArray(val)) {
+						return val.map((v) => formatValue(v, labelFormat ?? yFormat)).join(', ');
+					}
+					return formatValue(val, labelFormat ?? yFormat);
+				},
+				fontSize: labelSize,
+				color: $labelColorStore,
+				position: labelPosition,
+				padding: 3
+			},
+			labelLayout: {
+				hideOverlap: showAllLabels ? false : true
+			},
+			emphasis: {
+				focus: 'series',
+				lineStyle: {
+					width: 3
+				}
+			},
+			showSymbol: labels || markers,
+			symbol: markerShape,
+			symbolSize: labels && !markers ? 0 : markerSize
+		}));
+
+		config = {
+			title: {
+				text: title,
+				subtext: subtitle,
+				subtextStyle: {
+					width: width
+				}
+			},
+			tooltip: {
+				trigger: 'item',
+				formatter: function (params) {
+					if (!params.value) return '';
+					const values = params.value;
+					let output = `<span style='font-weight: 600;'>${params.name}</span>`;
+					for (let i = 0; i < indicators.length; i++) {
+						output += `<br/>${indicators[i].name}: ${formatValue(values[i], yFormat)}`;
+					}
+					return output;
+				},
+				extraCssText:
+					'box-shadow: 0 3px 6px rgba(0,0,0,.15); box-shadow: 0 2px 4px rgba(0,0,0,.12); z-index: 1;'
+			},
+			legend: {
+				show: legend && seriesData.length > 1,
+				type: 'scroll',
+				top: legendTop,
+				padding: [0, 0, 0, 0],
+				data: seriesData.map((s) => s.name)
+			},
+			radar: {
+				indicator: indicators,
+				shape: shape,
+				center: ['50%', '55%'],
+				radius: '65%'
+			},
+			series: radarSeries,
+			color: $colorPaletteStore
+		};
+	} catch (e) {
+		error = e.message;
+		console.error('Error in RadarChart: ' + e.message);
+		if (strictBuild) {
+			throw error;
+		}
+	}
+</script>
+
+{#if error}
+	<ErrorChart chartType="Radar Chart" {error} />
+{:else}
+	<ECharts {data} {config} {width} {height} {echartsOptions} {printEchartsConfig} />
+{/if}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte
deleted file mode 100644
index 8959c6b9f5..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/viz/radar/Radar.svelte
+++ /dev/null
@@ -1,243 +0,0 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
-<script>
-	import { getContext, beforeUpdate } from 'svelte';
-	import { propKey, configKey } from '@evidence-dev/component-utilities/chartContext';
-	let props = getContext(propKey);
-	let config = getContext(configKey);
-
-	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
-	import { getThemeStores } from '../../../themes/themes.js';
-	import { toBoolean } from '$lib/utils.js';
-
-	const { resolveColor } = getThemeStores();
-
-	import {
-		formatValue,
-		getFormatObjectFromString
-	} from '@evidence-dev/component-utilities/formatting';
-
-	export let y = undefined;
-	const ySet = y ? true : false;
-	export let series = undefined;
-	const seriesSet = series ? true : false;
-	export let options = undefined;
-	export let name = undefined;
-
-	export let fillColor = undefined;
-	$: fillColorStore = resolveColor(fillColor);
-
-	export let fillOpacity = 0.3;
-
-	export let lineColor = undefined;
-	$: lineColorStore = resolveColor(lineColor);
-
-	export let lineWidth = 2;
-
-	export let markers = false;
-	$: markers = toBoolean(markers);
-	export let markerShape = 'circle';
-	export let markerSize = 8;
-
-	export let labels = false;
-	$: labels = toBoolean(labels);
-	export let labelSize = 11;
-	export let labelPosition = 'top';
-
-	export let labelColor = undefined;
-	$: labelColorStore = resolveColor(labelColor);
-
-	export let labelFmt = undefined;
-	let labelFormat;
-	if (labelFmt) {
-		labelFormat = getFormatObjectFromString(labelFmt);
-	}
-	export let showAllLabels = false;
-	$: showAllLabels = toBoolean(showAllLabels);
-
-	export let seriesOrder = undefined;
-
-	export let shape = 'polygon';
-	export let max = undefined;
-
-	$: data = $props.data;
-	$: x = $props.x;
-	$: y = ySet ? y : $props.y;
-	$: yFormat = $props.yFormat;
-	$: columnSummary = $props.columnSummary;
-	$: series = seriesSet ? series : $props.series;
-
-	let indicators = [];
-	let seriesConfig = [];
-
-	$: {
-		indicators = [];
-		seriesConfig = [];
-
-		if (data && x && y) {
-			const xValues = getDistinctValues(data, x);
-
-			let maxValues = {};
-			if (typeof y === 'object') {
-				for (const yCol of y) {
-					for (const row of data) {
-						const xVal = row[x];
-						const yVal = row[yCol];
-						if (yVal !== null && yVal !== undefined) {
-							if (!maxValues[xVal] || yVal > maxValues[xVal]) {
-								maxValues[xVal] = yVal;
-							}
-						}
-					}
-				}
-			} else {
-				for (const row of data) {
-					const xVal = row[x];
-					const yVal = row[y];
-					if (yVal !== null && yVal !== undefined) {
-						if (!maxValues[xVal] || yVal > maxValues[xVal]) {
-							maxValues[xVal] = yVal;
-						}
-					}
-				}
-			}
-
-			indicators = xValues.map((xVal) => ({
-				name: xVal,
-				max: max !== undefined ? max : maxValues[xVal] * 1.1
-			}));
-
-			if (series) {
-				const seriesDistinct = getDistinctValues(data, series);
-
-				for (const seriesVal of seriesDistinct) {
-					const filteredData = data.filter((d) => d[series] === seriesVal);
-
-					let values = [];
-					if (typeof y === 'object') {
-						for (const xVal of xValues) {
-							const row = filteredData.find((d) => d[x] === xVal);
-							let sum = 0;
-							for (const yCol of y) {
-								sum += row ? (row[yCol] ?? 0) : 0;
-							}
-							values.push(sum);
-						}
-					} else {
-						for (const xVal of xValues) {
-							const row = filteredData.find((d) => d[x] === xVal);
-							values.push(row ? (row[y] ?? 0) : 0);
-						}
-					}
-
-					seriesConfig.push({
-						name: seriesVal ?? 'null',
-						value: values
-					});
-				}
-			} else if (typeof y === 'object') {
-				for (const yCol of y) {
-					let values = [];
-					for (const xVal of xValues) {
-						const row = data.find((d) => d[x] === xVal);
-						values.push(row ? (row[yCol] ?? 0) : 0);
-					}
-					seriesConfig.push({
-						name: columnSummary[yCol]?.title ?? yCol,
-						value: values
-					});
-				}
-			} else {
-				let values = [];
-				for (const xVal of xValues) {
-					const row = data.find((d) => d[x] === xVal);
-					values.push(row ? (row[y] ?? 0) : 0);
-				}
-				seriesConfig.push({
-					name: name ?? columnSummary[y]?.title ?? y,
-					value: values
-				});
-			}
-		}
-
-		if (seriesOrder) {
-			seriesConfig.sort((a, b) => seriesOrder.indexOf(a.name) - seriesOrder.indexOf(b.name));
-		}
-	}
-
-	$: baseConfig = {
-		type: 'radar',
-		areaStyle: {
-			color: $fillColorStore,
-			opacity: fillOpacity
-		},
-		lineStyle: {
-			width: parseInt(lineWidth),
-			color: $lineColorStore
-		},
-		itemStyle: {
-			color: $lineColorStore
-		},
-		label: {
-			show: labels,
-			formatter: function (params) {
-				return formatValue(params.value, labelFormat ?? yFormat);
-			},
-			fontSize: labelSize,
-			color: $labelColorStore,
-			position: labelPosition,
-			padding: 3
-		},
-		labelLayout: {
-			hideOverlap: showAllLabels ? false : true
-		},
-		emphasis: {
-			focus: 'series',
-			lineStyle: {
-				width: 3
-			}
-		},
-		showSymbol: labels || markers,
-		symbol: markerShape,
-		symbolSize: labels && !markers ? 0 : markerSize
-	};
-
-	$: radarSeries = seriesConfig.map((s) => ({
-		...baseConfig,
-		name: s.name,
-		data: [{ name: s.name, value: s.value }]
-	}));
-
-	$: config.update((d) => {
-		d.series.push(...radarSeries);
-		d.legend.data.push(...radarSeries.map((s) => s.name.toString()));
-		return d;
-	});
-
-	$: if (options) {
-		config.update((d) => {
-			return { ...d, ...options };
-		});
-	}
-
-	beforeUpdate(() => {
-		config.update((d) => {
-			d.radar = {
-				indicator: indicators,
-				shape: shape
-			};
-
-			d.xAxis = { show: false };
-			d.yAxis = [{ show: false }];
-			d.grid = { show: false };
-
-			if (labels) {
-				d.axisPointer = { triggerEmphasis: false };
-			}
-
-			return d;
-		});
-	});
-</script>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
index 8b4c262e9d..02c99ac4d1 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
@@ -3,123 +3,38 @@
 </script>
 
 <script>
-	import { getThemeStores } from '../../../themes/themes.js';
+	import { QueryLoad } from '../../../atoms/query-load';
+	import InnerRadarChart from './InnerRadarChart.svelte';
+	import EmptyChart from '../core/EmptyChart.svelte';
+	import ErrorChart from '../core/ErrorChart.svelte';
+	import { Query } from '@evidence-dev/sdk/usql';
 
-	import Chart from '../core/Chart.svelte';
-	import Radar from './Radar.svelte';
-	import { toBoolean } from '$lib/utils.js';
+	export let data;
 
-	const { resolveColor, resolveColorsObject, resolveColorPalette } = getThemeStores();
+	const initialHash = Query.isQuery(data) ? data.hash : undefined;
 
-	export let data = undefined;
-	export let x = undefined;
-	export let y = undefined;
-	export let series = undefined;
-
-	export let yFmt = undefined;
-	export let xFmt = undefined;
-
-	export let title = undefined;
-	export let subtitle = undefined;
-	export let legend = undefined;
-	export let chartAreaHeight = undefined;
-
-	export let fillColor = undefined;
-	$: fillColorStore = resolveColor(fillColor);
-
-	export let fillOpacity = undefined;
-
-	export let lineColor = undefined;
-	$: lineColorStore = resolveColor(lineColor);
-
-	export let lineWidth = undefined;
-
-	export let markers = undefined;
-	export let markerShape = undefined;
-	export let markerSize = undefined;
-
-	export let labels = undefined;
-	export let labelSize = undefined;
-	export let labelPosition = undefined;
-
-	export let labelColor = undefined;
-	$: labelColorStore = resolveColor(labelColor);
-
-	export let labelFmt = undefined;
-	export let showAllLabels = undefined;
-
-	export let colorPalette = 'default';
-	$: colorPaletteStore = resolveColorPalette(colorPalette);
-
-	export let echartsOptions = undefined;
-	export let seriesOptions = undefined;
-	/** @type {Boolean} */
-	export let printEchartsConfig = false;
-	$: printEchartsConfig = toBoolean(printEchartsConfig);
+	let isInitial = data?.hash === initialHash;
+	$: isInitial = data?.hash === initialHash;
 
+	/** @type {'pass' | 'warn' | 'error'}*/
 	export let emptySet = undefined;
-	export let emptyMessage = undefined;
-
-	export let renderer = undefined;
-	/** @type {Boolean | undefined} */
-	export let downloadableData = undefined;
-	$: downloadableData = toBoolean(downloadableData);
-	/** @type {Boolean | undefined} */
-	export let downloadableImage = undefined;
-	$: downloadableImage = toBoolean(downloadableImage);
 
-	export let seriesColors = undefined;
-	$: seriesColorsStore = resolveColorsObject(seriesColors);
-
-	export let seriesOrder = undefined;
+	/** @type {string}*/
+	export let emptyMessage = undefined;
 
-	export let connectGroup = undefined;
+	let chartType = 'Radar Chart';
 
-	export let shape = undefined;
-	export let max = undefined;
+	// Remove any undefined props (e.g. w/o defaults) to prevent them from being passed
+	$: spreadProps = {
+		...Object.fromEntries(Object.entries($$props).filter(([, v]) => v !== undefined))
+	};
 </script>
 
-<Chart
-	{data}
-	{x}
-	{y}
-	{xFmt}
-	{yFmt}
-	{series}
-	{legend}
-	{title}
-	{subtitle}
-	chartType="Radar Chart"
-	{chartAreaHeight}
-	colorPalette={colorPaletteStore}
-	{echartsOptions}
-	{seriesOptions}
-	{printEchartsConfig}
-	{emptySet}
-	{emptyMessage}
-	{renderer}
-	{downloadableData}
-	{downloadableImage}
-	{connectGroup}
-	seriesColors={seriesColorsStore}
->
-	<Radar
-		fillColor={fillColorStore}
-		lineColor={lineColorStore}
-		{fillOpacity}
-		{lineWidth}
-		{markers}
-		{markerShape}
-		{markerSize}
-		{labels}
-		{labelSize}
-		{labelPosition}
-		labelColor={labelColorStore}
-		{labelFmt}
-		{showAllLabels}
-		{seriesOrder}
-		{shape}
-		{max}
-	/>
-	<slot />
-</Chart>
+<!-- Pass all the props through-->
+<QueryLoad {data} let:loaded>
+	<EmptyChart slot="empty" {emptyMessage} {emptySet} {chartType} {isInitial} />
+	<ErrorChart let:loaded slot="error" title={chartType} error={loaded.error.message} />
+	<InnerRadarChart {...spreadProps} data={Query.isQuery(loaded) ? Array.from(loaded) : loaded}>
+		<slot />
+	</InnerRadarChart>
+</QueryLoad>

From efd36990a216aa54d855d28034de8c9cbadd9ce5 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 00:16:33 +0000
Subject: [PATCH 3/4] docs: add comprehensive RadarChart examples to charts
 folder

- Moved from chart-testing to charts folder (alongside other chart docs)
- Added 15+ examples demonstrating all RadarChart features:
  - Basic single series radar
  - Multi-series comparison (Team A vs Team B)
  - Three-way product comparison
  - Circle shape vs polygon
  - Custom max value for consistent scaling
  - Fill opacity (high vs low)
  - Line width customization
  - Markers with custom size
  - Data labels showing values
  - Custom colors (fillColor, lineColor)
  - Color palette for multi-series
  - Combined styling options
  - Chart height customization
- Each example includes clear description of what the prop does

Co-Authored-By: Caleb Keller <calebmkeller@gmail.com>
---
 .../src/pages/charts/radar-chart/+page.md     | 221 ++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 sites/example-project/src/pages/charts/radar-chart/+page.md

diff --git a/sites/example-project/src/pages/charts/radar-chart/+page.md b/sites/example-project/src/pages/charts/radar-chart/+page.md
new file mode 100644
index 0000000000..f39fabdef8
--- /dev/null
+++ b/sites/example-project/src/pages/charts/radar-chart/+page.md
@@ -0,0 +1,221 @@
+---
+title: Radar Chart
+---
+
+```sql skills_data
+select 'JavaScript' as skill, 90 as proficiency
+union all select 'Python' as skill, 85 as proficiency
+union all select 'SQL' as skill, 95 as proficiency
+union all select 'React' as skill, 80 as proficiency
+union all select 'Node.js' as skill, 75 as proficiency
+union all select 'TypeScript' as skill, 70 as proficiency
+```
+
+```sql team_comparison
+select 'Speed' as metric, 85 as value, 'Team A' as team
+union all select 'Quality' as metric, 90 as value, 'Team A' as team
+union all select 'Communication' as metric, 75 as value, 'Team A' as team
+union all select 'Innovation' as metric, 80 as value, 'Team A' as team
+union all select 'Reliability' as metric, 95 as value, 'Team A' as team
+union all select 'Speed' as metric, 70 as value, 'Team B' as team
+union all select 'Quality' as metric, 85 as value, 'Team B' as team
+union all select 'Communication' as metric, 90 as value, 'Team B' as team
+union all select 'Innovation' as metric, 95 as value, 'Team B' as team
+union all select 'Reliability' as metric, 80 as value, 'Team B' as team
+```
+
+```sql product_ratings
+select 'Design' as category, 4.5 as rating, 'Product X' as product
+union all select 'Performance' as category, 4.2 as rating, 'Product X' as product
+union all select 'Price' as category, 3.8 as rating, 'Product X' as product
+union all select 'Support' as category, 4.0 as rating, 'Product X' as product
+union all select 'Features' as category, 4.7 as rating, 'Product X' as product
+union all select 'Design' as category, 3.9 as rating, 'Product Y' as product
+union all select 'Performance' as category, 4.8 as rating, 'Product Y' as product
+union all select 'Price' as category, 4.5 as rating, 'Product Y' as product
+union all select 'Support' as category, 3.5 as rating, 'Product Y' as product
+union all select 'Features' as category, 4.0 as rating, 'Product Y' as product
+union all select 'Design' as category, 4.2 as rating, 'Product Z' as product
+union all select 'Performance' as category, 3.5 as rating, 'Product Z' as product
+union all select 'Price' as category, 4.8 as rating, 'Product Z' as product
+union all select 'Support' as category, 4.6 as rating, 'Product Z' as product
+union all select 'Features' as category, 3.8 as rating, 'Product Z' as product
+```
+
+Radar charts (also known as spider charts or web charts) display multivariate data on a two-dimensional chart with three or more quantitative variables represented on axes starting from the same point.
+
+## Basic Radar Chart
+
+A simple radar chart showing a single data series. Each axis represents a different metric, and the values are plotted as points connected by lines.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Developer Skills Profile"
+/>
+
+## Multi-Series Radar Chart
+
+Compare multiple entities across the same metrics. Each series is shown with a different color and appears in the legend.
+
+<RadarChart 
+    data={team_comparison} 
+    x=metric 
+    y=value 
+    series=team
+    title="Team Performance Comparison"
+/>
+
+## Three-Way Comparison
+
+Radar charts are excellent for comparing three or more items across multiple dimensions.
+
+<RadarChart 
+    data={product_ratings} 
+    x=category 
+    y=rating 
+    series=product
+    title="Product Comparison"
+/>
+
+## Circle Shape
+
+By default, radar charts use a polygon shape. Set `shape="circle"` to use circular gridlines instead.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Circular Radar Chart"
+    shape="circle"
+/>
+
+## Custom Max Value
+
+By default, the max value for each axis is calculated as 1.1x the maximum data value. Use the `max` prop to set a fixed maximum for all axes - useful when you want consistent scaling (e.g., percentages out of 100).
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Skills (Max: 100)"
+    max=100
+/>
+
+## Fill Opacity
+
+Control the transparency of the filled area with `fillOpacity`. Values range from 0 (transparent) to 1 (opaque).
+
+### High Opacity (0.7)
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="High Fill Opacity"
+    fillOpacity=0.7
+/>
+
+### Low Opacity (0.1)
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Low Fill Opacity"
+    fillOpacity=0.1
+/>
+
+## Line Width
+
+Adjust the thickness of the connecting lines with `lineWidth`.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Thick Lines (lineWidth=4)"
+    lineWidth=4
+/>
+
+## Markers
+
+Show data point markers on the chart with `markers=true`. Customize the marker appearance with `markerShape` and `markerSize`.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="With Markers"
+    markers=true
+    markerSize=10
+/>
+
+## Data Labels
+
+Display the actual values on the chart with `labels=true`.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="With Data Labels"
+    labels=true
+/>
+
+## Custom Colors
+
+Use `fillColor` and `lineColor` to customize the appearance of a single-series radar chart.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Custom Colors"
+    fillColor="#10b981"
+    lineColor="#059669"
+    fillOpacity=0.4
+/>
+
+## Color Palette for Multi-Series
+
+Use `colorPalette` to define custom colors for multi-series charts.
+
+<RadarChart 
+    data={team_comparison} 
+    x=metric 
+    y=value 
+    series=team
+    title="Custom Color Palette"
+    colorPalette={['#ef4444', '#3b82f6']}
+/>
+
+## Combined Styling
+
+Combine multiple styling options for a polished look.
+
+<RadarChart 
+    data={team_comparison} 
+    x=metric 
+    y=value 
+    series=team
+    title="Styled Comparison"
+    shape="circle"
+    fillOpacity=0.2
+    lineWidth=3
+    markers=true
+    markerSize=8
+/>
+
+## Chart Height
+
+Control the chart height with `chartAreaHeight`.
+
+<RadarChart 
+    data={skills_data} 
+    x=skill 
+    y=proficiency 
+    title="Taller Chart"
+    chartAreaHeight=400
+/>

From 224e54572da2f1432ef24520fc9f593b6ec39a8c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 02:32:00 +0000
Subject: [PATCH 4/4] chore: add changeset for RadarChart component

Co-Authored-By: Caleb Keller <calebmkeller@gmail.com>
---
 .changeset/sour-pens-tan.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/sour-pens-tan.md

diff --git a/.changeset/sour-pens-tan.md b/.changeset/sour-pens-tan.md
new file mode 100644
index 0000000000..20c8f6ed6a
--- /dev/null
+++ b/.changeset/sour-pens-tan.md
@@ -0,0 +1,11 @@
+---
+'@evidence-dev/core-components': minor
+---
+
+Add RadarChart component for spider/radar visualizations
+
+- New RadarChart component for displaying multivariate data on radar/spider charts
+- Supports single series and multi-series comparisons
+- Configurable shape (polygon or circle), fill opacity, line width, markers, and data labels
+- Custom max value support for consistent axis scaling
+- Custom color palette support for multi-series charts