diff --git a/apps/web/src/lib/components/charts/BreakdownChart.svelte b/apps/web/src/lib/components/charts/BreakdownChart.svelte
index 6ac2c5f..5d58f3e 100644
--- a/apps/web/src/lib/components/charts/BreakdownChart.svelte
+++ b/apps/web/src/lib/components/charts/BreakdownChart.svelte
@@ -1,5 +1,7 @@
 <script lang="ts" generics="Kind extends BreakdownChartKind">
-	import { onDestroy, tick } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
+	import { createSubscriber } from 'svelte/reactivity';
+	import { finiteSpectrumPoints, paddedSpectrumBounds } from './spectrum-points';
 	import { goto } from '$app/navigation';
 	import { Chart } from './chart-registry';
 	import { buildCoveragePointStyle } from './coverage-line-style';
@@ -71,12 +73,7 @@
 	import { rangeSelection } from '#lib/stores/rangeSelection.svelte.ts';
 	import { theme } from '#lib/stores/theme.svelte.ts';
 	import { cancelDrawFrame, requestDrawFrame } from '#lib/utils/animation-frame.ts';
-	import {
-		ensureCachedWindow,
-		getMissingWindowRanges,
-		readCachedWindow,
-		type TimeRange
-	} from '#lib/utils/window-cache.ts';
+	import { ensureCachedWindow, readCachedWindow, type TimeRange } from '#lib/utils/window-cache.ts';
 
 	const IP_TO_GROUP_BY: Record<IpGranularity, GroupByOption> = {
 		'1d': 'date',
@@ -131,10 +128,6 @@
 
 	const today = new Date();
 	const formatDate = (date: Date): string => formatDateAsPSTDateString(date);
-	const getInitialAddressType = () => props.addressType ?? 'sa';
-	const getInitialRouter = () => (props.router ?? '').trim();
-	const getInitialGranularity = () => props.granularity ?? config.defaultGranularity;
-	const getInitialMetrics = () => props.activeMetrics ?? config.defaultMetrics;
 
 	type BreakdownBucketData = LineBucketData | SpectrumStatsPayload;
 	type BreakdownChartBucket = TimeBucket<BreakdownBucketData>;
@@ -143,18 +136,72 @@
 		bucket: BreakdownChartBucket;
 	};
 
-	let currentRouter = $state(getInitialRouter());
-	let cachedBuckets = $state.raw<CachedBreakdownBucket[]>([]);
-	let buckets = $derived(
+	const currentRouter = $derived(
+		props.availableRouters?.includes(props.router ?? '')
+			? (props.router ?? '')
+			: (props.availableRouters?.[0] ?? '')
+	);
+	const currentGranularity = $derived<IpGranularity>(
+		props.granularity ?? config.defaultGranularity
+	);
+
+	const ipVersion = $derived<MaadIpVersion>(props.ipVersion ?? DEFAULT_MAAD_IP_VERSION);
+	type FilterInputs = {
+		startDate: string;
+		endDate: string;
+		granularity: IpGranularity;
+		routers: string[];
+		direction: FlowDirection;
+		ipVersion?: MaadIpVersion;
+		measure?: MaadMeasure;
+	};
+
+	const filters = $derived<FilterInputs>({
+		startDate: props.startDate ?? '2025-01-01',
+		endDate: props.endDate ?? formatDate(today),
+		granularity: currentGranularity,
+		routers:
+			props.kind === 'spectrum'
+				? currentRouter
+					? [currentRouter]
+					: []
+				: deriveSelectedRouters(props.routers),
+		direction: props.direction ?? 'all',
+		...(config.usesMaad ? { ipVersion, measure: props.measure } : {})
+	});
+	const requestKey = $derived(
+		JSON.stringify({
+			dataset: props.dataset ?? '',
+			kind: props.kind,
+			unavailable: props.unavailableCopy,
+			...filters
+		})
+	);
+	let settled = $state.raw<{
+		key: string;
+		records: CachedBreakdownBucket[];
+		error: string | null;
+	} | null>(null);
+
+	const cachedBuckets = $derived(settled?.key === requestKey ? settled.records : []);
+	const buckets = $derived(
 		cachedBuckets
 			.filter((record) => props.kind !== 'spectrum' || record.router === currentRouter)
 			.map((record) => record.bucket)
 	);
-	let activeMetrics = $state<BreakdownMetricKey[]>([...getInitialMetrics()]);
-	let loading = $state(false);
-	let error = $state<string | null>(null);
-	let addressType = $state<'sa' | 'da'>(getInitialAddressType());
-	const ipVersion = $derived<MaadIpVersion>(props.ipVersion ?? DEFAULT_MAAD_IP_VERSION);
+	let activeMetrics = $derived<BreakdownMetricKey[]>(props.activeMetrics ?? config.defaultMetrics);
+	const loading = $derived(
+		!props.unavailableCopy && filters.routers.length > 0 && settled?.key !== requestKey
+	);
+	const error = $derived(
+		filters.routers.length === 0
+			? config.noSourceCopy
+			: settled?.key === requestKey
+				? settled.error
+				: null
+	);
+	let addressType = $derived(props.addressType ?? 'sa');
+
 	const maadSubtitle = $derived(
 		config.usesMaad && !props.unavailableCopy
 			? [
@@ -167,7 +214,7 @@
 	);
 	let bucketStarts: number[] = [];
 
-	let chartCanvas = $state<HTMLCanvasElement | null>(null);
+	let chartCanvas: HTMLCanvasElement | null = null;
 	let chart: Chart | null = null;
 	let rangeDrag = $state(createRangeDragState());
 	let selectionLeft = $derived(Math.min(rangeDrag.dragStartX, rangeDrag.dragCurrentX));
@@ -175,17 +222,19 @@
 	let mirroredRange = $derived(rangeSelection.selection);
 	let pointerMoveFrame: number | null = null;
 	let pendingPointerMoveEvent: MouseEvent | null = null;
-	let localHoverLabel = $state<string | null>(null);
-	let externalHoverLabel = $state<string | null>(null);
-	let localHoverX = $state<number | null>(null);
-	let externalHoverX = $state<number | null>(null);
-	let activeCrosshairX = $derived(localHoverX ?? externalHoverX);
-	let showLocalTooltip = $state(false);
+	let localHoverLabel: string | null = null;
+	let externalHoverLabel: string | null = null;
+	let localHoverX: number | null = null;
+	let externalHoverX: number | null = null;
+	let notifyHover = () => {};
+	let showLocalTooltip = false;
 	let tooltipTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	function pointsForBucket(bucket: BreakdownChartBucket): SpectrumPoint[] {
 		if (!bucket.data || !('spectrumSa' in bucket.data)) return [];
-		return addressType === 'sa' ? bucket.data.spectrumSa : bucket.data.spectrumDa;
+		return finiteSpectrumPoints(
+			addressType === 'sa' ? bucket.data.spectrumSa : bucket.data.spectrumDa
+		);
 	}
 
 	function nearestBucketIndex(value: number): number | null {
@@ -209,17 +258,26 @@
 		})
 	);
 
-	$effect(() => {
+	const subscribeHover = createSubscriber((update) => {
+		notifyHover = update;
 		const unsubscribe = crosshairStore.subscribe(({ label, sourceChartId }) => {
-			if (sourceChartId === CHART_ID) {
-				externalHoverLabel = null;
-				externalHoverX = null;
-				return;
-			}
-			externalHoverLabel = label;
-			externalHoverX = getPixelForLabel(label);
+			externalHoverLabel = sourceChartId === CHART_ID ? null : label;
+			externalHoverX = getPixelForLabel(externalHoverLabel);
+			update();
 		});
-		return unsubscribe;
+		return () => {
+			unsubscribe();
+			notifyHover = () => {};
+		};
+	});
+	const hover = $derived.by(() => {
+		subscribeHover();
+		return {
+			localHoverLabel,
+			localHoverX,
+			showLocalTooltip,
+			activeCrosshairX: localHoverX ?? externalHoverX
+		};
 	});
 
 	function toEpochSeconds(dateString: string, isEnd = false): number {
@@ -246,72 +304,6 @@
 		};
 	}
 
-	function applyChartTheme() {
-		if (!chart) {
-			return;
-		}
-
-		const {
-			textColor,
-			gridColor,
-			gridHighlightColor,
-			tooltipBackgroundColor,
-			tooltipTextColor,
-			tooltipBorderColor
-		} = getChartColors();
-		type ThemeableScale = {
-			title?: Record<string, unknown>;
-			ticks?: Record<string, unknown>;
-			grid?: Record<string, unknown>;
-		};
-		const scales = chart.options.scales as { x?: ThemeableScale; y?: ThemeableScale } | undefined;
-
-		if (scales?.x) {
-			scales.x.title = { ...scales.x.title, color: textColor };
-			scales.x.ticks = { ...scales.x.ticks, color: textColor };
-			scales.x.grid = { ...scales.x.grid, color: scales.x.grid?.color ?? gridHighlightColor };
-		}
-
-		if (scales?.y) {
-			scales.y.title = { ...scales.y.title, color: textColor };
-			scales.y.ticks = { ...scales.y.ticks, color: textColor };
-			scales.y.grid = { ...scales.y.grid, color: gridColor };
-		}
-
-		if (props.kind !== 'spectrum') {
-			chart.options.plugins = {
-				...chart.options.plugins,
-				legend: { position: 'top', labels: { color: textColor } },
-				verticalCrosshair: {
-					enabled: true,
-					line: {
-						color: 'rgba(100, 100, 100, 0.8)',
-						width: 1,
-						dash: [3, 3]
-					},
-					tooltip: {
-						enabled: true,
-						delay: 500,
-						backgroundColor: tooltipBackgroundColor,
-						textColor: tooltipTextColor,
-						borderColor: tooltipBorderColor,
-						borderWidth: 1,
-						borderRadius: 4,
-						padding: 8,
-						fontSize: 12,
-						fontFamily: 'system-ui, sans-serif'
-					},
-					sync: {
-						onHover: (label: string | null) => crosshairStore.setHover(label, CHART_ID),
-						getExternalLabel: () => crosshairStore.getExternalLabel(CHART_ID)
-					}
-				}
-			} as Record<string, unknown>;
-		}
-
-		chart.update('none');
-	}
-
 	function getPixelForLabel(label: string | null): number | null {
 		if (!chart || !label || !chart.data.labels) {
 			return null;
@@ -328,6 +320,7 @@
 	function syncCrosshairPositions() {
 		localHoverX = getPixelForLabel(localHoverLabel);
 		externalHoverX = getPixelForLabel(externalHoverLabel);
+		notifyHover();
 	}
 
 	function clearTooltipDelay() {
@@ -345,6 +338,7 @@
 		}
 		tooltipTimeout = setTimeout(() => {
 			showLocalTooltip = true;
+			notifyHover();
 		}, 500);
 	}
 
@@ -354,6 +348,7 @@
 		localHoverX = null;
 		showLocalTooltip = false;
 		clearTooltipDelay();
+		notifyHover();
 		if (hadLocalHover && crosshairStore.sourceChartId === CHART_ID) {
 			crosshairStore.clearHover();
 		}
@@ -362,6 +357,7 @@
 	function hideCrosshairOverlay() {
 		clearLocalHover();
 		externalHoverX = getPixelForLabel(externalHoverLabel);
+		notifyHover();
 	}
 
 	function updateLocalCrosshair(event: MouseEvent) {
@@ -406,6 +402,7 @@
 			scheduleTooltip();
 			crosshairStore.setHover(nextLabel, CHART_ID);
 		}
+		notifyHover();
 	}
 
 	function getCrosshairLineStyle(x: number | null): string | null {
@@ -459,6 +456,7 @@
 		localHoverX = null;
 		showLocalTooltip = false;
 		externalHoverX = null;
+		notifyHover();
 	}
 
 	function deriveSelectedRouters(routerConfig: RouterConfig | undefined): string[] {
@@ -525,9 +523,6 @@
 			return;
 		}
 		addressType = nextAddressType;
-		if (chart) {
-			renderChart();
-		}
 		props.onAddressTypeChange?.({ addressType: nextAddressType });
 	}
 
