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
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..6f03b9f992 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,7 @@ 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 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/RadarChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
new file mode 100644
index 0000000000..02c99ac4d1
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/radar/RadarChart.svelte
@@ -0,0 +1,40 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	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';
+
+	export let data;
+
+	const initialHash = Query.isQuery(data) ? data.hash : undefined;
+
+	let isInitial = data?.hash === initialHash;
+	$: isInitial = data?.hash === initialHash;
+
+	/** @type {'pass' | 'warn' | 'error'}*/
+	export let emptySet = undefined;
+
+	/** @type {string}*/
+	export let emptyMessage = undefined;
+
+	let chartType = 'Radar Chart';
+
+	// 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>
+
+<!-- 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>
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
+/>