@@ -569,7 +564,7 @@
 		if (props.kind === 'spectrum') {
 			clearLocalHover();
 		}
-		beginRangeDrag(rangeDrag, event, chartCanvas, chart, publishRangeSelection);
+		beginRangeDrag(rangeDrag, event, chartCanvas, chart, publishRangeSelection, bucketStarts);
 	}
 
 	function applyPendingPointerMove() {
@@ -579,7 +574,7 @@
 		if (!event) {
 			return;
 		}
-		updateRangeDrag(rangeDrag, event, chartCanvas, chart, publishRangeSelection);
+		updateRangeDrag(rangeDrag, event, chartCanvas, chart, publishRangeSelection, bucketStarts);
 		if (props.kind === 'spectrum') {
 			updateLocalCrosshair(event);
 		}
@@ -613,7 +608,7 @@
 
 	function finishRangeSelection() {
 		flushPendingPointerMove();
-		endRangeDrag(rangeDrag, chart, applyRangeDrilldown);
+		endRangeDrag(rangeDrag, chart, applyRangeDrilldown, bucketStarts);
 		rangeSelection.clear();
 	}
 
@@ -622,9 +617,10 @@
 		hideCrosshairOverlay();
 	}
 
-	let mirroredSelectionStyle = $derived(
-		buildMirroredSelectionStyle(chart, mirroredRange, CHART_ID)
-	);
+	const mirroredSelectionStyle = $derived.by(() => {
+		subscribeHover();
+		return buildMirroredSelectionStyle(chart, mirroredRange, CHART_ID, bucketStarts);
+	});
 
 	function getLabelFromIndex(index: number): string | null {
 		if (!chart || !chart.data.labels) {
@@ -668,9 +664,7 @@
 			activeElements.length === 0
 				? null
 				: props.kind === 'spectrum'
-					? nearestBucketIndex(
-							bucketStarts[Math.min(activeElements[0]?.index ?? 0, bucketStarts.length - 1)] ?? 0
-						)
+					? labelIndex
 					: activeElements[0].index;
 		const targetIndex = labelIndex ?? fallbackIndex;
 		const label = targetIndex !== null ? getLabelFromIndex(targetIndex) : labels[0];
@@ -802,7 +796,7 @@
 				type: 'linear' as const,
 				min: dataBounds.min,
 				max: dataBounds.max,
-				afterBuildTicks: placeTicksOnBucketStarts(tickBucketStarts),
+				afterBuildTicks: placeTicksOnBucketStarts(tickBucketStarts, 1),
 				title: { display: true, text: `Time (${currentGranularity})`, color: textColor },
 				ticks: {
 					color: textColor,
@@ -919,7 +913,8 @@
 		const dataBounds = findTemporalDataBounds(
 			selectedBuckets,
 			(record) => record.bucket.bucketStart,
-			(record) => record.bucket.data !== null
+			(record) => record.bucket.data !== null,
+			groupByBucketDurationMs(IP_TO_GROUP_BY[currentGranularity]) / 1000
 		);
 		if (!dataBounds) {
 			destroyChart();
@@ -1022,30 +1017,21 @@
 			tooltipTextColor,
 			tooltipBorderColor
 		);
-		if (!chart) {
-			chart = new Chart(canvas, {
-				type: 'line',
-				data: { labels, datasets },
-				options: {
-					onClick: handleChartClick,
-					responsive: true,
-					maintainAspectRatio: false,
-					animation: false,
-					normalized: true,
-					interaction: { mode: 'index', intersect: false },
-					plugins,
-					scales
-				}
-			} as never);
-			crosshairStore.register(CHART_ID, chart);
-		} else {
-			chart.data.labels = labels;
-			chart.data.datasets = datasets as never[];
-			chart.options.scales = scales as never;
-			chart.options.onClick = handleChartClick;
-			chart.options.plugins = plugins;
-			chart.update('none');
-		}
+		chart = new Chart(canvas, {
+			type: 'line',
+			data: { labels, datasets },
+			options: {
+				onClick: handleChartClick,
+				responsive: true,
+				maintainAspectRatio: false,
+				animation: false,
+				normalized: true,
+				interaction: { mode: 'index', intersect: false },
+				plugins,
+				scales
+			}
+		} as never);
+		crosshairStore.register(CHART_ID, chart);
 	}
 
 	function renderSpectrumChart() {
@@ -1063,28 +1049,19 @@
 		);
 
 		if (bucketStarts.length === 0) {
-			if (chart) {
-				chart.data.datasets = [];
-				chart.update('none');
-			}
-			syncCrosshairPositions();
 			return;
 		}
 
 		const { data, minF, maxF, minAlpha, maxAlpha } = buildDatasets(selectedBuckets, bucketStarts);
 
 		if (data.length === 0) {
-			if (chart) {
-				chart.data.datasets = [];
-				chart.update('none');
-			}
-			syncCrosshairPositions();
 			return;
 		}
 		const dataBounds = findTemporalDataBounds(
 			data,
 			(point) => point.x,
-			() => true
+			() => true,
+			groupByBucketDurationMs(IP_TO_GROUP_BY[currentGranularity]) / 1000
 		);
 		if (!dataBounds) return;
 
@@ -1100,156 +1077,97 @@
 		}));
 
 		const granularity = currentGranularity;
-		const alphaPadding = (maxAlpha - minAlpha) * 0.05;
-
-		if (!chart) {
-			chart = new Chart(canvas, {
-				type: 'scatter',
-				data: {
-					labels,
-					datasets: [
-						{
-							data: chartPoints,
-							backgroundColor: pointColors,
-							borderColor: pointColors,
-							pointRadius: 1,
-							pointHoverRadius: 2
-						}
-					]
+		const alphaBounds = paddedSpectrumBounds(minAlpha, maxAlpha);
+
+		chart = new Chart(canvas, {
+			type: 'scatter',
+			data: {
+				labels,
+				datasets: [
+					{
+						data: chartPoints,
+						backgroundColor: pointColors,
+						borderColor: pointColors,
+						pointRadius: 1,
+						pointHoverRadius: 2
+					}
+				]
+			},
+			options: {
+				onClick: handleChartClick,
+				animation: false as const,
+				responsive: true,
+				maintainAspectRatio: false,
+				events: ['click'],
+				interaction: {
+					mode: 'nearest',
+					intersect: true
 				},
-				options: {
-					onClick: handleChartClick,
-					animation: false as const,
-					responsive: true,
-					maintainAspectRatio: false,
-					events: ['click'],
-					interaction: {
-						mode: 'nearest',
-						intersect: true
+				plugins: {
+					verticalCrosshair: false,
+					legend: {
+						display: false
 					},
-					plugins: {
-						legend: {
-							display: false
+					tooltip: {
+						enabled: false
+					}
+				} as Record<string, unknown>,
+				scales: {
+					x: {
+						type: 'linear',
+						min: dataBounds.min,
+						max: dataBounds.max,
+						afterBuildTicks: placeTicksOnBucketStarts(bucketStarts, 1),
+						title: {
+							display: true,
+							text: `Time (${granularity})`,
+							color: textColor
 						},
-						tooltip: {
-							enabled: false
-						}
-					} as Record<string, unknown>,
-					scales: {
-						x: {
-							type: 'linear',
-							min: dataBounds.min,
-							max: dataBounds.max,
-							afterBuildTicks: placeTicksOnBucketStarts(bucketStarts),
-							title: {
-								display: true,
-								text: `Time (${granularity})`,
-								color: textColor
-							},
-							ticks: {
-								color: textColor,
-								autoSkip: false,
-								maxRotation: 45,
-								minRotation: 45,
-								sampleSize: 12,
-								callback: (value: unknown) => {
-									const bucketStart = getBucketStartForTickValue(value);
-									if (bucketStart === null) return '';
-									const index = typeof value === 'number' ? (nearestBucketIndex(value) ?? 0) : 0;
-									return formatIpGranularityTick(bucketStart, granularity, index);
-								}
-							},
-							grid: {
-								color: (ctx: { tick?: { value?: number } }) => {
-									const tickValue = ctx.tick?.value;
-									const bucketStart = getBucketStartForTickValue(tickValue);
-									if (bucketStart === null || typeof tickValue !== 'number') {
-										return gridHighlightColor;
-									}
-									const index = nearestBucketIndex(tickValue) ?? 0;
-									return shouldHighlightIpGranularityGrid(bucketStart, granularity, index)
-										? gridColor
-										: gridHighlightColor;
-								}
+						ticks: {
+							color: textColor,
+							autoSkip: false,
+							maxRotation: 45,
+							minRotation: 45,
+							sampleSize: 12,
+							callback: (value: unknown) => {
+								const bucketStart = getBucketStartForTickValue(value);
+								if (bucketStart === null) return '';
+								const index = typeof value === 'number' ? (nearestBucketIndex(value) ?? 0) : 0;
+								return formatIpGranularityTick(bucketStart, granularity, index);
 							}
 						},
-						y: {
-							type: 'linear',
-							min: minAlpha - alphaPadding,
-							max: maxAlpha + alphaPadding,
-							afterFit(axis: { width: number }) {
-								axis.width = Y_AXIS_WIDTH;
-							},
-							title: {
-								display: true,
-								text: 'alpha',
-								color: textColor
-							},
-							ticks: { color: textColor },
-							grid: { color: gridColor }
-						}
-					}
-				}
-			});
-		} else {
-			chart.data.labels = labels;
-			chart.data.datasets = [
-				{
-					data: chartPoints,
-					backgroundColor: pointColors,
-					borderColor: pointColors,
-					pointRadius: 1,
-					pointHoverRadius: 2
-				}
-			];
-			chart.options.scales = {
-				x: {
-					type: 'linear',
-					min: dataBounds.min,
-					max: dataBounds.max,
-					afterBuildTicks: placeTicksOnBucketStarts(bucketStarts),
-					title: { display: true, text: `Time (${granularity})`, color: textColor },
-					ticks: {
-						color: textColor,
-						autoSkip: false,
-						maxRotation: 45,
-						minRotation: 45,
-						sampleSize: 12,
-						callback: (value: unknown) => {
-							const bucketStart = getBucketStartForTickValue(value);
-							if (bucketStart === null) return '';
-							const index = typeof value === 'number' ? (nearestBucketIndex(value) ?? 0) : 0;
-							return formatIpGranularityTick(bucketStart, granularity, index);
-						}
-					},
-					grid: {
-						color: (ctx: { tick?: { value?: number } }) => {
-							const tickValue = ctx.tick?.value;
-							const bucketStart = getBucketStartForTickValue(tickValue);
-							if (bucketStart === null || typeof tickValue !== 'number') {
-								return gridHighlightColor;
+						grid: {
+							color: (ctx: { tick?: { value?: number } }) => {
+								const tickValue = ctx.tick?.value;
+								const bucketStart = getBucketStartForTickValue(tickValue);
+								if (bucketStart === null || typeof tickValue !== 'number') {
+									return gridHighlightColor;
+								}
+								const index = nearestBucketIndex(tickValue) ?? 0;
+								return shouldHighlightIpGranularityGrid(bucketStart, granularity, index)
+									? gridColor
+									: gridHighlightColor;
 							}
-							const index = nearestBucketIndex(tickValue) ?? 0;
-							return shouldHighlightIpGranularityGrid(bucketStart, granularity, index)
-								? gridColor
-								: gridHighlightColor;
 						}
-					}
-				},
-				y: {
-					min: minAlpha - alphaPadding,
-					max: maxAlpha + alphaPadding,
-					afterFit(axis: { width: number }) {
-						axis.width = Y_AXIS_WIDTH;
 					},
-					title: { display: true, text: 'alpha', color: textColor },
-					ticks: { color: textColor },
-					grid: { color: gridColor }
+					y: {
+						type: 'linear',
+						min: alphaBounds.min,
+						max: alphaBounds.max,
+						afterFit(axis: { width: number }) {
+							axis.width = Y_AXIS_WIDTH;
+						},
+						title: {
+							display: true,
+							text: 'alpha',
+							color: textColor
+						},
+						ticks: { color: textColor },
+						grid: { color: gridColor }
+					}
 				}
-			};
-			chart.options.onClick = handleChartClick;
-			chart.update('none');
-		}
+			}
+		});
 		syncCrosshairPositions();
 	}
 
@@ -1261,277 +1179,99 @@
 		}
 	}
 
-	type FilterInputs = {
-		startDate: string;
-		endDate: string;
-		granularity: IpGranularity;
-		routers: string[];
-		direction: FlowDirection;
-		ipVersion?: MaadIpVersion;
-		measure?: MaadMeasure;
-	};
-
-	let lastFiltersKey = '';
-	let lastIncomingMetricsKey = '';
-	let requestToken = 0;
-	let requestController: AbortController | null = null;
-
-	function getRequestedRange(filters: FilterInputs): TimeRange {
-		return {
+	async function loadData(filters: FilterInputs, dataset: string, signal: AbortSignal) {
+		const requestedRange: TimeRange = {
 			start: toEpochSeconds(filters.startDate),
 			end: toEpochSeconds(filters.endDate, true)
 		};
-	}
-
-	function getCacheKey(filters: FilterInputs): string {
-		return JSON.stringify({
-			chart: CHART_ID,
-			dataset: props.dataset ?? '',
-			granularity: filters.granularity,
-			routers: filters.routers,
-			direction: filters.direction,
-			ipVersion: filters.ipVersion ?? null,
-			measure: filters.measure ?? null
-		});
-	}
-
-	async function loadData(filters: FilterInputs, token: number) {
-		requestController?.abort();
-		const controller = new AbortController();
-		requestController = controller;
-		const requestedRange = getRequestedRange(filters);
-		const cacheKey = getCacheKey(filters);
-		loading = getMissingWindowRanges(cacheKey, requestedRange).length > 0;
-		error = null;
-		if (loading) {
-			destroyChart();
-		}
-
 		const params = new URLSearchParams({
-			dataset: props.dataset ?? '',
+			dataset,
 			granularity: filters.granularity,
 			routers: filters.routers.join(','),
 			direction: filters.direction,
 			...(filters.ipVersion !== undefined ? { ipVersion: String(filters.ipVersion) } : {}),
 			...(filters.measure !== undefined ? { measure: filters.measure } : {})
 		});
-
-		try {
-			await ensureCachedWindow<CachedBreakdownBucket>({
-				key: cacheKey,
-				requestedRange,
-				signal: controller.signal,
-				fetchRange: async (range, signal) => {
-					const response = await fetch(
-						`${config.endpoint}?${new URLSearchParams({
-							...Object.fromEntries(params.entries()),
-							startDate: range.start.toString(),
-							endDate: range.end.toString()
-						}).toString()}`,
-						{ signal }
-					);
-					if (!response.ok) {
-						const message = await response.text();
-						throw new Error(message || config.fetchErrorCopy);
-					}
-					const data = (await response.json()) as {
-						timelines: Array<{ router: string; buckets: BreakdownChartBucket[] }>;
-					};
-					return data.timelines.flatMap((timeline) =>
-						timeline.buckets.map((bucket) => ({
-							router: timeline.router,
-							bucket
-						}))
-					);
-				},
-				getRecordKey: (record) => `${record.router}-${record.bucket.bucketStart}`,
-				compareRecords: (left, right) =>
-					left.bucket.bucketStart - right.bucket.bucketStart ||
-					left.router.localeCompare(right.router)
-			});
-			if (token !== requestToken) {
-				return;
-			}
-			cachedBuckets = readCachedWindow<CachedBreakdownBucket>(
-				cacheKey,
-				requestedRange,
-				(record, range) => {
-					return record.bucket.bucketStart >= range.start && record.bucket.bucketStart < range.end;
-				}
-			);
-			loading = false;
-			await tick();
-			renderChart();
-		} catch (err) {
-			if (token !== requestToken) {
-				return;
-			}
-			if (err instanceof DOMException && err.name === 'AbortError') return;
-			error = err instanceof Error ? err.message : config.unexpectedErrorCopy;
-			cachedBuckets = [];
-			loading = false;
-			destroyChart();
-		} finally {
-			if (token === requestToken && requestController === controller) {
-				requestController = null;
-			}
-		}
+		const cacheKey = `${config.endpoint}?${params}`;
+		await ensureCachedWindow<CachedBreakdownBucket>({
+			key: cacheKey,
+			requestedRange,
+			signal,
+			fetchRange: async (range, signal) => {
+				const response = await fetch(
+					`${config.endpoint}?${new URLSearchParams({
+						...Object.fromEntries(params.entries()),
+						startDate: range.start.toString(),
+						endDate: range.end.toString()
+					})}`,
+					{ signal }
+				);
+				if (!response.ok) throw new Error((await response.text()) || config.fetchErrorCopy);
+				const data = (await response.json()) as {
+					timelines: Array<{ router: string; buckets: BreakdownChartBucket[] }>;
+				};
+				return data.timelines.flatMap((timeline) =>
+					timeline.buckets.map((bucket) => ({ router: timeline.router, bucket }))
+				);
+			},
+			getRecordKey: (record) => `${record.router}-${record.bucket.bucketStart}`,
+			compareRecords: (left, right) =>
+				left.bucket.bucketStart - right.bucket.bucketStart ||
+				left.router.localeCompare(right.router)
+		});
+		return readCachedWindow<CachedBreakdownBucket>(
+			cacheKey,
+			requestedRange,
+			(record, range) =>
+				record.bucket.bucketStart >= range.start && record.bucket.bucketStart < range.end
+		);
 	}
 
-	onDestroy(() => {
-		requestToken += 1;
-		requestController?.abort();
-		cancelPendingPointerMove();
-		if (mirroredRange?.sourceChartId === CHART_ID) {
-			rangeSelection.clear();
-		}
-		destroyChart();
-	});
-
-	let currentGranularity = $state<IpGranularity>(getInitialGranularity());
-
 	$effect(() => {
-		void theme.dark;
-		if (chart) {
-			if (config.seriesByRouter) {
-				renderChart();
-			} else {
-				applyChartTheme();
+		const key = requestKey;
+		if (props.unavailableCopy || filters.routers.length === 0) return;
+		const controller = new AbortController();
+		loadData(filters, props.dataset ?? '', controller.signal).then(
+			(records) => {
+				if (!controller.signal.aborted) settled = { key, records, error: null };
+			},
+			(reason: unknown) => {
+				if (!controller.signal.aborted)
+					settled = {
+						key,
+						records: [],
+						error: reason instanceof Error ? reason.message : config.unexpectedErrorCopy
+					};
 			}
-		}
+		);
+		return () => controller.abort();
 	});
 
-	$effect(() => {
-		if (props.kind === 'spectrum') {
-			return;
-		}
-		const incomingMetrics = props.activeMetrics ?? config.defaultMetrics;
-		const nextKey = JSON.stringify(incomingMetrics);
-		if (nextKey === lastIncomingMetricsKey) {
-			return;
-		}
-		lastIncomingMetricsKey = nextKey;
-		activeMetrics = [...incomingMetrics];
-		void (async () => {
-			await tick();
+	function attachChart(canvas: HTMLCanvasElement) {
+		void cachedBuckets;
+		void addressType;
+		void activeMetrics;
+		void theme.dark;
+		untrack(() => {
+			chartCanvas = canvas;
 			renderChart();
-		})();
-	});
-
-	function releaseUnavailableChart() {
-		requestToken += 1;
-		requestController?.abort();
-		requestController = null;
-		destroyChart();
-		lastFiltersKey = '';
-	}
-
-	$effect(() => {
-		if (props.unavailableCopy) {
-			releaseUnavailableChart();
-			return;
-		}
-		if (props.kind !== 'spectrum') {
-			const routerConfig = props.routers;
-			if (!routerConfig || Object.keys(routerConfig).length === 0) {
-				return;
-			}
-			const selectedRouters = deriveSelectedRouters(routerConfig);
-			const filters: FilterInputs = {
-				startDate: props.startDate ?? '2025-01-01',
-				endDate: props.endDate ?? formatDate(today),
-				granularity: props.granularity ?? config.defaultGranularity,
-				routers: selectedRouters,
-				direction: props.direction ?? 'all',
-				...(config.usesMaad
-					? { ipVersion: props.ipVersion ?? DEFAULT_MAAD_IP_VERSION, measure: props.measure }
-					: {})
-			};
-
-			currentGranularity = filters.granularity;
-			if (selectedRouters.length === 0) {
-				requestToken += 1;
-				requestController?.abort();
-				requestController = null;
-				error = config.noSourceCopy;
-				cachedBuckets = [];
-				destroyChart();
-				lastFiltersKey = JSON.stringify({ ...filters, selectedRouters });
-				loading = false;
-				return;
-			}
-
-			error = null;
-			const nextKey = JSON.stringify({ ...filters, selectedRouters });
-			if (nextKey === lastFiltersKey) {
-				return;
-			}
-			lastFiltersKey = nextKey;
-			const token = ++requestToken;
-			loadData(filters, token);
-			return;
-		}
-
-		const availableRouters = (props.availableRouters ?? [])
-			.map((router: string) => router.trim())
-			.filter((router: string) => router.length > 0);
-		const requestedRouter = props.router?.trim() ?? '';
-		const nextRouter = availableRouters.includes(requestedRouter)
-			? requestedRouter
-			: (availableRouters[0] ?? '');
-		const startDateProp = props.startDate;
-		const endDateProp = props.endDate;
-		const granularityProp = props.granularity;
-		const nextAddressType = props.addressType ?? 'sa';
-		const nextIpVersion = props.ipVersion ?? DEFAULT_MAAD_IP_VERSION;
-		const direction = props.direction ?? 'all';
-
-		if (nextAddressType !== addressType) {
-			addressType = nextAddressType;
-			if (chart) {
-				renderChart();
-			}
-		}
-		if (nextRouter !== currentRouter) {
-			currentRouter = nextRouter;
-			if (chart) {
-				renderChart();
-			}
-		}
-
-		const filters: FilterInputs = {
-			startDate: startDateProp ?? '2025-01-01',
-			endDate: endDateProp ?? formatDate(today),
-			granularity: granularityProp ?? config.defaultGranularity,
-			// The spectrum card displays one source at a time. Fetching every available source
-			// multiplied its SQL work and response size while the client discarded all but this one.
-			routers: nextRouter ? [nextRouter] : [],
-			direction,
-			ipVersion: nextIpVersion
-		};
-
-		currentGranularity = filters.granularity;
-
-		if (filters.routers.length === 0) {
-			requestToken += 1;
-			requestController?.abort();
-			requestController = null;
-			error = config.noSourceCopy;
-			cachedBuckets = [];
+			syncCrosshairPositions();
+		});
+		const observer = new ResizeObserver(() => {
+			chart?.resize();
+			syncCrosshairPositions();
+		});
+		observer.observe(canvas);
+		return () => {
+			observer.disconnect();
+			cancelPendingPointerMove();
 			destroyChart();
-			lastFiltersKey = JSON.stringify(filters);
-			loading = false;
-			return;
-		}
-
-		const nextKey = JSON.stringify(filters);
-		if (nextKey === lastFiltersKey) {
-			return;
-		}
+			chartCanvas = null;
+		};
+	}
 
-		lastFiltersKey = nextKey;
-		const token = ++requestToken;
-		loadData(filters, token);
+	onDestroy(() => {
+		if (mirroredRange?.sourceChartId === CHART_ID) rangeSelection.clear();
 	});
 </script>
 
@@ -1627,22 +1367,23 @@
 		{/if}
 	{/snippet}
 
-	<canvas bind:this={chartCanvas} aria-label={config.canvasLabel}></canvas>
+	<canvas {@attach attachChart} aria-label={config.canvasLabel}></canvas>
 
 	{#snippet overlay()}
 		{#if props.kind === 'spectrum'}
-			{#if !rangeDrag.isDraggingRange && activeCrosshairX !== null}
+			{#if !rangeDrag.isDraggingRange && hover.activeCrosshairX !== null}
 				<div
 					class="pointer-events-none absolute z-20"
-					style={getCrosshairLineStyle(activeCrosshairX)}
+					style={getCrosshairLineStyle(hover.activeCrosshairX)}
 				></div>
 			{/if}
-			{#if !rangeDrag.isDraggingRange && localHoverX !== null && showLocalTooltip && localHoverLabel}
+			{#if !rangeDrag.isDraggingRange && hover.localHoverX !== null && hover.showLocalTooltip && hover.localHoverLabel}
 				<div
+					role="tooltip"
 					class="pointer-events-none absolute z-20 rounded border px-2 py-1 text-xs whitespace-nowrap shadow-sm"
-					style={`${getCrosshairTooltipStyle(localHoverX)} background:${getChartColors().tooltipBackgroundColor}; color:${getChartColors().tooltipTextColor}; border-color:${getChartColors().tooltipBorderColor};`}
+					style={`${getCrosshairTooltipStyle(hover.localHoverX)} background:${getChartColors().tooltipBackgroundColor}; color:${getChartColors().tooltipTextColor}; border-color:${getChartColors().tooltipBorderColor};`}
 				>
-					<div>{localHoverLabel}</div>
+					<div>{hover.localHoverLabel}</div>
 				</div>
 			{/if}
 		{/if}
diff --git a/apps/web/src/lib/components/charts/SpectrumChart.svelte b/apps/web/src/lib/components/charts/SpectrumChart.svelte
index 7c18a72..8a5197b 100644
--- a/apps/web/src/lib/components/charts/SpectrumChart.svelte
+++ b/apps/web/src/lib/components/charts/SpectrumChart.svelte
@@ -1,47 +1,18 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import type { ChartConfiguration } from 'chart.js';
+	import { finiteSpectrumPoints, paddedSpectrumBounds } from './spectrum-points';
 	import { Chart } from './annotation-chart-registry';
 	import type { SpectrumData } from '#lib/types/types.ts';
 	import { theme } from '#lib/stores/theme.svelte.ts';
 
 	let { data }: { data: SpectrumData } = $props();
-	let chartCanvas: HTMLCanvasElement;
-	let chart: Chart | null = null;
+	const points = $derived(finiteSpectrumPoints(data.spectrum));
 
-	onMount(() => {
-		return () => {
-			destroyChart();
-		};
-	});
-
-	$effect(() => {
-		if (!chartCanvas?.parentElement) {
-			return;
-		}
-
-		const observer = new ResizeObserver(() => {
-			chart?.resize();
-		});
-		observer.observe(chartCanvas.parentElement);
-
-		return () => {
-			observer.disconnect();
-		};
-	});
-
-	$effect(() => {
+	function attachChart(canvas: HTMLCanvasElement) {
 		void theme.dark;
-		if (!chartCanvas) {
-			return;
-		}
-
-		if (data?.spectrum?.length > 0) {
-			updateChart();
-			return;
-		}
-
-		destroyChart();
-	});
+		const chart = new Chart(canvas, buildConfig());
+		return () => chart.destroy();
+	}
 
 	function getChartColors() {
 		const style = getComputedStyle(document.documentElement);
@@ -54,21 +25,14 @@
 		};
 	}
 
-	function destroyChart() {
-		if (chart) {
-			chart.destroy();
-			chart = null;
-		}
-	}
-
-	function updateChart() {
-		const points = data.spectrum;
+	function buildConfig(): ChartConfiguration<'line'> {
 		const { textColor, gridColor, tooltipBackgroundColor, tooltipTextColor, tooltipBorderColor } =
 			getChartColors();
 
 		const alphaValues = points.map((p) => p.alpha);
 		const minAlpha = Math.min(...alphaValues);
 		const maxAlpha = Math.max(...alphaValues);
+		const bounds = paddedSpectrumBounds(minAlpha, maxAlpha);
 
 		const chartData = {
 			datasets: [
@@ -85,31 +49,11 @@
 					pointBorderWidth: 1,
 					fill: false,
 					tension: 0.3
-				},
-				{
-					label: 'y = x (reference)',
-					data: [
-						{
-							x: minAlpha - 0.02 * (maxAlpha - minAlpha),
-							y: minAlpha - 0.02 * (maxAlpha - minAlpha)
-						},
-						{
-							x: maxAlpha + 0.02 * (maxAlpha - minAlpha),
-							y: maxAlpha + 0.02 * (maxAlpha - minAlpha)
-						}
-					],
-					borderColor: 'rgba(128, 128, 128, 0.5)',
-					borderWidth: 1,
-					borderDash: [5, 5],
-					pointRadius: 0,
-					pointHoverRadius: 0,
-					fill: false,
-					tension: 0
 				}
 			]
 		};
 
-		const config = {
+		return {
 			type: 'line' as const,
 			data: chartData,
 			options: {
@@ -119,8 +63,8 @@
 				scales: {
 					x: {
 						type: 'linear' as const,
-						min: minAlpha - 0.02 * (maxAlpha - minAlpha),
-						max: maxAlpha + 0.02 * (maxAlpha - minAlpha),
+						min: bounds.min,
+						max: bounds.max,
 						title: {
 							display: true,
 							text: 'alpha',
@@ -148,7 +92,7 @@
 						labels: { color: textColor }
 					},
 					tooltip: {
-						mode: 'index' as const,
+						mode: 'nearest' as const,
 						intersect: false,
 						backgroundColor: tooltipBackgroundColor,
 						titleColor: tooltipTextColor,
@@ -156,42 +100,35 @@
 						borderColor: tooltipBorderColor,
 						borderWidth: 1,
 						callbacks: {
-							title: (items: { parsed: { x: number } }[]) =>
-								`alpha = ${items[0]?.parsed?.x?.toFixed(6)}`,
-							label: (item: {
-								dataset: { label: string };
-								parsed: { y: number };
-								dataIndex: number;
-							}) => {
-								const value = item.parsed.y.toFixed(6);
+							title: (items) => `alpha = ${items[0]?.parsed?.x?.toFixed(6)}`,
+							label: (item) => {
+								const value = item.parsed.y?.toFixed(6);
 								return `${item.dataset.label}: ${value}`;
 							}
 						}
 					},
-					verticalCrosshair: {
-						enabled: true,
-						tooltip: {
-							enabled: false
+					annotation: {
+						annotations: {
+							reference: {
+								type: 'line',
+								xMin: bounds.min,
+								xMax: bounds.max,
+								yMin: bounds.min,
+								yMax: bounds.max,
+								borderColor: 'rgba(128, 128, 128, 0.5)',
+								borderWidth: 1,
+								borderDash: [5, 5]
+							}
 						}
-					}
+					},
+					verticalCrosshair: false
 				},
 				interaction: {
-					mode: 'index' as const,
+					mode: 'nearest' as const,
 					intersect: false
 				}
 			}
 		};
-
-		if (!chart) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			chart = new Chart(chartCanvas, config as any);
-			return;
-		}
-
-		chart.data = chartData;
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		chart.options = config.options as any;
-		chart.update('none');
 	}
 </script>
 
@@ -207,6 +144,15 @@
 		{/if}
 	</div>
 	<div class="relative h-72 w-full min-w-0 sm:h-96">
-		<canvas bind:this={chartCanvas}></canvas>
+		{#if points.length > 0}
+			<canvas {@attach attachChart} aria-label="Multifractal spectrum chart"></canvas>
+		{:else}
+			<p class="text-muted-foreground flex h-full items-center justify-center">
+				No finite spectrum data for this selection.
+			</p>
+		{/if}
 	</div>
+	{#if points.length > 0}
+		<p class="text-muted-foreground mt-1 text-xs">Dashed line: f(alpha) = alpha.</p>
+	{/if}
 </div>
diff --git a/apps/web/src/lib/components/charts/chart-utils.ts b/apps/web/src/lib/components/charts/chart-utils.ts
index 2806107..855a910 100644
--- a/apps/web/src/lib/components/charts/chart-utils.ts
+++ b/apps/web/src/lib/components/charts/chart-utils.ts
@@ -64,13 +64,18 @@ export function clampToChartX(chart: Chart | null, x: number): number {
 	return Math.max(area.left, Math.min(area.right, x));
 }
 
-export function indexFromPixelX(chart: Chart | null, pixelX: number): number | null {
+export function indexFromPixelX(
+	chart: Chart | null,
+	pixelX: number,
+	bucketStarts?: readonly number[]
+): number | null {
 	if (!chart?.data.labels) return null;
 	const labels = chart.data.labels;
 	if (!labels || labels.length === 0) return null;
 	const value = chart.scales.x.getValueForPixel(pixelX);
 	if (typeof value !== 'number' || Number.isNaN(value)) return null;
 	if ((chart.scales.x.options as { type?: string }).type === 'linear') {
+		if (bucketStarts) return findNearestValueIndex(bucketStarts, value);
 		const points = chart.data.datasets[0]?.data ?? [];
 		let closestIndex: number | null = null;
 		let closestDistance = Infinity;
@@ -115,7 +120,8 @@ export function beginRangeDrag(
 	event: MouseEvent,
 	chartCanvas: HTMLCanvasElement | null,
 	chart: Chart | null,
-	onPreviewRange?: (startIndex: number, endIndex: number) => void
+	onPreviewRange?: (startIndex: number, endIndex: number) => void,
+	bucketStarts?: readonly number[]
 ): void {
 	if (event.button !== 0 || !chartCanvas) return;
 	const rect = chartCanvas.getBoundingClientRect();
@@ -129,7 +135,7 @@ export function beginRangeDrag(
 	state.dragCurrentX = state.dragStartX;
 	state.selectionTop = area.top;
 	state.selectionHeight = area.bottom - area.top;
-	const startIndex = indexFromPixelX(chart, state.dragStartX);
+	const startIndex = indexFromPixelX(chart, state.dragStartX, bucketStarts);
 	if (startIndex !== null) {
 		onPreviewRange?.(startIndex, startIndex);
 	}
@@ -140,14 +146,15 @@ export function updateRangeDrag(
 	event: MouseEvent,
 	chartCanvas: HTMLCanvasElement | null,
 	chart: Chart | null,
-	onPreviewRange?: (startIndex: number, endIndex: number) => void
+	onPreviewRange?: (startIndex: number, endIndex: number) => void,
+	bucketStarts?: readonly number[]
 ): void {
 	if (!state.isDraggingRange || !chartCanvas) return;
 	const rect = chartCanvas.getBoundingClientRect();
 	const x = event.clientX - rect.left;
 	state.dragCurrentX = clampToChartX(chart, x);
-	const startIndex = indexFromPixelX(chart, state.dragStartX);
-	const endIndex = indexFromPixelX(chart, state.dragCurrentX);
+	const startIndex = indexFromPixelX(chart, state.dragStartX, bucketStarts);
+	const endIndex = indexFromPixelX(chart, state.dragCurrentX, bucketStarts);
 	if (startIndex !== null && endIndex !== null) {
 		onPreviewRange?.(startIndex, endIndex);
 	}
@@ -156,13 +163,14 @@ export function updateRangeDrag(
 export function endRangeDrag(
 	state: RangeDragState,
 	chart: Chart | null,
-	onCommitRange: (startIndex: number, endIndex: number) => void
+	onCommitRange: (startIndex: number, endIndex: number) => void,
+	bucketStarts?: readonly number[]
 ): void {
 	if (!state.isDraggingRange) return;
 	const wasDrag = Math.abs(state.dragCurrentX - state.dragStartX) >= MIN_DRAG_PIXELS;
 	if (wasDrag) {
-		const startIndex = indexFromPixelX(chart, state.dragStartX);
-		const endIndex = indexFromPixelX(chart, state.dragCurrentX);
+		const startIndex = indexFromPixelX(chart, state.dragStartX, bucketStarts);
+		const endIndex = indexFromPixelX(chart, state.dragCurrentX, bucketStarts);
 		if (startIndex !== null && endIndex !== null) {
 			onCommitRange(startIndex, endIndex);
 			state.suppressNextClick = true;
@@ -174,7 +182,8 @@ export function endRangeDrag(
 export function buildMirroredSelectionStyle(
 	chart: Chart | null,
 	mirroredRange: RangeSelectionState | null,
-	sourceChartId: string
+	sourceChartId: string,
+	bucketStarts?: readonly number[]
 ): string | null {
 	if (!mirroredRange || mirroredRange.sourceChartId === sourceChartId || !chart?.data.labels)
 		return null;
@@ -187,20 +196,22 @@ export function buildMirroredSelectionStyle(
 	const from = Math.min(startIndex, endIndex);
 	const to = Math.max(startIndex, endIndex);
 	const firstDataset = chart.data.datasets[0]?.data ?? [];
-	const xValues = firstDataset.reduce<number[]>((values, point) => {
-		if (
-			typeof point === 'object' &&
-			point !== null &&
-			!Array.isArray(point) &&
-			'x' in point &&
-			typeof point.x === 'number' &&
-			Number.isFinite(point.x) &&
-			!values.includes(point.x)
-		) {
-			values.push(point.x);
-		}
-		return values;
-	}, []);
+	const xValues =
+		bucketStarts ??
+		firstDataset.reduce<number[]>((values, point) => {
+			if (
+				typeof point === 'object' &&
+				point !== null &&
+				!Array.isArray(point) &&
+				'x' in point &&
+				typeof point.x === 'number' &&
+				Number.isFinite(point.x) &&
+				!values.includes(point.x)
+			) {
+				values.push(point.x);
+			}
+			return values;
+		}, []);
 	const xValueAt = (index: number): number => {
 		if ((chart.scales.x.options as { type?: string }).type === 'linear') {
 			const uniqueX = xValues[index];
@@ -271,7 +282,8 @@ export type TemporalDataBounds = {
 export function findTemporalDataBounds<T>(
 	items: readonly T[],
 	getTimestamp: (item: T) => number,
-	hasData: (item: T) => boolean
+	hasData: (item: T) => boolean,
+	singleBucketDuration = 0
 ): TemporalDataBounds | null {
 	let min = Infinity;
 	let max = -Infinity;
@@ -284,7 +296,10 @@ export function findTemporalDataBounds<T>(
 		max = Math.max(max, timestamp);
 	}
 
-	return Number.isFinite(min) && Number.isFinite(max) ? { min, max } : null;
+	if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+	return min === max
+		? { min: min - singleBucketDuration / 2, max: max + singleBucketDuration / 2 }
+		: { min, max };
 }
 
 export function getXAxisTitle(groupBy: GroupByOption): string {
diff --git a/apps/web/src/lib/components/charts/crosshair-plugin.ts b/apps/web/src/lib/components/charts/crosshair-plugin.ts
index 0e29a8e..8815504 100644
--- a/apps/web/src/lib/components/charts/crosshair-plugin.ts
+++ b/apps/web/src/lib/components/charts/crosshair-plugin.ts
@@ -1,4 +1,4 @@
-import type { Chart, ChartArea, Plugin, ChartEvent } from 'chart.js';
+import type { Chart, ChartArea, Plugin, ChartEvent, ChartType } from 'chart.js';
 import { cancelDrawFrame, requestDrawFrame } from '#lib/utils/animation-frame.ts';
 import { findNearestValueIndex } from './chart-utils';
 
@@ -39,6 +39,12 @@ interface CrosshairOptions {
 	};
 }
 
+declare module 'chart.js' {
+	interface PluginOptionsByType<TType extends ChartType> {
+		verticalCrosshair?: TType extends 'line' | 'bar' | 'scatter' ? CrosshairOptions | false : never;
+	}
+}
+
 // Store mouse state for each chart instance
 const chartStates = new WeakMap<Chart, CrosshairState>();
 
diff --git a/apps/web/src/lib/components/charts/ip-time-axis.ts b/apps/web/src/lib/components/charts/ip-time-axis.ts
index 1155433..20620d9 100644
--- a/apps/web/src/lib/components/charts/ip-time-axis.ts
+++ b/apps/web/src/lib/components/charts/ip-time-axis.ts
@@ -76,10 +76,10 @@ export function shouldHighlightIpGranularityGrid(
 	return index === 0;
 }
 
-export function placeTicksOnBucketStarts(bucketStarts: number[]) {
+export function placeTicksOnBucketStarts(bucketStarts: number[], minimumTickCount = 2) {
 	return (axis: { min: number; max: number; ticks: Array<{ value: number }> }) => {
 		const visibleStarts = bucketStarts.filter((value) => value >= axis.min && value <= axis.max);
-		if (visibleStarts.length < 2) {
+		if (visibleStarts.length < minimumTickCount) {
 			return;
 		}
 		axis.ticks = visibleStarts.map((value) => ({ value }));
diff --git a/apps/web/src/lib/components/charts/spectrum-points.ts b/apps/web/src/lib/components/charts/spectrum-points.ts
new file mode 100644
index 0000000..72bacae
--- /dev/null
+++ b/apps/web/src/lib/components/charts/spectrum-points.ts
@@ -0,0 +1,10 @@
+import type { SpectrumPoint } from '#lib/types/types.ts';
+
+export function finiteSpectrumPoints(points: SpectrumPoint[]): SpectrumPoint[] {
+	return points.filter((point) => Number.isFinite(point.alpha) && Number.isFinite(point.f));
+}
+
+export function paddedSpectrumBounds(min: number, max: number) {
+	const padding = Math.max((max - min) * 0.05, Math.max(Math.abs(min), Math.abs(max), 1) * 0.01);
+	return { min: min - padding, max: max + padding };
+}
diff --git a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
index 5126e99..92c64f1 100644
--- a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
+++ b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import DatasetTabs from '#lib/components/datasets/DatasetTabs.svelte';
 	import PrimaryFilters from '#lib/components/filters/PrimaryFilters.svelte';
 	import NetflowDashboard from '#lib/components/netflow/NetflowDashboard.svelte';
@@ -61,8 +61,7 @@
 		}
 		return routerConfig;
 	}
-	let selectedRouters = $state<RouterConfig>({});
-	let selectedSpectrumRouter = $state('');
+	let requestedSpectrumRouter = $state('');
 	let selectedSpectrumAddressType = $state<'sa' | 'da'>('sa');
 	let dataOptions = $state<DataOption[]>(DEFAULT_DATA_OPTIONS.map((option) => ({ ...option })));
 	const defaultIpMetrics: IpMetricKey[] = IP_METRIC_OPTIONS.slice(0, 2).map((option) => option.key);
@@ -186,7 +185,16 @@
 	);
 	const routers = $derived(Array.isArray(props.routers) ? props.routers : []);
 	const routerStateKey = $derived(`${props.dataset}:${routers.join('\0')}`);
+	let selectedRouters = $derived.by(() => {
+		void routerStateKey;
+		return createRouterConfig(untrack(() => routers));
+	});
 	const availableSpectrumRouters = $derived(getEnabledRouters(selectedRouters));
+	const selectedSpectrumRouter = $derived(
+		availableSpectrumRouters.includes(requestedSpectrumRouter)
+			? requestedSpectrumRouter
+			: (availableSpectrumRouters[0] ?? '')
+	);
 	const routersLoaded = $derived(Array.isArray(props.routers));
 	const flowCharacteristics = createFlowCharacteristicsData(() => ({
 		enabled: activatedCharts.characteristics || activatedCharts.ports,
@@ -342,29 +350,6 @@
 		activateChart(chartOrder[0] ?? 'dashboard');
 	});
 
-	let lastRouterStateKey = $state('');
-
-	$effect(() => {
-		const nextKey = routerStateKey;
-		if (nextKey === lastRouterStateKey) {
-			return;
-		}
-		lastRouterStateKey = nextKey;
-
-		const nextRouters = routers;
-		const nextSelectedRouters = createRouterConfig(nextRouters);
-		selectedRouters = nextSelectedRouters;
-
-		const enabledRouters = getEnabledRouters(nextSelectedRouters);
-		selectedSpectrumRouter = nextRouters[0] ?? enabledRouters[0] ?? '';
-	});
-
-	$effect(() => {
-		if (!availableSpectrumRouters.includes(selectedSpectrumRouter)) {
-			selectedSpectrumRouter = availableSpectrumRouters[0] ?? '';
-		}
-	});
-
 	function handleStartDateChange(payload: { startDate: string }) {
 		updateSearch({ startDate: payload.startDate });
 	}
@@ -396,10 +381,6 @@
 	function handleRoutersChange(payload: { routers: RouterConfig }) {
 		const nextRouters = payload.routers;
 		selectedRouters = nextRouters;
-		const enabledRouters = getEnabledRouters(nextRouters);
-		if (!enabledRouters.includes(selectedSpectrumRouter)) {
-			selectedSpectrumRouter = enabledRouters[0] ?? '';
-		}
 	}
 
 	function handleDataOptionsChange(payload: { options: DataOption[] }) {
@@ -612,7 +593,7 @@
 						{direction}
 						onDrillDown={handleDrillDown}
 						onRouterChange={(payload) => {
-							selectedSpectrumRouter = payload.router;
+							requestedSpectrumRouter = payload.router;
 						}}
 						onAddressTypeChange={(payload) => {
 							selectedSpectrumAddressType = payload.addressType;
diff --git a/apps/web/src/lib/server/netflow-v3.ts b/apps/web/src/lib/server/netflow-v3.ts
index 41026cf..667698d 100644
--- a/apps/web/src/lib/server/netflow-v3.ts
+++ b/apps/web/src/lib/server/netflow-v3.ts
@@ -437,7 +437,9 @@ export function buildSpectrumPoints(spectrum: MaadBlob): SpectrumPoint[] | null
 
 	const points: SpectrumPoint[] = [];
 	for (let i = 0; i < values.length; i += 2) {
-		points.push({ alpha: values[i], f: values[i + 1] });
+		if (Number.isFinite(values[i]) && Number.isFinite(values[i + 1])) {
+			points.push({ alpha: values[i], f: values[i + 1] });
+		}
 	}
 	return points;
 }
diff --git a/apps/web/tests/e2e/datasets.spec.ts b/apps/web/tests/e2e/datasets.spec.ts
index 81111d1..d0891d1 100644
--- a/apps/web/tests/e2e/datasets.spec.ts
+++ b/apps/web/tests/e2e/datasets.spec.ts
@@ -11,7 +11,7 @@ test('dataset metadata is served from the fixture product', async ({ request })
 				label: 'Playwright Fixture',
 				defaultStartDate: '2025-03-01',
 				discoveryMode: 'static',
-				hasLocality: false,
+				hasLocality: true,
 				isDefault: true
 			}
 		],
diff --git a/apps/web/tests/e2e/playwright-fixture.js b/apps/web/tests/e2e/playwright-fixture.js
index d992c15..f5993ec 100644
--- a/apps/web/tests/e2e/playwright-fixture.js
+++ b/apps/web/tests/e2e/playwright-fixture.js
@@ -71,6 +71,44 @@ export function seedPlaywrightDatabase() {
 			(4, -0.5, 0.125, 33),
 			(6, -0.5, 0.125, 33);
 	`);
+	database.exec(`
+		UPDATE datasets SET has_locality = 1 WHERE id = 'playwright';
+		INSERT INTO address_maad_stats (
+			source_id, granularity, bucket_start, bucket_end, ip_version, src_locality, dst_locality,
+			address_side, measure, total_addrs, d0, d1, d2, tau, tau_sd, spectrum
+		)
+		SELECT source_id, g.granularity,
+			CASE WHEN g.granularity = '1d' THEN 1740816000 ELSE 1740823200 END,
+			CASE WHEN g.granularity = '1d' THEN 1740902400 ELSE 1740823200 + g.duration END,
+			ip_version, src_locality, dst_locality, address_side, measure, total_addrs,
+			d0, d1, d2, tau, tau_sd, spectrum
+		FROM address_maad_stats CROSS JOIN (
+			SELECT '1d' AS granularity, 86400 AS duration UNION ALL SELECT '1h', 3600
+			UNION ALL SELECT '30m', 1800 UNION ALL SELECT '10m', 600
+		) g
+		WHERE address_maad_stats.granularity = '5m' AND measure = 'addresses';
+		INSERT INTO address_maad_stats (
+			source_id, granularity, bucket_start, bucket_end, ip_version, src_locality, dst_locality,
+			address_side, measure, total_addrs, d0, d1, d2, tau, tau_sd, spectrum
+		)
+		SELECT source_id, granularity, bucket_start, bucket_end, ip_version, l.src, l.dst,
+			address_side, measure, total_addrs, d0, d1, d2, tau, tau_sd, spectrum
+		FROM address_maad_stats CROSS JOIN (
+			SELECT 'external' AS src, 'internal' AS dst UNION ALL SELECT 'internal', 'external'
+			UNION ALL SELECT 'internal', 'internal' UNION ALL SELECT 'external', 'external'
+		) l WHERE src_locality = 'all' AND measure = 'addresses';
+	`);
+
+	database.exec(`
+		INSERT INTO bucket_coverage (
+			source_id, granularity, bucket_start, bucket_end,
+			coverage_state, observed_units, expected_units, rejected_units
+		)
+		SELECT DISTINCT source_id, granularity, bucket_start, bucket_end,
+			'complete', (bucket_end - bucket_start) / 300, (bucket_end - bucket_start) / 300, 0
+		FROM address_maad_stats WHERE granularity IN ('1h', '30m', '10m');
+	`);
+
 	database.close();
 	return { databasePath, fixtureDirectory };
 }
diff --git a/apps/web/tests/e2e/spectrum-chart.spec.ts b/apps/web/tests/e2e/spectrum-chart.spec.ts
new file mode 100644
index 0000000..34b62da
--- /dev/null
+++ b/apps/web/tests/e2e/spectrum-chart.spec.ts
@@ -0,0 +1,228 @@
+import { expect, test, type Locator, type Page } from '@playwright/test';
+
+declare global {
+	interface Window {
+		spectrumText: string[];
+	}
+}
+
+const DASHBOARD = '/datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min';
+
+async function paintedPoint(canvas: Locator) {
+	return canvas.evaluate((element: HTMLCanvasElement) => {
+		const context = element.getContext('2d');
+		if (!context) return null;
+		const { data } = context.getImageData(0, 0, element.width, element.height);
+		const points: number[] = [];
+		for (let index = 0; index < data.length; index += 4) {
+			const [r, g, b, a] = data.subarray(index, index + 4);
+			if (a > 100 && Math.max(r, g, b) - Math.min(r, g, b) > 60) points.push(index / 4);
+		}
+		if (points.length === 0) return null;
+		const pixel = points[Math.floor(points.length / 2)];
+		const rect = element.getBoundingClientRect();
+		return {
+			x: rect.left + ((pixel % element.width) * rect.width) / element.width,
+			y: rect.top + (Math.floor(pixel / element.width) * rect.height) / element.height
+		};
+	});
+}
+
+async function rendered(canvas: Locator) {
+	await expect(canvas).toBeVisible();
+	await expect.poll(() => paintedPoint(canvas)).not.toBeNull();
+}
+
+async function openSpectrum(page: Page) {
+	await page.goto(DASHBOARD);
+	const card = page.locator('[data-chart-id="spectrum"]');
+	await card.scrollIntoViewIfNeeded();
+	const canvas = card.getByLabel('Spectrum chart');
+	await rendered(canvas);
+	return { card, canvas };
+}
+
+async function hoverSpectrum(page: Page, canvas: Locator) {
+	await canvas.scrollIntoViewIfNeeded();
+	const point = await paintedPoint(canvas);
+	expect(point).not.toBeNull();
+	await page.mouse.move(point!.x, point!.y);
+}
+
+test('renders a singleton bucket and recovers from cached empty, unavailable and deselected states', async ({
+	page
+}) => {
+	const errors: string[] = [];
+	page.on('pageerror', (error) => errors.push(error.message));
+	const { card, canvas } = await openSpectrum(page);
+	const family = page.getByRole('group', { name: 'MAAD address family' });
+	for (let attempt = 0; attempt < 2; attempt += 1) {
+		await family.getByRole('button', { name: 'IPv6 (/23–/64)' }).click();
+		await expect(card).toContainText('No source spectrum data');
+		await family.getByRole('button', { name: 'IPv4 (/8–/24)' }).click();
+		await rendered(canvas);
+		await hoverSpectrum(page, canvas);
+		await expect(card.getByRole('tooltip')).toContainText('2025-03-01 02:00');
+	}
+	for (const measure of ['Packets', 'Bytes']) {
+		await page
+			.getByRole('group', { name: 'MAAD measure' })
+			.getByRole('button', { name: measure })
+			.click();
+		await expect(card.getByTestId('chart-unavailable')).toBeVisible();
+		await expect(card.getByRole('tooltip')).not.toBeAttached();
+		await page
+			.getByRole('group', { name: 'MAAD measure' })
+			.getByRole('button', { name: 'Addresses' })
+			.click();
+		await rendered(canvas);
+	}
+	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
+	await expect(card).toContainText('Select at least one source');
+	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
+	await rendered(canvas);
+	await hoverSpectrum(page, canvas);
+	await expect(card.getByRole('tooltip')).toBeVisible();
+	expect(errors).toEqual([]);
+});
+
+test('keeps painted points and hover across granularity, direction, side, date and reset changes', async ({
+	page
+}) => {
+	const { card, canvas } = await openSpectrum(page);
+	for (const granularity of ['Day', 'Hour', '30 min', '10 min', '5 min']) {
+		await page.getByRole('button', { name: granularity, exact: true }).click();
+		await rendered(canvas);
+		await hoverSpectrum(page, canvas);
+		await expect(card.getByRole('tooltip')).toContainText('2025-03-01');
+	}
+	for (const direction of ['Ingress', 'Egress', 'Lateral', 'Transit', 'All']) {
+		await page
+			.getByRole('group', { name: 'Traffic direction' })
+			.getByRole('button', { name: direction, exact: true })
+			.click();
+		await rendered(canvas);
+	}
+	await card.getByRole('button', { name: 'Destination', exact: true }).click();
+	await rendered(canvas);
+	await page.getByLabel('End Date', { exact: true }).fill('2025-03-02');
+	await page.getByLabel('End Date', { exact: true }).press('Tab');
+	await rendered(canvas);
+	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-02');
+	await page.getByLabel('Start Date', { exact: true }).press('Tab');
+	await expect(card).toContainText('No destination spectrum data');
+	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-01');
+	await page.getByLabel('Start Date', { exact: true }).press('Tab');
+	await rendered(canvas);
+	await page.getByRole('button', { name: 'Reset View' }).click();
+	await rendered(canvas);
+	await hoverSpectrum(page, canvas);
+	await expect(card.getByRole('tooltip')).toBeVisible();
+});
+
+test('aborts an older request when a newer filter is selected', async ({ page }) => {
+	const { canvas } = await openSpectrum(page);
+	let release = () => {};
+	const blocked = new Promise<void>((resolve) => {
+		release = resolve;
+	});
+	await page.route('**/api/netflow/spectrum-stats?**', async (route) => {
+		if (new URL(route.request().url()).searchParams.get('granularity') === '1h') await blocked;
+		await route.continue();
+	});
+	const oldRequest = page.waitForRequest(
+		(request) =>
+			request.url().includes('/spectrum-stats?') &&
+			new URL(request.url()).searchParams.get('granularity') === '1h'
+	);
+	await page.getByRole('button', { name: 'Hour', exact: true }).click();
+	const pending = await oldRequest;
+	const aborted = page.waitForEvent('requestfailed', {
+		predicate: (request) => request === pending
+	});
+	await page.getByRole('button', { name: '10 min', exact: true }).click();
+	await rendered(canvas);
+	const before = await canvas.evaluate((element: HTMLCanvasElement) => element.toDataURL());
+	release();
+	await aborted;
+	await page.unrouteAll({ behavior: 'wait' });
+	await expect
+		.poll(() => canvas.evaluate((element: HTMLCanvasElement) => element.toDataURL()))
+		.toBe(before);
+});
+
+test('opens the time bucket under a spectrum point instead of using its flattened index', async ({
+	page
+}) => {
+	const { canvas } = await openSpectrum(page);
+	await hoverSpectrum(page, canvas);
+	const point = await paintedPoint(canvas);
+	await page.mouse.click(point!.x, point!.y);
+	await expect(page).toHaveURL(/\/netflow\/files\/202503010200\?/);
+});
+
+test('shows explicit empty states for invalid spectrum points on dashboard and file views', async ({
+	page
+}) => {
+	await page.route('**/api/netflow/spectrum-stats?**', async (route) => {
+		const response = await route.fetch();
+		const body = await response.json();
+		for (const timeline of body.timelines) {
+			for (const bucket of timeline.buckets) {
+				if (bucket.data) bucket.data.spectrumSa = [{ alpha: null, f: null }];
+			}
+		}
+		await route.fulfill({ json: body });
+	});
+	await page.goto(DASHBOARD);
+	const card = page.locator('[data-chart-id="spectrum"]');
+	await card.scrollIntoViewIfNeeded();
+	await expect(card).toContainText('No source spectrum data');
+	await expect(card.locator('canvas')).not.toBeAttached();
+	await page.route('**/api/netflow/files/*/details?**', async (route) => {
+		const response = await route.fetch();
+		const body = await response.json();
+		for (const router of body.routers) router.spectrumSource.spectrum = [{ alpha: null, f: null }];
+		await route.fulfill({ json: body });
+	});
+	await page.goto('/netflow/files/202503010200?dataset=playwright');
+	await expect(page.getByText('No finite spectrum data for this selection.')).toBeVisible();
+});
+
+test('file spectrum hover describes only a spectrum point after measure and family changes', async ({
+	page
+}) => {
+	await page.addInitScript(() => {
+		const state = window;
+		state.spectrumText = [];
+		const fillText = CanvasRenderingContext2D.prototype.fillText;
+		CanvasRenderingContext2D.prototype.fillText = function (...args) {
+			state.spectrumText.push(args[0]);
+			return fillText.apply(this, args);
+		};
+	});
+	await page.goto('/netflow/files/202503010200?dataset=playwright');
+	const canvas = page.getByLabel('Multifractal spectrum chart').first();
+	await rendered(canvas);
+	await page.getByRole('button', { name: 'Packets', exact: true }).click();
+	await expect(canvas).not.toBeAttached();
+	await page.getByRole('button', { name: 'Addresses', exact: true }).click();
+	await rendered(canvas);
+	await page.getByRole('button', { name: 'IPv6 (/23–/64)' }).click();
+	await expect(canvas).not.toBeAttached();
+	await page.getByRole('button', { name: 'IPv4 (/8–/24)' }).click();
+	await rendered(canvas);
+	await canvas.scrollIntoViewIfNeeded();
+	await page.evaluate(() => {
+		window.spectrumText = [];
+	});
+	await hoverSpectrum(page, canvas);
+	await expect
+		.poll(() =>
+			page.evaluate(() => window.spectrumText.some((text) => text.startsWith('alpha = ')))
+		)
+		.toBe(true);
+	const text = await page.evaluate(() => window.spectrumText);
+	expect(text.some((value) => value.startsWith('f(alpha): '))).toBe(true);
+	expect(text.some((value) => value.startsWith('y = x (reference):'))).toBe(false);
+});
diff --git a/apps/web/tests/lib/chart-utils.test.ts b/apps/web/tests/lib/chart-utils.test.ts
index 29f595d..238307e 100644
--- a/apps/web/tests/lib/chart-utils.test.ts
+++ b/apps/web/tests/lib/chart-utils.test.ts
@@ -1,6 +1,9 @@
+import type { Chart } from 'chart.js';
 import { describe, expect, it } from 'vitest';
 import {
 	clampGroupByToDateRange,
+	indexFromPixelX,
+	buildMirroredSelectionStyle,
 	buildTemporalChartPoints,
 	findTemporalDataBounds,
 	findNearestValueIndex,
@@ -90,6 +93,12 @@ describe('shared IP granularity chart labels', () => {
 		).toEqual(['Mon 3/2', 'Tue 3/3']);
 	});
 
+	it('can show one bucket tick when the caller pads singleton bounds', () => {
+		const axis = { min: 99, max: 101, ticks: [{ value: 99 }, { value: 100 }, { value: 101 }] };
+		placeTicksOnBucketStarts([100], 1)(axis);
+		expect(axis.ticks).toEqual([{ value: 100 }]);
+	});
+
 	it('keeps the default linear ticks when fewer than two buckets fall inside the axis', () => {
 		const axis = { min: 99, max: 101, ticks: [{ value: 99 }, { value: 100 }, { value: 101 }] };
 
@@ -162,3 +171,51 @@ describe('coverage-aware chart data', () => {
 		expect(isCoverageSegmentDashed(completePoint, completePoint)).toBe(false);
 	});
 });
+
+describe('spectrum time buckets', () => {
+	it('expands a singleton time bucket by its duration', () => {
+		expect(
+			findTemporalDataBounds(
+				[1000],
+				(value) => value,
+				() => true,
+				300
+			)
+		).toEqual({ min: 850, max: 1150 });
+		expect(
+			findTemporalDataBounds(
+				[1000, 1600],
+				(value) => value,
+				() => true,
+				300
+			)
+		).toEqual({ min: 1000, max: 1600 });
+	});
+
+	it('uses bucket positions for selection even when scatter points repeat or skip buckets', () => {
+		const chart = {
+			data: {
+				labels: ['a', 'b', 'c'],
+				datasets: [{ data: [{ x: 100 }, { x: 100 }, { x: 300 }, { x: 300 }] }]
+			},
+			scales: {
+				x: {
+					options: { type: 'linear' },
+					getValueForPixel: (value: number) => value,
+					getPixelForValue: (value: number) => value
+				}
+			},
+			chartArea: { left: 0, right: 400, top: 0, bottom: 200 }
+		} as unknown as Chart;
+		expect(indexFromPixelX(chart, 200, [100, 200, 300])).toBe(1);
+		expect(indexFromPixelX(chart, 300, [100, 200, 300])).toBe(2);
+		expect(
+			buildMirroredSelectionStyle(
+				chart,
+				{ sourceChartId: 'another-chart', startLabel: 'a', endLabel: 'b' },
+				'spectrum',
+				[100, 200, 300]
+			)
+		).toBe('left:100px; width:100px; top:0px; height:200px;');
+	});
+});
diff --git a/apps/web/tests/lib/server/netflow-v3.test.ts b/apps/web/tests/lib/server/netflow-v3.test.ts
index bc9472d..f12fba4 100644
--- a/apps/web/tests/lib/server/netflow-v3.test.ts
+++ b/apps/web/tests/lib/server/netflow-v3.test.ts
@@ -274,6 +274,14 @@ describe('netflow v3 helpers', () => {
 		expect(buildSpectrumPoints(null)).toBeNull();
 	});
 
+	it('omits non-finite spectrum pairs before JSON serialization can turn them into null coordinates', () => {
+		expect(buildSpectrumPoints(f32([0, 0, NaN, 1, 2, Infinity, -1, -2]))).toEqual([
+			{ alpha: 0, f: 0 },
+			{ alpha: -1, f: -2 }
+		]);
+		expect(buildSpectrumPoints(f32([Infinity, NaN]))).toEqual([]);
+	});
+
 	it('rejects spectrum blobs that do not hold whole alpha/f pairs', () => {
 		expect(() => buildSpectrumPoints(f32([1, 2, 3]))).toThrow(MaadDataError);
 		expect(() => buildSpectrumPoints(Uint8Array.from([0, 0, 128, 63, 0, 0]))).toThrow(
diff --git a/apps/web/tests/lib/spectrum-points.test.ts b/apps/web/tests/lib/spectrum-points.test.ts
new file mode 100644
index 0000000..a306b2b
--- /dev/null
+++ b/apps/web/tests/lib/spectrum-points.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import {
+	finiteSpectrumPoints,
+	paddedSpectrumBounds
+} from '../../src/lib/components/charts/spectrum-points';
+
+describe('spectrum display points', () => {
+	it('keeps finite zero and negative coordinates while dropping non-finite pairs', () => {
+		expect(
+			finiteSpectrumPoints([
+				{ alpha: 0, f: 0 },
+				{ alpha: -1, f: -2 },
+				{ alpha: Number.NaN, f: 1 },
+				{ alpha: 1, f: Infinity }
+			])
+		).toEqual([
+			{ alpha: 0, f: 0 },
+			{ alpha: -1, f: -2 }
+		]);
+	});
+
+	it('gives constant and nearly constant spectra a visible axis range', () => {
+		expect(paddedSpectrumBounds(0, 0)).toEqual({ min: -0.01, max: 0.01 });
+		expect(paddedSpectrumBounds(0.2, 0.2).min).toBeCloseTo(0.19);
+		expect(paddedSpectrumBounds(0.2, 0.2).max).toBeCloseTo(0.21);
+		const bounds = paddedSpectrumBounds(0.2, 0.20000001);
+		expect(bounds.max - bounds.min).toBeGreaterThan(0.02);
+		expect(paddedSpectrumBounds(0, 2)).toEqual({ min: -0.1, max: 2.1 });
+	});
+});