diff --git a/src/components/LanguageSelector.astro b/src/components/LanguageSelector.astro
index a489c88..30fb4a2 100644
--- a/src/components/LanguageSelector.astro
+++ b/src/components/LanguageSelector.astro
@@ -61,39 +61,45 @@ const dropdownClass = isUp
 </div>
 
 <script>
-	document.querySelectorAll('[data-lang-wrapper]').forEach((wrapper) => {
-		const btn = wrapper.querySelector('[data-lang-btn]')
-		const dropdown = wrapper.querySelector('[data-lang-dropdown]')
-		const chevron = wrapper.querySelector('[data-lang-chevron]')
-		const isUp = wrapper.getAttribute('data-lang-direction') === 'up'
+	import { onHydration } from '../utils/hydration'
 
-		btn?.addEventListener('click', (e) => {
-			e.stopPropagation()
-			const isOpen = !dropdown?.classList.contains('hidden')
-			dropdown?.classList.toggle('hidden')
-			if (chevron && !isUp) {
-				chevron.classList.toggle('rotate-180', isOpen)
-			}
-		})
-	})
+	function initLangSelector() {
+		document.querySelectorAll('[data-lang-wrapper]').forEach((wrapper) => {
+			const btn = wrapper.querySelector('[data-lang-btn]')
+			const dropdown = wrapper.querySelector('[data-lang-dropdown]')
+			const chevron = wrapper.querySelector('[data-lang-chevron]')
+			const isUp = wrapper.getAttribute('data-lang-direction') === 'up'
 
-	document.addEventListener('click', () => {
-		document.querySelectorAll('[data-lang-dropdown]').forEach((dropdown) => {
-			dropdown.classList.add('hidden')
-		})
-		document.querySelectorAll('[data-lang-chevron]').forEach((chevron) => {
-			chevron.classList.remove('rotate-180')
+			btn?.addEventListener('click', (e) => {
+				e.stopPropagation()
+				const isOpen = !dropdown?.classList.contains('hidden')
+				dropdown?.classList.toggle('hidden')
+				if (chevron && !isUp) {
+					chevron.classList.toggle('rotate-180', isOpen)
+				}
+			})
 		})
-	})
 
-	document.addEventListener('keydown', (e) => {
-		if (e.key === 'Escape') {
+		document.addEventListener('click', () => {
 			document.querySelectorAll('[data-lang-dropdown]').forEach((dropdown) => {
 				dropdown.classList.add('hidden')
 			})
 			document.querySelectorAll('[data-lang-chevron]').forEach((chevron) => {
 				chevron.classList.remove('rotate-180')
 			})
-		}
-	})
+		})
+
+		document.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				document.querySelectorAll('[data-lang-dropdown]').forEach((dropdown) => {
+					dropdown.classList.add('hidden')
+				})
+				document.querySelectorAll('[data-lang-chevron]').forEach((chevron) => {
+					chevron.classList.remove('rotate-180')
+				})
+			}
+		})
+	}
+
+	onHydration(initLangSelector)
 </script>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 293e771..2dbaba2 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -136,27 +136,33 @@ import logoLight from '../assets/logo-light.png'
 </aside>
 
 <script>
-	const toggle = document.getElementById('theme-toggle')
-	const icon = toggle?.querySelector('.theme-icon')
-	const text = toggle?.querySelector('.theme-text')
-
-	function updateTheme() {
-		const isDark = document.documentElement.classList.contains('dark')
-		if (icon) {
-			icon.className = `theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
-		}
-		if (text && toggle) {
-			text.textContent = isDark
-				? toggle.dataset.darkLabel || 'Light Mode'
-				: toggle.dataset.lightLabel || 'Dark Mode'
+	import { onHydration } from '../utils/hydration'
+
+	function initSidebarTheme() {
+		const toggle = document.getElementById('theme-toggle')
+		const icon = toggle?.querySelector('.theme-icon')
+		const text = toggle?.querySelector('.theme-text')
+
+		function updateTheme() {
+			const isDark = document.documentElement.classList.contains('dark')
+			if (icon) {
+				icon.className = `theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
+			}
+			if (text && toggle) {
+				text.textContent = isDark
+					? toggle.dataset.darkLabel || 'Light Mode'
+					: toggle.dataset.lightLabel || 'Dark Mode'
+			}
 		}
-	}
 
-	toggle?.addEventListener('click', () => {
-		document.documentElement.classList.toggle('dark')
-		localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
+		toggle?.addEventListener('click', () => {
+			document.documentElement.classList.toggle('dark')
+			localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
+			updateTheme()
+		})
+
 		updateTheme()
-	})
+	}
 
-	updateTheme()
+	onHydration(initSidebarTheme)
 </script>
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro
index ff095d0..9690297 100644
--- a/src/components/TopBar.astro
+++ b/src/components/TopBar.astro
@@ -84,64 +84,70 @@ const mappedArticles = rawArticles.map((a) => ({
 </header>
 
 <script define:vars={{ mappedArticles }}>
-	const mobileToggle = document.getElementById('mobile-theme-toggle')
-	const desktopToggle = document.getElementById('desktop-theme-toggle')
-	const mobileIcon = mobileToggle?.querySelector('.mobile-theme-icon')
-	const desktopIcon = desktopToggle?.querySelector('.desktop-theme-icon')
-
-	function updateMobileTheme() {
-		const isDark = document.documentElement.classList.contains('dark')
-		if (mobileIcon) {
-			mobileIcon.className = `mobile-theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
+	import { onHydration } from '../utils/hydration'
+
+	function initTopBar() {
+		const mobileToggle = document.getElementById('mobile-theme-toggle')
+		const desktopToggle = document.getElementById('desktop-theme-toggle')
+		const mobileIcon = mobileToggle?.querySelector('.mobile-theme-icon')
+		const desktopIcon = desktopToggle?.querySelector('.desktop-theme-icon')
+
+		function updateMobileTheme() {
+			const isDark = document.documentElement.classList.contains('dark')
+			if (mobileIcon) {
+				mobileIcon.className = `mobile-theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
+			}
+			if (desktopIcon) {
+				desktopIcon.className = `desktop-theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
+			}
 		}
-		if (desktopIcon) {
-			desktopIcon.className = `desktop-theme-icon w-4 h-4 ${isDark ? 'i-lucide-sun' : 'i-lucide-moon'}`
+
+		function toggleTheme() {
+			document.documentElement.classList.toggle('dark')
+			localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
+			updateMobileTheme()
 		}
-	}
 
-	function toggleTheme() {
-		document.documentElement.classList.toggle('dark')
-		localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
-		updateMobileTheme()
-	}
+		mobileToggle?.addEventListener('click', toggleTheme)
+		desktopToggle?.addEventListener('click', toggleTheme)
 
-	mobileToggle?.addEventListener('click', toggleTheme)
-	desktopToggle?.addEventListener('click', toggleTheme)
+		const searchInput = document.getElementById('search-input')
+		const searchResults = document.getElementById('search-results')
 
-	const searchInput = document.getElementById('search-input')
-	const searchResults = document.getElementById('search-results')
+		const articles = mappedArticles
 
-	const articles = mappedArticles
+		searchInput?.addEventListener('input', (e) => {
+			const query = e.target.value
+			if (query.length < 2) {
+				searchResults?.classList.add('hidden')
+				return
+			}
 
-	searchInput?.addEventListener('input', (e) => {
-		const query = e.target.value
-		if (query.length < 2) {
-			searchResults?.classList.add('hidden')
-			return
-		}
+			const filtered = articles.filter((a) => a.title.toLowerCase().includes(query.toLowerCase())).slice(0, 5)
 
-		const filtered = articles.filter((a) => a.title.toLowerCase().includes(query.toLowerCase())).slice(0, 5)
-
-		if (filtered.length > 0 && searchResults) {
-			searchResults.innerHTML = filtered
-				.map(
-					(a) => `
+			if (filtered.length > 0 && searchResults) {
+				searchResults.innerHTML = filtered
+					.map(
+						(a) => `
         <a href="/articles/${a.id}" class="block w-full text-left px-4 py-3 text-sm hover:bg-muted dark:hover:bg-muted-dark transition-colors border-b border-border/50 dark:border-border-dark/50 last:border-0 text-foreground dark:text-foreground-dark">
           <div class="font-medium">${a.title}</div>
           <div class="text-xs text-muted-foreground dark:text-muted-dark-foreground mt-0.5">${a.category}</div>
         </a>
       `,
-				)
-				.join('')
-			searchResults.classList.remove('hidden')
-		} else {
-			searchResults?.classList.add('hidden')
-		}
-	})
+					)
+					.join('')
+				searchResults.classList.remove('hidden')
+			} else {
+				searchResults?.classList.add('hidden')
+			}
+		})
+
+		searchInput?.addEventListener('blur', () => {
+			setTimeout(() => searchResults?.classList.add('hidden'), 200)
+		})
 
-	searchInput?.addEventListener('blur', () => {
-		setTimeout(() => searchResults?.classList.add('hidden'), 200)
-	})
+		updateMobileTheme()
+	}
 
-	updateMobileTheme()
+	onHydration(initTopBar)
 </script>
diff --git a/src/components/content/AreaChart.astro b/src/components/content/AreaChart.astro
index 009dade..eaf5d86 100644
--- a/src/components/content/AreaChart.astro
+++ b/src/components/content/AreaChart.astro
@@ -63,299 +63,312 @@ const chartColors = JSON.stringify(colors)
 <script>
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
+	import { onHydration } from '../../utils/hydration'
+
+	function initAreaCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="area-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
+				? JSON.parse(rawData)
+				: []
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
+			const strokeWidth = parseFloat((wrapper as HTMLElement).dataset.chartStrokeWidth || '2.5')
+			const fillOpacity = parseFloat((wrapper as HTMLElement).dataset.chartFillOpacity || '0.2')
+			const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '5')
+			const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
+			const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
+			const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
+
+			if (!chartData.length) return
+
+			const margin = { top: 20, right: 20, bottom: 40, left: 60 }
+			const tooltip = createTooltip(container)
+
+			function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
+				const { axisColor } = getThemeColors()
+				axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
+				axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
+				axisG
+					.selectAll('.tick text')
+					.attr('fill', textColor)
+					.style('fill', textColor)
+					.attr('font-size', '12px')
+					.attr('font-family', 'inherit')
+					.style('font-weight', '500')
+			}
 
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="area-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
-			? JSON.parse(rawData)
-			: []
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
-		const strokeWidth = parseFloat((wrapper as HTMLElement).dataset.chartStrokeWidth || '2.5')
-		const fillOpacity = parseFloat((wrapper as HTMLElement).dataset.chartFillOpacity || '0.2')
-		const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '5')
-		const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
-		const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
-		const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
-
-		if (!chartData.length) return
-
-		const margin = { top: 20, right: 20, bottom: 40, left: 60 }
-		const tooltip = createTooltip(container)
-
-		function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
-			const { axisColor } = getThemeColors()
-			axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
-			axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
-			axisG
-				.selectAll('.tick text')
-				.attr('fill', textColor)
-				.style('fill', textColor)
-				.attr('font-size', '12px')
-				.attr('font-family', 'inherit')
-				.style('font-weight', '500')
-		}
-
-		function renderGrid(
-			g: d3.Selection<SVGGElement, unknown, null, undefined>,
-			y: d3.ScaleLinear<number, number>,
-			w: number,
-			gridColor: string,
-		) {
-			const gridG = g.append('g').attr('class', 'grid')
-			gridG.call(
-				d3
-					.axisLeft(y)
-					.tickSize(-w)
-					.tickFormat(() => ''),
-			)
-			gridG.selectAll('line').style('stroke', gridColor).style('stroke-dasharray', '3,3').style('stroke-width', 1)
-			gridG.select('.domain').remove()
-			return gridG
-		}
-
-		function initChart() {
-			container.innerHTML = ''
-			const width = container.clientWidth
-			const h = chartHeight
-			const innerWidth = width - margin.left - margin.right
-			const innerHeight = h - margin.top - margin.bottom
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.className = 'chart-title'
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+			function renderGrid(
+				g: d3.Selection<SVGGElement, unknown, null, undefined>,
+				y: d3.ScaleLinear<number, number>,
+				w: number,
+				gridColor: string,
+			) {
+				const gridG = g.append('g').attr('class', 'grid')
+				gridG.call(
+					d3
+						.axisLeft(y)
+						.tickSize(-w)
+						.tickFormat(() => ''),
+				)
+				gridG
+					.selectAll('line')
+					.style('stroke', gridColor)
+					.style('stroke-dasharray', '3,3')
+					.style('stroke-width', 1)
+				gridG.select('.domain').remove()
+				return gridG
+			}
+
+			function initChart() {
+				container.innerHTML = ''
+				const width = container.clientWidth
+				const h = chartHeight
+				const innerWidth = width - margin.left - margin.right
+				const innerHeight = h - margin.top - margin.bottom
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.className = 'chart-title'
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 16px;
 					font-weight: 600;
 					text-align: center;
 					color: ${getThemeColors().textColor};
 				`
-				container.appendChild(titleEl)
-			}
-
-			const svg = d3
-				.select(container)
-				.append('svg')
-				.attr('width', width)
-				.attr('height', h)
-				.attr('viewBox', `0 0 ${width} ${h}`)
-				.attr('preserveAspectRatio', 'xMidYMid meet')
-				.style('overflow', 'visible')
-
-			const defs = svg.append('defs')
-
-			const gradient = defs
-				.append('linearGradient')
-				.attr('id', `area-grad-${chartId}`)
-				.attr('gradientUnits', 'userSpaceOnUse')
-				.attr('x1', 0)
-				.attr('y1', 0)
-				.attr('x2', 0)
-				.attr('y2', innerHeight)
-
-			gradient.append('stop').attr('offset', '0%').attr('stop-color', colors[0]).attr('stop-opacity', fillOpacity)
-
-			gradient
-				.append('stop')
-				.attr('offset', '80%')
-				.attr('stop-color', colors[0])
-				.attr('stop-opacity', fillOpacity * 0.5)
-
-			gradient.append('stop').attr('offset', '100%').attr('stop-color', colors[0]).attr('stop-opacity', 0)
-
-			const glowFilter = defs.append('filter').attr('id', `area-glow-${chartId}`)
-			glowFilter.append('feGaussianBlur').attr('stdDeviation', 3).attr('result', 'coloredBlur')
-			const feMerge = glowFilter.append('feMerge')
-			feMerge.append('feMergeNode').attr('in', 'coloredBlur')
-			feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
-
-			const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-			const { textColor, gridColor } = getThemeColors()
-
-			const x = d3
-				.scalePoint()
-				.domain(chartData.map((d) => d.label || String(d.x)))
-				.range([0, innerWidth])
-
-			const yMin = yAxisConfig.min ?? 0
-			const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
-
-			const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
-
-			if (showGrid) {
-				renderGrid(g, y, innerWidth, gridColor)
-			}
-
-			const xAxisG = g.append('g').attr('transform', `translate(0,${innerHeight})`)
-			xAxisG.call(d3.axisBottom(x))
-			applyAxisStyles(xAxisG, textColor)
-
-			const yAxisG = g.append('g')
-			yAxisG.call(d3.axisLeft(y).ticks(5))
-			applyAxisStyles(yAxisG, textColor)
-
-			const area = d3
-				.area<{ x: number; y: number; label?: string }>()
-				.x((d) => x(d.label || String(d.x))!)
-				.y0(innerHeight)
-				.y1((d) => y(d.y))
-				.curve(d3.curveMonotoneX)
-
-			const line = d3
-				.line<{ x: number; y: number; label?: string }>()
-				.x((d) => x(d.label || String(d.x))!)
-				.y((d) => y(d.y))
-				.curve(d3.curveMonotoneX)
-
-			const areaPath = g
-				.append('path')
-				.datum(chartData)
-				.attr('fill', `url(#area-grad-${chartId})`)
-				.attr('d', area)
-
-			if (animated) {
-				areaPath.attr('opacity', 0).transition().duration(800).ease(d3.easeCubicOut).attr('opacity', 1)
-			}
-
-			const linePath = g
-				.append('path')
-				.datum(chartData)
-				.attr('fill', 'none')
-				.attr('stroke', colors[0])
-				.attr('stroke-width', strokeWidth)
-				.attr('d', line)
-				.style('filter', `url(#area-glow-${chartId})`)
-
-			if (animated) {
-				const totalLength = (linePath.node() as SVGPathElement).getTotalLength()
-				linePath
-					.attr('stroke-dasharray', `${totalLength} ${totalLength}`)
-					.attr('stroke-dashoffset', totalLength)
-					.transition()
-					.duration(1000)
-					.ease(d3.easeCubicOut)
-					.attr('stroke-dashoffset', 0)
-			}
-
-			const dots = g
-				.selectAll('.dot')
-				.data(chartData)
-				.enter()
-				.append('circle')
-				.attr('class', 'dot')
-				.attr('cx', (d) => x(d.label || String(d.x))!)
-				.attr('cy', (d) => y(d.y))
-				.attr('r', pointSize)
-				.attr('fill', colors[0])
-				.attr('stroke', '#fff')
-				.attr('stroke-width', 2)
-				.style('cursor', 'pointer')
-
-			dots.on('mousemove', function (event, d) {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('r', pointSize + 3)
-					.style('filter', `drop-shadow(0 0 6px ${colors[0]})`)
-
-				const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
-				showTooltip(
-					tooltip,
-					event.offsetX,
-					event.offsetY,
-					`${labelText}y: ${d.y.toLocaleString()}`,
-					container.getBoundingClientRect(),
-				)
-			})
-
-			dots.on('mouseleave', function () {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('r', pointSize)
+					container.appendChild(titleEl)
+				}
+
+				const svg = d3
+					.select(container)
+					.append('svg')
+					.attr('width', width)
+					.attr('height', h)
+					.attr('viewBox', `0 0 ${width} ${h}`)
+					.attr('preserveAspectRatio', 'xMidYMid meet')
+					.style('overflow', 'visible')
+
+				const defs = svg.append('defs')
+
+				const gradient = defs
+					.append('linearGradient')
+					.attr('id', `area-grad-${chartId}`)
+					.attr('gradientUnits', 'userSpaceOnUse')
+					.attr('x1', 0)
+					.attr('y1', 0)
+					.attr('x2', 0)
+					.attr('y2', innerHeight)
+
+				gradient
+					.append('stop')
+					.attr('offset', '0%')
+					.attr('stop-color', colors[0])
+					.attr('stop-opacity', fillOpacity)
+
+				gradient
+					.append('stop')
+					.attr('offset', '80%')
+					.attr('stop-color', colors[0])
+					.attr('stop-opacity', fillOpacity * 0.5)
+
+				gradient.append('stop').attr('offset', '100%').attr('stop-color', colors[0]).attr('stop-opacity', 0)
+
+				const glowFilter = defs.append('filter').attr('id', `area-glow-${chartId}`)
+				glowFilter.append('feGaussianBlur').attr('stdDeviation', 3).attr('result', 'coloredBlur')
+				const feMerge = glowFilter.append('feMerge')
+				feMerge.append('feMergeNode').attr('in', 'coloredBlur')
+				feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
+
+				const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+				const { textColor, gridColor } = getThemeColors()
+
+				const x = d3
+					.scalePoint()
+					.domain(chartData.map((d) => d.label || String(d.x)))
+					.range([0, innerWidth])
+
+				const yMin = yAxisConfig.min ?? 0
+				const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
+
+				const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
+
+				if (showGrid) {
+					renderGrid(g, y, innerWidth, gridColor)
+				}
+
+				const xAxisG = g.append('g').attr('transform', `translate(0,${innerHeight})`)
+				xAxisG.call(d3.axisBottom(x))
+				applyAxisStyles(xAxisG, textColor)
+
+				const yAxisG = g.append('g')
+				yAxisG.call(d3.axisLeft(y).ticks(5))
+				applyAxisStyles(yAxisG, textColor)
+
+				const area = d3
+					.area<{ x: number; y: number; label?: string }>()
+					.x((d) => x(d.label || String(d.x))!)
+					.y0(innerHeight)
+					.y1((d) => y(d.y))
+					.curve(d3.curveMonotoneX)
+
+				const line = d3
+					.line<{ x: number; y: number; label?: string }>()
+					.x((d) => x(d.label || String(d.x))!)
+					.y((d) => y(d.y))
+					.curve(d3.curveMonotoneX)
+
+				const areaPath = g
+					.append('path')
+					.datum(chartData)
+					.attr('fill', `url(#area-grad-${chartId})`)
+					.attr('d', area)
+
+				if (animated) {
+					areaPath.attr('opacity', 0).transition().duration(800).ease(d3.easeCubicOut).attr('opacity', 1)
+				}
+
+				const linePath = g
+					.append('path')
+					.datum(chartData)
+					.attr('fill', 'none')
+					.attr('stroke', colors[0])
+					.attr('stroke-width', strokeWidth)
+					.attr('d', line)
 					.style('filter', `url(#area-glow-${chartId})`)
 
-				hideTooltip(tooltip)
-			})
-
-			if (animated) {
-				dots.attr('opacity', 0)
-					.transition()
-					.duration(400)
-					.delay((_, i) => 800 + i * 80)
-					.attr('opacity', 1)
+				if (animated) {
+					const totalLength = (linePath.node() as SVGPathElement).getTotalLength()
+					linePath
+						.attr('stroke-dasharray', `${totalLength} ${totalLength}`)
+						.attr('stroke-dashoffset', totalLength)
+						.transition()
+						.duration(1000)
+						.ease(d3.easeCubicOut)
+						.attr('stroke-dashoffset', 0)
+				}
+
+				const dots = g
+					.selectAll('.dot')
+					.data(chartData)
+					.enter()
+					.append('circle')
+					.attr('class', 'dot')
+					.attr('cx', (d) => x(d.label || String(d.x))!)
+					.attr('cy', (d) => y(d.y))
+					.attr('r', pointSize)
+					.attr('fill', colors[0])
+					.attr('stroke', '#fff')
+					.attr('stroke-width', 2)
+					.style('cursor', 'pointer')
+
+				dots.on('mousemove', function (event, d) {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('r', pointSize + 3)
+						.style('filter', `drop-shadow(0 0 6px ${colors[0]})`)
+
+					const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
+					showTooltip(
+						tooltip,
+						event.offsetX,
+						event.offsetY,
+						`${labelText}y: ${d.y.toLocaleString()}`,
+						container.getBoundingClientRect(),
+					)
+				})
+
+				dots.on('mouseleave', function () {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('r', pointSize)
+						.style('filter', `url(#area-glow-${chartId})`)
+
+					hideTooltip(tooltip)
+				})
+
+				if (animated) {
+					dots.attr('opacity', 0)
+						.transition()
+						.duration(400)
+						.delay((_, i) => 800 + i * 80)
+						.attr('opacity', 1)
+				}
+
+				const hoverLine = g
+					.append('line')
+					.attr('class', 'hover-line')
+					.attr('y1', 0)
+					.attr('y2', innerHeight)
+					.attr('stroke', colors[0])
+					.attr('stroke-width', 2)
+					.attr('stroke-dasharray', '4,4')
+					.style('opacity', 0)
+					.style('pointer-events', 'none')
+
+				const hoverArea = g
+					.append('path')
+					.attr('class', 'hover-area')
+					.attr('fill', colors[0])
+					.attr('fill-opacity', fillOpacity * 0.3)
+					.style('opacity', 0)
+
+				const overlay = g
+					.append('rect')
+					.attr('width', innerWidth)
+					.attr('height', innerHeight)
+					.attr('fill', 'transparent')
+					.style('cursor', 'crosshair')
+
+				overlay.on('mousemove', function (event) {
+					const [mx] = d3.pointer(event)
+					const n = chartData.length
+					const step = innerWidth / Math.max(n - 1, 1)
+					const rawIdx = mx / step
+					const idx = Math.max(0, Math.min(n - 1, Math.round(rawIdx)))
+					const d = chartData[idx]
+					if (!d) return
+
+					hoverLine
+						.attr('x1', x(d.label || String(d.x))!)
+						.attr('x2', x(d.label || String(d.x))!)
+						.style('opacity', 0.6)
+
+					const hoverD = [d]
+					hoverArea.datum(hoverD).attr('d', area).style('opacity', 1)
+
+					const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
+					showTooltip(
+						tooltip,
+						event.offsetX,
+						event.offsetY,
+						`${labelText}y: ${d.y.toLocaleString()}`,
+						container.getBoundingClientRect(),
+					)
+				})
+
+				overlay.on('mouseleave', function () {
+					hoverLine.style('opacity', 0)
+					hoverArea.style('opacity', 0)
+					hideTooltip(tooltip)
+				})
 			}
 
-			const hoverLine = g
-				.append('line')
-				.attr('class', 'hover-line')
-				.attr('y1', 0)
-				.attr('y2', innerHeight)
-				.attr('stroke', colors[0])
-				.attr('stroke-width', 2)
-				.attr('stroke-dasharray', '4,4')
-				.style('opacity', 0)
-				.style('pointer-events', 'none')
-
-			const hoverArea = g
-				.append('path')
-				.attr('class', 'hover-area')
-				.attr('fill', colors[0])
-				.attr('fill-opacity', fillOpacity * 0.3)
-				.style('opacity', 0)
-
-			const overlay = g
-				.append('rect')
-				.attr('width', innerWidth)
-				.attr('height', innerHeight)
-				.attr('fill', 'transparent')
-				.style('cursor', 'crosshair')
-
-			overlay.on('mousemove', function (event) {
-				const [mx] = d3.pointer(event)
-				const n = chartData.length
-				const step = innerWidth / Math.max(n - 1, 1)
-				const rawIdx = mx / step
-				const idx = Math.max(0, Math.min(n - 1, Math.round(rawIdx)))
-				const d = chartData[idx]
-				if (!d) return
-
-				hoverLine
-					.attr('x1', x(d.label || String(d.x))!)
-					.attr('x2', x(d.label || String(d.x))!)
-					.style('opacity', 0.6)
-
-				const hoverD = [d]
-				hoverArea.datum(hoverD).attr('d', area).style('opacity', 1)
-
-				const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
-				showTooltip(
-					tooltip,
-					event.offsetX,
-					event.offsetY,
-					`${labelText}y: ${d.y.toLocaleString()}`,
-					container.getBoundingClientRect(),
-				)
-			})
-
-			overlay.on('mouseleave', function () {
-				hoverLine.style('opacity', 0)
-				hoverArea.style('opacity', 0)
-				hideTooltip(tooltip)
-			})
-		}
-
-		const observer = new ResizeObserver(() => initChart())
-		observer.observe(container)
-		initChart()
-	})
+			const observer = new ResizeObserver(() => initChart())
+			observer.observe(container)
+			initChart()
+		})
+	}
+
+	onHydration(initAreaCharts)
 </script>
diff --git a/src/components/content/BarChart.astro b/src/components/content/BarChart.astro
index 9c7cadb..5657260 100644
--- a/src/components/content/BarChart.astro
+++ b/src/components/content/BarChart.astro
@@ -54,207 +54,216 @@ const chartColors = JSON.stringify(colors)
 <script>
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
+	import { onHydration } from '../../utils/hydration'
+
+	function initBarCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="bar-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
+				? JSON.parse(rawData)
+				: []
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
+			const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
+			const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
+
+			if (!chartData.length) return
+
+			const margin = { top: 20, right: 20, bottom: 40, left: 60 }
+			const tooltip = createTooltip(container)
+
+			function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
+				const { axisColor } = getThemeColors()
+				axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
+				axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
+				axisG
+					.selectAll('.tick text')
+					.attr('fill', textColor)
+					.style('fill', textColor)
+					.attr('font-size', '12px')
+					.attr('font-family', 'inherit')
+					.style('font-weight', '500')
+			}
+
+			function renderGrid(
+				g: d3.Selection<SVGGElement, unknown, null, undefined>,
+				y: d3.ScaleLinear<number, number>,
+				w: number,
+				gridColor: string,
+			) {
+				const gridG = g.append('g').attr('class', 'grid')
+				gridG.call(
+					d3
+						.axisLeft(y)
+						.tickSize(-w)
+						.tickFormat(() => ''),
+				)
+				gridG
+					.selectAll('line')
+					.style('stroke', gridColor)
+					.style('stroke-dasharray', '3,3')
+					.style('stroke-width', 1)
+				gridG.select('.domain').remove()
+				return gridG
+			}
 
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="bar-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
-			? JSON.parse(rawData)
-			: []
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
-		const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
-		const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
-
-		if (!chartData.length) return
-
-		const margin = { top: 20, right: 20, bottom: 40, left: 60 }
-		const tooltip = createTooltip(container)
-
-		function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
-			const { axisColor } = getThemeColors()
-			axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
-			axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
-			axisG
-				.selectAll('.tick text')
-				.attr('fill', textColor)
-				.style('fill', textColor)
-				.attr('font-size', '12px')
-				.attr('font-family', 'inherit')
-				.style('font-weight', '500')
-		}
-
-		function renderGrid(
-			g: d3.Selection<SVGGElement, unknown, null, undefined>,
-			y: d3.ScaleLinear<number, number>,
-			w: number,
-			gridColor: string,
-		) {
-			const gridG = g.append('g').attr('class', 'grid')
-			gridG.call(
-				d3
-					.axisLeft(y)
-					.tickSize(-w)
-					.tickFormat(() => ''),
-			)
-			gridG.selectAll('line').style('stroke', gridColor).style('stroke-dasharray', '3,3').style('stroke-width', 1)
-			gridG.select('.domain').remove()
-			return gridG
-		}
-
-		function initChart() {
-			container.innerHTML = ''
-			const width = container.clientWidth
-			const h = chartHeight
-			const innerWidth = width - margin.left - margin.right
-			const innerHeight = h - margin.top - margin.bottom
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.className = 'chart-title'
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+			function initChart() {
+				container.innerHTML = ''
+				const width = container.clientWidth
+				const h = chartHeight
+				const innerWidth = width - margin.left - margin.right
+				const innerHeight = h - margin.top - margin.bottom
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.className = 'chart-title'
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 16px;
 					font-weight: 600;
 					text-align: center;
 					color: ${getThemeColors().textColor};
 				`
-				container.appendChild(titleEl)
-			}
-
-			const svg = d3
-				.select(container)
-				.append('svg')
-				.attr('width', width)
-				.attr('height', h)
-				.attr('viewBox', `0 0 ${width} ${h}`)
-				.attr('preserveAspectRatio', 'xMidYMid meet')
-				.style('overflow', 'visible')
-
-			const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-			const { textColor, gridColor } = getThemeColors()
-
-			const x = d3
-				.scaleBand()
-				.domain(chartData.map((d) => d.label || String(d.x)))
-				.range([0, innerWidth])
-				.padding(0.25)
-
-			const yMin = yAxisConfig.min ?? 0
-			const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
-
-			const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
-
-			if (showGrid) {
-				renderGrid(g, y, innerWidth, gridColor)
-			}
-
-			const xAxisG = g.append('g').attr('transform', `translate(0,${innerHeight})`)
-			xAxisG.call(d3.axisBottom(x))
-			applyAxisStyles(xAxisG, textColor)
-
-			const yAxisG = g.append('g')
-			yAxisG.call(d3.axisLeft(y).ticks(5))
-			applyAxisStyles(yAxisG, textColor)
-
-			const bars = g
-				.selectAll('.bar')
-				.data(chartData)
-				.enter()
-				.append('rect')
-				.attr('x', (d) => x(d.label || String(d.x))!)
-				.attr('y', (d) => y(d.y))
-				.attr('width', x.bandwidth())
-				.attr('height', (d) => innerHeight - y(d.y))
-				.attr('fill', (d, i) => d.color || getColor(i, colors))
-				.attr('rx', 6)
-				.style('cursor', 'pointer')
-				.style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))')
-
-			if (animated) {
-				bars.attr('opacity', 0)
-					.attr('y', innerHeight)
-					.attr('height', 0)
-					.transition()
-					.duration(700)
-					.delay((_, i) => i * 80)
-					.ease(d3.easeCubicOut)
-					.attr('opacity', 1)
+					container.appendChild(titleEl)
+				}
+
+				const svg = d3
+					.select(container)
+					.append('svg')
+					.attr('width', width)
+					.attr('height', h)
+					.attr('viewBox', `0 0 ${width} ${h}`)
+					.attr('preserveAspectRatio', 'xMidYMid meet')
+					.style('overflow', 'visible')
+
+				const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+				const { textColor, gridColor } = getThemeColors()
+
+				const x = d3
+					.scaleBand()
+					.domain(chartData.map((d) => d.label || String(d.x)))
+					.range([0, innerWidth])
+					.padding(0.25)
+
+				const yMin = yAxisConfig.min ?? 0
+				const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
+
+				const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
+
+				if (showGrid) {
+					renderGrid(g, y, innerWidth, gridColor)
+				}
+
+				const xAxisG = g.append('g').attr('transform', `translate(0,${innerHeight})`)
+				xAxisG.call(d3.axisBottom(x))
+				applyAxisStyles(xAxisG, textColor)
+
+				const yAxisG = g.append('g')
+				yAxisG.call(d3.axisLeft(y).ticks(5))
+				applyAxisStyles(yAxisG, textColor)
+
+				const bars = g
+					.selectAll('.bar')
+					.data(chartData)
+					.enter()
+					.append('rect')
+					.attr('x', (d) => x(d.label || String(d.x))!)
 					.attr('y', (d) => y(d.y))
+					.attr('width', x.bandwidth())
 					.attr('height', (d) => innerHeight - y(d.y))
-			}
+					.attr('fill', (d, i) => d.color || getColor(i, colors))
+					.attr('rx', 6)
+					.style('cursor', 'pointer')
+					.style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))')
 
-			bars.on('mousemove', function (event, d) {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('transform', `translate(0, -4)`)
-					.style('filter', 'drop-shadow(0 6px 12px rgba(0,0,0,0.25))')
-					.attr('opacity', 1)
-
-				const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
-				showTooltip(
-					tooltip,
-					event.offsetX,
-					event.offsetY,
-					`${labelText}y: ${d.y.toLocaleString()}`,
-					container.getBoundingClientRect(),
-				)
-			})
+				if (animated) {
+					bars.attr('opacity', 0)
+						.attr('y', innerHeight)
+						.attr('height', 0)
+						.transition()
+						.duration(700)
+						.delay((_, i) => i * 80)
+						.ease(d3.easeCubicOut)
+						.attr('opacity', 1)
+						.attr('y', (d) => y(d.y))
+						.attr('height', (d) => innerHeight - y(d.y))
+				}
+
+				bars.on('mousemove', function (event, d) {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('transform', `translate(0, -4)`)
+						.style('filter', 'drop-shadow(0 6px 12px rgba(0,0,0,0.25))')
+						.attr('opacity', 1)
+
+					const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
+					showTooltip(
+						tooltip,
+						event.offsetX,
+						event.offsetY,
+						`${labelText}y: ${d.y.toLocaleString()}`,
+						container.getBoundingClientRect(),
+					)
+				})
 
-			bars.on('mouseleave', function () {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('transform', 'translate(0, 0)')
-					.style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))')
+				bars.on('mouseleave', function () {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('transform', 'translate(0, 0)')
+						.style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))')
 
-				hideTooltip(tooltip)
-			})
+					hideTooltip(tooltip)
+				})
 
-			bars.on('click', function (_, d) {
-				const customEvent = new CustomEvent('chart:click', {
-					bubbles: true,
-					detail: { type: 'bar', x: d.x, y: d.y, label: d.label },
+				bars.on('click', function (_, d) {
+					const customEvent = new CustomEvent('chart:click', {
+						bubbles: true,
+						detail: { type: 'bar', x: d.x, y: d.y, label: d.label },
+					})
+					container.dispatchEvent(customEvent)
 				})
-				container.dispatchEvent(customEvent)
-			})
-
-			const valueLabels = g
-				.selectAll('.value-label')
-				.data(chartData)
-				.enter()
-				.append('text')
-				.attr('class', 'value-label')
-				.attr('x', (d) => x(d.label || String(d.x))! + x.bandwidth() / 2)
-				.attr('y', (d) => y(d.y) - 8)
-				.attr('text-anchor', 'middle')
-				.attr('fill', textColor)
-				.attr('font-size', '11px')
-				.attr('font-weight', '600')
-				.attr('font-family', 'inherit')
-				.style('pointer-events', 'none')
-				.text((d) => (d.y >= 10 ? d.y.toLocaleString() : d.y))
-
-			if (animated) {
-				valueLabels
-					.attr('opacity', 0)
-					.transition()
-					.duration(700)
-					.delay((_, i) => i * 80 + 350)
-					.attr('opacity', 1)
+
+				const valueLabels = g
+					.selectAll('.value-label')
+					.data(chartData)
+					.enter()
+					.append('text')
+					.attr('class', 'value-label')
+					.attr('x', (d) => x(d.label || String(d.x))! + x.bandwidth() / 2)
+					.attr('y', (d) => y(d.y) - 8)
+					.attr('text-anchor', 'middle')
+					.attr('fill', textColor)
+					.attr('font-size', '11px')
+					.attr('font-weight', '600')
+					.attr('font-family', 'inherit')
+					.style('pointer-events', 'none')
+					.text((d) => (d.y >= 10 ? d.y.toLocaleString() : d.y))
+
+				if (animated) {
+					valueLabels
+						.attr('opacity', 0)
+						.transition()
+						.duration(700)
+						.delay((_, i) => i * 80 + 350)
+						.attr('opacity', 1)
+				}
 			}
-		}
 
-		const observer = new ResizeObserver(() => initChart())
-		observer.observe(container)
-		initChart()
-	})
+			const observer = new ResizeObserver(() => initChart())
+			observer.observe(container)
+			initChart()
+		})
+	}
+
+	onHydration(initBarCharts)
 </script>
diff --git a/src/components/content/CsvViewer.astro b/src/components/content/CsvViewer.astro
index 8d9011a..ababdc3 100644
--- a/src/components/content/CsvViewer.astro
+++ b/src/components/content/CsvViewer.astro
@@ -457,6 +457,11 @@ const viewerDelimiter = delimiter
 		}
 	}
 
-	const wrappers = document.querySelectorAll('.csv-viewer-wrapper')
-	wrappers.forEach((wrapper) => new CsvViewer(wrapper as HTMLElement))
+	function initCsvViewers() {
+		const wrappers = document.querySelectorAll('.csv-viewer-wrapper')
+		wrappers.forEach((wrapper) => new CsvViewer(wrapper as HTMLElement))
+	}
+
+	import { onHydration } from '../../utils/hydration'
+	onHydration(initCsvViewers)
 </script>
diff --git a/src/components/content/JsonViewer.astro b/src/components/content/JsonViewer.astro
index c948ade..954d346 100644
--- a/src/components/content/JsonViewer.astro
+++ b/src/components/content/JsonViewer.astro
@@ -427,6 +427,11 @@ const viewerExpanded = expanded
 		}
 	}
 
-	const wrappers = document.querySelectorAll('.json-viewer-wrapper')
-	wrappers.forEach((wrapper) => new JsonViewer(wrapper as HTMLElement))
+	function initJsonViewers() {
+		const wrappers = document.querySelectorAll('.json-viewer-wrapper')
+		wrappers.forEach((wrapper) => new JsonViewer(wrapper as HTMLElement))
+	}
+
+	import { onHydration } from '../../utils/hydration'
+	onHydration(initJsonViewers)
 </script>
diff --git a/src/components/content/LineChart.astro b/src/components/content/LineChart.astro
index ecbbb38..4e1ccc3 100644
--- a/src/components/content/LineChart.astro
+++ b/src/components/content/LineChart.astro
@@ -92,201 +92,268 @@ const chartColors = JSON.stringify(colors)
 <script>
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
+	import { onHydration } from '../../utils/hydration'
+
+	function initLineCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="line-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
+				? JSON.parse(rawData)
+				: []
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const showDots = (wrapper as HTMLElement).dataset.chartShowDots !== 'false'
+			const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
+			const strokeWidth = parseFloat((wrapper as HTMLElement).dataset.chartStrokeWidth || '2.5')
+			const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '5')
+			const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
+			const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
+			const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
+
+			if (!chartData.length) return
+
+			const margin = { top: 20, right: 20, bottom: 40, left: 60 }
+			const tooltip = createTooltip(container)
+
+			function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
+				const { axisColor } = getThemeColors()
+				axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
+				axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
+				axisG
+					.selectAll('.tick text')
+					.attr('fill', textColor)
+					.style('fill', textColor)
+					.attr('font-size', '12px')
+					.attr('font-family', 'inherit')
+					.style('font-weight', '500')
+			}
 
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="line-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
-			? JSON.parse(rawData)
-			: []
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const showDots = (wrapper as HTMLElement).dataset.chartShowDots !== 'false'
-		const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
-		const strokeWidth = parseFloat((wrapper as HTMLElement).dataset.chartStrokeWidth || '2.5')
-		const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '5')
-		const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
-		const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
-		const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
-
-		if (!chartData.length) return
-
-		const margin = { top: 20, right: 20, bottom: 40, left: 60 }
-		const tooltip = createTooltip(container)
-
-		function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
-			const { axisColor } = getThemeColors()
-			axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
-			axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
-			axisG
-				.selectAll('.tick text')
-				.attr('fill', textColor)
-				.style('fill', textColor)
-				.attr('font-size', '12px')
-				.attr('font-family', 'inherit')
-				.style('font-weight', '500')
-		}
-
-		function renderGrid(
-			g: d3.Selection<SVGGElement, unknown, null, undefined>,
-			y: d3.ScaleLinear<number, number>,
-			w: number,
-			gridColor: string,
-		) {
-			const gridG = g.append('g').attr('class', 'grid')
-			gridG.call(
-				d3
-					.axisLeft(y)
-					.tickSize(-w)
-					.tickFormat(() => ''),
-			)
-			gridG.selectAll('line').style('stroke', gridColor).style('stroke-dasharray', '3,3').style('stroke-width', 1)
-			gridG.select('.domain').remove()
-			return gridG
-		}
-
-		function initChart() {
-			container.innerHTML = ''
-			const width = container.clientWidth
-			const h = chartHeight
-			const innerWidth = width - margin.left - margin.right
-			const innerHeight = h - margin.top - margin.bottom
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.className = 'chart-title'
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+			function renderGrid(
+				g: d3.Selection<SVGGElement, unknown, null, undefined>,
+				y: d3.ScaleLinear<number, number>,
+				w: number,
+				gridColor: string,
+			) {
+				const gridG = g.append('g').attr('class', 'grid')
+				gridG.call(
+					d3
+						.axisLeft(y)
+						.tickSize(-w)
+						.tickFormat(() => ''),
+				)
+				gridG
+					.selectAll('line')
+					.style('stroke', gridColor)
+					.style('stroke-dasharray', '3,3')
+					.style('stroke-width', 1)
+				gridG.select('.domain').remove()
+				return gridG
+			}
+
+			function initChart() {
+				container.innerHTML = ''
+				const width = container.clientWidth
+				const h = chartHeight
+				const innerWidth = width - margin.left - margin.right
+				const innerHeight = h - margin.top - margin.bottom
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.className = 'chart-title'
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 16px;
 					font-weight: 600;
 					text-align: center;
 					color: ${getThemeColors().textColor};
 				`
-				container.appendChild(titleEl)
-			}
+					container.appendChild(titleEl)
+				}
 
-			const svg = d3
-				.select(container)
-				.append('svg')
-				.attr('width', width)
-				.attr('height', h)
-				.attr('viewBox', `0 0 ${width} ${h}`)
-				.attr('preserveAspectRatio', 'xMidYMid meet')
-				.style('overflow', 'hidden')
-				.style('cursor', 'grab')
-
-			const defs = svg.append('defs')
-			const clipId = `clip-${chartId}`
-			defs.append('clipPath')
-				.attr('id', clipId)
-				.append('rect')
-				.attr('width', innerWidth)
-				.attr('height', innerHeight)
-			const gradient = defs
-				.append('linearGradient')
-				.attr('id', `line-glow-${chartId}`)
-				.attr('gradientUnits', 'userSpaceOnUse')
-				.attr('x1', 0)
-				.attr('y1', 0)
-				.attr('x2', 0)
-				.attr('y2', innerHeight)
-			gradient.append('stop').attr('offset', '0%').attr('stop-color', colors[0]).attr('stop-opacity', 0.3)
-			gradient.append('stop').attr('offset', '100%').attr('stop-color', colors[0]).attr('stop-opacity', 0)
-
-			const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-			const chartContent = g.append('g').attr('clip-path', `url(#${clipId})`)
-			const { textColor, gridColor } = getThemeColors()
-
-			const x = d3
-				.scalePoint()
-				.domain(chartData.map((d) => d.label || String(d.x)))
-				.range([0, innerWidth])
-
-			const yMin = yAxisConfig.min ?? 0
-			const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
-
-			const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
-
-			if (showGrid) {
-				renderGrid(g, y, innerWidth, gridColor)
-			}
+				const svg = d3
+					.select(container)
+					.append('svg')
+					.attr('width', width)
+					.attr('height', h)
+					.attr('viewBox', `0 0 ${width} ${h}`)
+					.attr('preserveAspectRatio', 'xMidYMid meet')
+					.style('overflow', 'hidden')
+					.style('cursor', 'grab')
+
+				const defs = svg.append('defs')
+				const clipId = `clip-${chartId}`
+				defs.append('clipPath')
+					.attr('id', clipId)
+					.append('rect')
+					.attr('width', innerWidth)
+					.attr('height', innerHeight)
+				const gradient = defs
+					.append('linearGradient')
+					.attr('id', `line-glow-${chartId}`)
+					.attr('gradientUnits', 'userSpaceOnUse')
+					.attr('x1', 0)
+					.attr('y1', 0)
+					.attr('x2', 0)
+					.attr('y2', innerHeight)
+				gradient.append('stop').attr('offset', '0%').attr('stop-color', colors[0]).attr('stop-opacity', 0.3)
+				gradient.append('stop').attr('offset', '100%').attr('stop-color', colors[0]).attr('stop-opacity', 0)
+
+				const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+				const chartContent = g.append('g').attr('clip-path', `url(#${clipId})`)
+				const { textColor, gridColor } = getThemeColors()
+
+				const x = d3
+					.scalePoint()
+					.domain(chartData.map((d) => d.label || String(d.x)))
+					.range([0, innerWidth])
+
+				const yMin = yAxisConfig.min ?? 0
+				const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.1
+
+				const y = d3.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0])
+
+				if (showGrid) {
+					renderGrid(g, y, innerWidth, gridColor)
+				}
 
-			const xAxisG = g.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
-			xAxisG.call(d3.axisBottom(x))
-			applyAxisStyles(xAxisG, textColor)
-
-			const yAxisG = g.append('g').attr('class', 'y-axis')
-			yAxisG.call(d3.axisLeft(y).ticks(5))
-			applyAxisStyles(yAxisG, textColor)
-
-			const line = d3
-				.line<{ x: number; y: number; label?: string }>()
-				.x((d) => x(d.label || String(d.x))!)
-				.y((d) => y(d.y))
-				.curve(d3.curveMonotoneX)
-
-			const area = d3
-				.area<{ x: number; y: number; label?: string }>()
-				.x((d) => x(d.label || String(d.x))!)
-				.y0(innerHeight)
-				.y1((d) => y(d.y))
-				.curve(d3.curveMonotoneX)
-
-			chartContent
-				.append('path')
-				.datum(chartData)
-				.attr('class', 'area-fill')
-				.attr('fill', `url(#line-glow-${chartId})`)
-				.attr('d', area)
-
-			const linePath = chartContent
-				.append('path')
-				.datum(chartData)
-				.attr('class', 'line-path')
-				.attr('fill', 'none')
-				.attr('stroke', colors[0])
-				.attr('stroke-width', strokeWidth)
-				.attr('d', line)
-				.style('filter', `drop-shadow(0 0 4px ${colors[0]}50)`)
-
-			if (animated) {
-				const totalLength = (linePath.node() as SVGPathElement).getTotalLength()
-				linePath
-					.attr('stroke-dasharray', `${totalLength} ${totalLength}`)
-					.attr('stroke-dashoffset', totalLength)
-					.transition()
-					.duration(1200)
-					.ease(d3.easeCubicOut)
-					.attr('stroke-dashoffset', 0)
-			}
+				const xAxisG = g.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
+				xAxisG.call(d3.axisBottom(x))
+				applyAxisStyles(xAxisG, textColor)
+
+				const yAxisG = g.append('g').attr('class', 'y-axis')
+				yAxisG.call(d3.axisLeft(y).ticks(5))
+				applyAxisStyles(yAxisG, textColor)
+
+				const line = d3
+					.line<{ x: number; y: number; label?: string }>()
+					.x((d) => x(d.label || String(d.x))!)
+					.y((d) => y(d.y))
+					.curve(d3.curveMonotoneX)
+
+				const area = d3
+					.area<{ x: number; y: number; label?: string }>()
+					.x((d) => x(d.label || String(d.x))!)
+					.y0(innerHeight)
+					.y1((d) => y(d.y))
+					.curve(d3.curveMonotoneX)
+
+				chartContent
+					.append('path')
+					.datum(chartData)
+					.attr('class', 'area-fill')
+					.attr('fill', `url(#line-glow-${chartId})`)
+					.attr('d', area)
+
+				const linePath = chartContent
+					.append('path')
+					.datum(chartData)
+					.attr('class', 'line-path')
+					.attr('fill', 'none')
+					.attr('stroke', colors[0])
+					.attr('stroke-width', strokeWidth)
+					.attr('d', line)
+					.style('filter', `drop-shadow(0 0 4px ${colors[0]}50)`)
 
-			if (showDots) {
-				const dots = chartContent
-					.selectAll('.dot')
-					.data(chartData)
-					.enter()
-					.append('circle')
-					.attr('class', 'dot')
-					.attr('cx', (d) => x(d.label || String(d.x))!)
-					.attr('cy', (d) => y(d.y))
-					.attr('r', pointSize)
-					.attr('fill', colors[0])
-					.attr('stroke', '#fff')
-					.attr('stroke-width', 2)
-					.style('cursor', 'pointer')
-
-				dots.on('mousemove', function (event, d) {
-					d3.select(this)
+				if (animated) {
+					const totalLength = (linePath.node() as SVGPathElement).getTotalLength()
+					linePath
+						.attr('stroke-dasharray', `${totalLength} ${totalLength}`)
+						.attr('stroke-dashoffset', totalLength)
 						.transition()
-						.duration(150)
-						.attr('r', pointSize + 3)
-						.style('filter', `drop-shadow(0 0 6px ${colors[0]})`)
+						.duration(1200)
+						.ease(d3.easeCubicOut)
+						.attr('stroke-dashoffset', 0)
+				}
+
+				if (showDots) {
+					const dots = chartContent
+						.selectAll('.dot')
+						.data(chartData)
+						.enter()
+						.append('circle')
+						.attr('class', 'dot')
+						.attr('cx', (d) => x(d.label || String(d.x))!)
+						.attr('cy', (d) => y(d.y))
+						.attr('r', pointSize)
+						.attr('fill', colors[0])
+						.attr('stroke', '#fff')
+						.attr('stroke-width', 2)
+						.style('cursor', 'pointer')
+
+					dots.on('mousemove', function (event, d) {
+						d3.select(this)
+							.transition()
+							.duration(150)
+							.attr('r', pointSize + 3)
+							.style('filter', `drop-shadow(0 0 6px ${colors[0]})`)
+
+						const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
+						showTooltip(
+							tooltip,
+							event.offsetX,
+							event.offsetY,
+							`${labelText}y: ${d.y.toLocaleString()}`,
+							container.getBoundingClientRect(),
+						)
+					})
+
+					dots.on('mouseleave', function () {
+						d3.select(this)
+							.transition()
+							.duration(150)
+							.attr('r', pointSize)
+							.style('filter', `drop-shadow(0 0 4px ${colors[0]}50)`)
+
+						hideTooltip(tooltip)
+					})
+
+					if (animated) {
+						dots.attr('opacity', 0)
+							.transition()
+							.duration(400)
+							.delay((_, i) => 800 + i * 100)
+							.attr('opacity', 1)
+					}
+				}
+
+				const hoverLine = g
+					.append('line')
+					.attr('class', 'hover-line')
+					.attr('y1', 0)
+					.attr('y2', innerHeight)
+					.attr('stroke', gridColor)
+					.attr('stroke-width', 1)
+					.attr('stroke-dasharray', '4,4')
+					.style('opacity', 0)
+					.style('pointer-events', 'none')
+
+				const overlay = g
+					.append('rect')
+					.attr('width', innerWidth)
+					.attr('height', innerHeight)
+					.attr('fill', 'transparent')
+					.style('cursor', 'crosshair')
+
+				overlay.on('mousemove', function (event) {
+					const [mx] = d3.pointer(event)
+					const n = chartData.length
+					const step = innerWidth / Math.max(n - 1, 1)
+					const rawIdx = mx / step
+					const idx = Math.max(0, Math.min(n - 1, Math.round(rawIdx)))
+					const d = chartData[idx]
+					if (!d) return
+
+					hoverLine
+						.attr('x1', x(d.label || String(d.x))!)
+						.attr('x2', x(d.label || String(d.x))!)
+						.style('opacity', 1)
 
 					const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
 					showTooltip(
@@ -298,134 +365,76 @@ const chartColors = JSON.stringify(colors)
 					)
 				})
 
-				dots.on('mouseleave', function () {
-					d3.select(this)
-						.transition()
-						.duration(150)
-						.attr('r', pointSize)
-						.style('filter', `drop-shadow(0 0 4px ${colors[0]}50)`)
-
+				overlay.on('mouseleave', function () {
+					hoverLine.style('opacity', 0)
 					hideTooltip(tooltip)
 				})
 
-				if (animated) {
-					dots.attr('opacity', 0)
-						.transition()
-						.duration(400)
-						.delay((_, i) => 800 + i * 100)
-						.attr('opacity', 1)
-				}
-			}
-
-			const hoverLine = g
-				.append('line')
-				.attr('class', 'hover-line')
-				.attr('y1', 0)
-				.attr('y2', innerHeight)
-				.attr('stroke', gridColor)
-				.attr('stroke-width', 1)
-				.attr('stroke-dasharray', '4,4')
-				.style('opacity', 0)
-				.style('pointer-events', 'none')
-
-			const overlay = g
-				.append('rect')
-				.attr('width', innerWidth)
-				.attr('height', innerHeight)
-				.attr('fill', 'transparent')
-				.style('cursor', 'crosshair')
-
-			overlay.on('mousemove', function (event) {
-				const [mx] = d3.pointer(event)
-				const n = chartData.length
-				const step = innerWidth / Math.max(n - 1, 1)
-				const rawIdx = mx / step
-				const idx = Math.max(0, Math.min(n - 1, Math.round(rawIdx)))
-				const d = chartData[idx]
-				if (!d) return
-
-				hoverLine
-					.attr('x1', x(d.label || String(d.x))!)
-					.attr('x2', x(d.label || String(d.x))!)
-					.style('opacity', 1)
-
-				const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
-				showTooltip(
-					tooltip,
-					event.offsetX,
-					event.offsetY,
-					`${labelText}y: ${d.y.toLocaleString()}`,
-					container.getBoundingClientRect(),
-				)
-			})
-
-			overlay.on('mouseleave', function () {
-				hoverLine.style('opacity', 0)
-				hideTooltip(tooltip)
-			})
-
-			const zoom = d3
-				.zoom<SVGSVGElement, unknown>()
-				.scaleExtent([1, chartData.length])
-				.translateExtent([
-					[0, 0],
-					[innerWidth, innerHeight],
-				])
-				.on('zoom', (event) => {
-					const k = event.transform.k
-					const offset = -event.transform.x / k
-					const zoomedX = d3
-						.scalePoint()
-						.domain(chartData.map((d) => d.label || String(d.x)))
-						.range([offset, innerWidth + offset])
-
-					const newLine = d3
-						.line<{ x: number; y: number; label?: string }>()
-						.x((d) => zoomedX(d.label || String(d.x))!)
-						.y((d) => y(d.y))
-						.curve(d3.curveMonotoneX)
-
-					const newArea = d3
-						.area<{ x: number; y: number; label?: string }>()
-						.x((d) => zoomedX(d.label || String(d.x))!)
-						.y0(innerHeight)
-						.y1((d) => y(d.y))
-						.curve(d3.curveMonotoneX)
-
-					linePath.attr('d', newLine(chartData) || '')
-					chartContent.select('.area-fill').attr('d', newArea(chartData) || '')
-					xAxisG.call(d3.axisBottom(zoomedX))
-					applyAxisStyles(xAxisG, textColor)
-
-					if (showDots) {
-						chartContent
-							.selectAll<SVGCircleElement, { x: number; y: number; label?: string }>('.dot')
-							.attr('cx', (d) => zoomedX(d.label || String(d.x))!)
-					}
-
-					hoverLine
-						.attr('x1', zoomedX(chartData[0].label || String(chartData[0].x))!)
-						.attr('x2', zoomedX(chartData[0].label || String(chartData[0].x))!)
+				const zoom = d3
+					.zoom<SVGSVGElement, unknown>()
+					.scaleExtent([1, chartData.length])
+					.translateExtent([
+						[0, 0],
+						[innerWidth, innerHeight],
+					])
+					.on('zoom', (event) => {
+						const k = event.transform.k
+						const offset = -event.transform.x / k
+						const zoomedX = d3
+							.scalePoint()
+							.domain(chartData.map((d) => d.label || String(d.x)))
+							.range([offset, innerWidth + offset])
+
+						const newLine = d3
+							.line<{ x: number; y: number; label?: string }>()
+							.x((d) => zoomedX(d.label || String(d.x))!)
+							.y((d) => y(d.y))
+							.curve(d3.curveMonotoneX)
+
+						const newArea = d3
+							.area<{ x: number; y: number; label?: string }>()
+							.x((d) => zoomedX(d.label || String(d.x))!)
+							.y0(innerHeight)
+							.y1((d) => y(d.y))
+							.curve(d3.curveMonotoneX)
+
+						linePath.attr('d', newLine(chartData) || '')
+						chartContent.select('.area-fill').attr('d', newArea(chartData) || '')
+						xAxisG.call(d3.axisBottom(zoomedX))
+						applyAxisStyles(xAxisG, textColor)
+
+						if (showDots) {
+							chartContent
+								.selectAll<SVGCircleElement, { x: number; y: number; label?: string }>('.dot')
+								.attr('cx', (d) => zoomedX(d.label || String(d.x))!)
+						}
+
+						hoverLine
+							.attr('x1', zoomedX(chartData[0].label || String(chartData[0].x))!)
+							.attr('x2', zoomedX(chartData[0].label || String(chartData[0].x))!)
+					})
+
+				svg.call(zoom)
+
+				const zoomBtns = wrapper.querySelectorAll('.chart-btn')
+				zoomBtns.forEach((btn) => {
+					btn.addEventListener('click', () => {
+						if ((btn as HTMLElement).classList.contains('zoom-in')) {
+							svg.transition().duration(300).call(zoom.scaleBy, 1.5)
+						} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
+							svg.transition().duration(300).call(zoom.scaleBy, 0.67)
+						} else {
+							svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity)
+						}
+					})
 				})
+			}
 
-			svg.call(zoom)
-
-			const zoomBtns = wrapper.querySelectorAll('.chart-btn')
-			zoomBtns.forEach((btn) => {
-				btn.addEventListener('click', () => {
-					if ((btn as HTMLElement).classList.contains('zoom-in')) {
-						svg.transition().duration(300).call(zoom.scaleBy, 1.5)
-					} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
-						svg.transition().duration(300).call(zoom.scaleBy, 0.67)
-					} else {
-						svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity)
-					}
-				})
-			})
-		}
+			const observer = new ResizeObserver(() => initChart())
+			observer.observe(container)
+			initChart()
+		})
+	}
 
-		const observer = new ResizeObserver(() => initChart())
-		observer.observe(container)
-		initChart()
-	})
+	onHydration(initLineCharts)
 </script>
diff --git a/src/components/content/PieChart.astro b/src/components/content/PieChart.astro
index 0a89757..5dfc3df 100644
--- a/src/components/content/PieChart.astro
+++ b/src/components/content/PieChart.astro
@@ -51,282 +51,292 @@ const chartColors = JSON.stringify(colors)
 <script>
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
-
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="pie-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
-			? JSON.parse(rawData)
-			: []
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const donut = (wrapper as HTMLElement).dataset.chartDonut === 'true'
-		const donutRatio = parseFloat((wrapper as HTMLElement).dataset.chartDonutRatio || '0.55')
-		const showLabels = (wrapper as HTMLElement).dataset.chartShowLabels !== 'false'
-		const showPercentages = (wrapper as HTMLElement).dataset.chartShowPercentages !== 'false'
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
-
-		if (!chartData.length) return
-
-		const total = chartData.reduce((sum, d) => sum + d.y, 0)
-		const tooltip = createTooltip(container)
-
-		function initChart() {
-			container.innerHTML = ''
-			const width = container.clientWidth
-			const h = chartHeight
-			const radius = Math.min(width, h) / 2 - 20
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.className = 'chart-title'
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+	import { onHydration } from '../../utils/hydration'
+
+	function initPieCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="pie-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; label?: string; color?: string }> = rawData
+				? JSON.parse(rawData)
+				: []
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const donut = (wrapper as HTMLElement).dataset.chartDonut === 'true'
+			const donutRatio = parseFloat((wrapper as HTMLElement).dataset.chartDonutRatio || '0.55')
+			const showLabels = (wrapper as HTMLElement).dataset.chartShowLabels !== 'false'
+			const showPercentages = (wrapper as HTMLElement).dataset.chartShowPercentages !== 'false'
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
+
+			if (!chartData.length) return
+
+			const total = chartData.reduce((sum, d) => sum + d.y, 0)
+			const tooltip = createTooltip(container)
+
+			function initChart() {
+				container.innerHTML = ''
+				const width = container.clientWidth
+				const h = chartHeight
+				const radius = Math.min(width, h) / 2 - 20
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.className = 'chart-title'
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 16px;
 					font-weight: 600;
 					text-align: center;
 					color: ${getThemeColors().textColor};
 				`
-				container.appendChild(titleEl)
-			}
+					container.appendChild(titleEl)
+				}
 
-			const svg = d3
-				.select(container)
-				.append('svg')
-				.attr('width', width)
-				.attr('height', h)
-				.attr('viewBox', `0 0 ${width} ${h}`)
-				.attr('preserveAspectRatio', 'xMidYMid meet')
-
-			const { textColor } = getThemeColors()
-
-			const g = svg.append('g').attr('transform', `translate(${width / 2},${h / 2})`)
-
-			const innerRadius = donut ? radius * donutRatio : 0
-
-			const pie = d3
-				.pie<{ x: number; y: number; label?: string; color?: string }>()
-				.value((d) => d.y)
-				.sort(null)
-				.padAngle(0.02)
-
-			const arc = d3
-				.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
-				.innerRadius(innerRadius)
-				.outerRadius(radius)
-
-			const arcHover = d3
-				.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
-				.innerRadius(innerRadius)
-				.outerRadius(radius + 12)
-
-			const arcLabel = d3
-				.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
-				.innerRadius(radius * 0.8)
-				.outerRadius(radius * 0.8)
-
-			const arcs = g.selectAll('.arc').data(pie(chartData)).enter().append('g').attr('class', 'arc')
-
-			const paths = arcs
-				.append('path')
-				.attr('fill', (d, i) => d.data.color || getColor(i, colors))
-				.attr('stroke', '#fff')
-				.attr('stroke-width', 2)
-				.style('cursor', 'pointer')
-				.style('transition', 'filter 0.2s ease')
-
-			if (animated) {
-				paths
-					.attr(
-						'd',
-						d3
-							.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
-							.innerRadius(innerRadius)
-							.outerRadius(innerRadius),
-					)
-					.transition()
-					.duration(800)
-					.delay((_, i) => i * 80)
-					.ease(d3.easeCubicOut)
-					.attrTween('d', function (d) {
-						const interpolate = d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d)
-						return (t) => arc(interpolate(t))!
-					})
-			}
+				const svg = d3
+					.select(container)
+					.append('svg')
+					.attr('width', width)
+					.attr('height', h)
+					.attr('viewBox', `0 0 ${width} ${h}`)
+					.attr('preserveAspectRatio', 'xMidYMid meet')
+
+				const { textColor } = getThemeColors()
+
+				const g = svg.append('g').attr('transform', `translate(${width / 2},${h / 2})`)
+
+				const innerRadius = donut ? radius * donutRatio : 0
+
+				const pie = d3
+					.pie<{ x: number; y: number; label?: string; color?: string }>()
+					.value((d) => d.y)
+					.sort(null)
+					.padAngle(0.02)
+
+				const arc = d3
+					.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
+					.innerRadius(innerRadius)
+					.outerRadius(radius)
+
+				const arcHover = d3
+					.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
+					.innerRadius(innerRadius)
+					.outerRadius(radius + 12)
+
+				const arcLabel = d3
+					.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
+					.innerRadius(radius * 0.8)
+					.outerRadius(radius * 0.8)
+
+				const arcs = g.selectAll('.arc').data(pie(chartData)).enter().append('g').attr('class', 'arc')
+
+				const paths = arcs
+					.append('path')
+					.attr('fill', (d, i) => d.data.color || getColor(i, colors))
+					.attr('stroke', '#fff')
+					.attr('stroke-width', 2)
+					.style('cursor', 'pointer')
+					.style('transition', 'filter 0.2s ease')
 
-			paths.on('mousemove', function (event, d) {
-				d3.select(this)
-					.transition()
-					.duration(200)
-					.attr('d', arcHover(d)!)
-					.style('filter', `drop-shadow(0 4px 12px rgba(0,0,0,0.25))`)
+				if (animated) {
+					paths
+						.attr(
+							'd',
+							d3
+								.arc<d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>()
+								.innerRadius(innerRadius)
+								.outerRadius(innerRadius),
+						)
+						.transition()
+						.duration(800)
+						.delay((_, i) => i * 80)
+						.ease(d3.easeCubicOut)
+						.attrTween('d', function (d) {
+							const interpolate = d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d)
+							return (t) => arc(interpolate(t))!
+						})
+				}
+
+				paths.on('mousemove', function (event, d) {
+					d3.select(this)
+						.transition()
+						.duration(200)
+						.attr('d', arcHover(d)!)
+						.style('filter', `drop-shadow(0 4px 12px rgba(0,0,0,0.25))`)
+
+					const percentage = ((d.data.y / total) * 100).toFixed(1)
+					const display = showPercentages
+						? `<strong>${d.data.label}</strong><br/>Value: ${d.data.y.toLocaleString()}<br/>${percentage}%`
+						: `<strong>${d.data.label}</strong><br/>Value: ${d.data.y.toLocaleString()}`
+
+					showTooltip(tooltip, event.offsetX, event.offsetY, display, container.getBoundingClientRect())
+				})
+
+				paths.on('mouseleave', function (this: SVGPathElement) {
+					const datum = d3
+						.select<
+							SVGPathElement,
+							d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>
+						>(this)
+						.datum()
+					d3.select(this).transition().duration(200).attr('d', arc(datum)!).style('filter', 'none')
 
-				const percentage = ((d.data.y / total) * 100).toFixed(1)
-				const display = showPercentages
-					? `<strong>${d.data.label}</strong><br/>Value: ${d.data.y.toLocaleString()}<br/>${percentage}%`
-					: `<strong>${d.data.label}</strong><br/>Value: ${d.data.y.toLocaleString()}`
+					hideTooltip(tooltip)
+				})
 
-				showTooltip(tooltip, event.offsetX, event.offsetY, display, container.getBoundingClientRect())
-			})
+				paths.on('click', function (this: SVGPathElement, _, d) {
+					g.selectAll<
+						SVGPathElement,
+						d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>
+					>('path')
+						.transition()
+						.duration(300)
+						.attr('opacity', (p) => (p === d ? 1 : 0.3))
+
+					d3.select(this)
+						.transition()
+						.duration(300)
+						.attr('d', arcHover(d)!)
+						.style('filter', `drop-shadow(0 4px 12px rgba(0,0,0,0.25))`)
+
+					const customEvent = new CustomEvent('chart:click', {
+						bubbles: true,
+						detail: { type: 'pie', x: d.data.x, y: d.data.y, label: d.data.label },
+					})
+					container.dispatchEvent(customEvent)
+				})
 
-			paths.on('mouseleave', function (this: SVGPathElement) {
-				const datum = d3
-					.select<
+				container.addEventListener('chart:reset', () => {
+					g.selectAll<
 						SVGPathElement,
 						d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>
-					>(this)
-					.datum()
-				d3.select(this).transition().duration(200).attr('d', arc(datum)!).style('filter', 'none')
-
-				hideTooltip(tooltip)
-			})
-
-			paths.on('click', function (this: SVGPathElement, _, d) {
-				g.selectAll<SVGPathElement, d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>(
-					'path',
-				)
-					.transition()
-					.duration(300)
-					.attr('opacity', (p) => (p === d ? 1 : 0.3))
-
-				d3.select(this)
-					.transition()
-					.duration(300)
-					.attr('d', arcHover(d)!)
-					.style('filter', `drop-shadow(0 4px 12px rgba(0,0,0,0.25))`)
-
-				const customEvent = new CustomEvent('chart:click', {
-					bubbles: true,
-					detail: { type: 'pie', x: d.data.x, y: d.data.y, label: d.data.label },
+					>('path')
+						.transition()
+						.duration(300)
+						.attr('opacity', 1)
+						.attr('d', (d) => arc(d)!)
+						.style('filter', 'none')
 				})
-				container.dispatchEvent(customEvent)
-			})
-
-			container.addEventListener('chart:reset', () => {
-				g.selectAll<SVGPathElement, d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>(
-					'path',
-				)
-					.transition()
-					.duration(300)
-					.attr('opacity', 1)
-					.attr('d', (d) => arc(d)!)
-					.style('filter', 'none')
-			})
-
-			if (showLabels && !donut) {
-				const labelThreshold = 0.05
-				arcs.filter((d) => d.endAngle - d.startAngle > labelThreshold * 2 * Math.PI)
+
+				if (showLabels && !donut) {
+					const labelThreshold = 0.05
+					arcs.filter((d) => d.endAngle - d.startAngle > labelThreshold * 2 * Math.PI)
+						.append('text')
+						.attr('transform', (d) => `translate(${arcLabel.centroid(d)})`)
+						.attr('text-anchor', 'middle')
+						.attr('fill', textColor)
+						.attr('font-size', '11px')
+						.attr('font-weight', '600')
+						.attr('font-family', 'inherit')
+						.style('pointer-events', 'none')
+						.text((d) => {
+							const pct = (d.data.y / total) * 100
+							return pct >= 5 ? `${pct.toFixed(0)}%` : ''
+						})
+						.attr('opacity', 0)
+						.transition()
+						.duration(400)
+						.delay((_, i) => 800 + i * 80)
+						.attr('opacity', 1)
+				}
+
+				if (donut) {
+					const centerText = g.append('g').attr('class', 'center-text')
+					const totalValue = centerText
+						.append('text')
+						.attr('text-anchor', 'middle')
+						.attr('dy', '-0.1em')
+						.attr('fill', textColor)
+						.attr('font-size', radius * 0.2)
+						.attr('font-weight', '700')
+						.attr('font-family', 'inherit')
+						.text(total.toLocaleString())
+
+					const totalLabel = centerText
+						.append('text')
+						.attr('text-anchor', 'middle')
+						.attr('dy', '1.5em')
+						.attr('fill', textColor)
+						.attr('font-size', radius * 0.1)
+						.attr('font-weight', '500')
+						.attr('font-family', 'inherit')
+						.style('opacity', 0.7)
+						.text('Total')
+
+					if (animated) {
+						totalValue.attr('opacity', 0).transition().delay(600).duration(400).attr('opacity', 1)
+						totalLabel.attr('opacity', 0).transition().delay(700).duration(400).attr('opacity', 0.7)
+					}
+				}
+
+				const legend = svg
+					.append('g')
+					.attr('transform', `translate(${width - 100}, 10)`)
+					.attr('class', 'legend')
+
+				const legendItems = legend
+					.selectAll('.legend-item')
+					.data(chartData)
+					.enter()
+					.append('g')
+					.attr('transform', (_, i) => `translate(0, ${i * 22})`)
+					.style('cursor', 'pointer')
+
+				legendItems
+					.append('rect')
+					.attr('width', 12)
+					.attr('height', 12)
+					.attr('rx', 3)
+					.attr('fill', (d, i) => d.color || getColor(i, colors))
+
+				legendItems
 					.append('text')
-					.attr('transform', (d) => `translate(${arcLabel.centroid(d)})`)
-					.attr('text-anchor', 'middle')
+					.attr('x', 18)
+					.attr('y', 10)
 					.attr('fill', textColor)
 					.attr('font-size', '11px')
-					.attr('font-weight', '600')
+					.attr('font-weight', '500')
 					.attr('font-family', 'inherit')
-					.style('pointer-events', 'none')
 					.text((d) => {
-						const pct = (d.data.y / total) * 100
-						return pct >= 5 ? `${pct.toFixed(0)}%` : ''
+						const label = d.label || String(d.x)
+						return label.length > 10 ? label.slice(0, 10) + '…' : label
 					})
-					.attr('opacity', 0)
-					.transition()
-					.duration(400)
-					.delay((_, i) => 800 + i * 80)
-					.attr('opacity', 1)
-			}
 
-			if (donut) {
-				const centerText = g.append('g').attr('class', 'center-text')
-				const totalValue = centerText
-					.append('text')
-					.attr('text-anchor', 'middle')
-					.attr('dy', '-0.1em')
-					.attr('fill', textColor)
-					.attr('font-size', radius * 0.2)
-					.attr('font-weight', '700')
-					.attr('font-family', 'inherit')
-					.text(total.toLocaleString())
+				legendItems.on('mousemove', function (_, d) {
+					g.selectAll<
+						SVGPathElement,
+						d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>
+					>('path')
+						.transition()
+						.duration(200)
+						.attr('opacity', (p) =>
+							(p.data.label || String(p.data.x)) === (d.label || String(d.x)) ? 1 : 0.3,
+						)
+				})
 
-				const totalLabel = centerText
-					.append('text')
-					.attr('text-anchor', 'middle')
-					.attr('dy', '1.5em')
-					.attr('fill', textColor)
-					.attr('font-size', radius * 0.1)
-					.attr('font-weight', '500')
-					.attr('font-family', 'inherit')
-					.style('opacity', 0.7)
-					.text('Total')
+				legendItems.on('mouseleave', function () {
+					g.selectAll('path').transition().duration(200).attr('opacity', 1)
+				})
 
 				if (animated) {
-					totalValue.attr('opacity', 0).transition().delay(600).duration(400).attr('opacity', 1)
-					totalLabel.attr('opacity', 0).transition().delay(700).duration(400).attr('opacity', 0.7)
+					legendItems
+						.attr('opacity', 0)
+						.transition()
+						.duration(400)
+						.delay((_, i) => 600 + i * 60)
+						.attr('opacity', 1)
 				}
 			}
 
-			const legend = svg
-				.append('g')
-				.attr('transform', `translate(${width - 100}, 10)`)
-				.attr('class', 'legend')
-
-			const legendItems = legend
-				.selectAll('.legend-item')
-				.data(chartData)
-				.enter()
-				.append('g')
-				.attr('transform', (_, i) => `translate(0, ${i * 22})`)
-				.style('cursor', 'pointer')
-
-			legendItems
-				.append('rect')
-				.attr('width', 12)
-				.attr('height', 12)
-				.attr('rx', 3)
-				.attr('fill', (d, i) => d.color || getColor(i, colors))
-
-			legendItems
-				.append('text')
-				.attr('x', 18)
-				.attr('y', 10)
-				.attr('fill', textColor)
-				.attr('font-size', '11px')
-				.attr('font-weight', '500')
-				.attr('font-family', 'inherit')
-				.text((d) => {
-					const label = d.label || String(d.x)
-					return label.length > 10 ? label.slice(0, 10) + '…' : label
-				})
-
-			legendItems.on('mousemove', function (_, d) {
-				g.selectAll<SVGPathElement, d3.PieArcDatum<{ x: number; y: number; label?: string; color?: string }>>(
-					'path',
-				)
-					.transition()
-					.duration(200)
-					.attr('opacity', (p) => ((p.data.label || String(p.data.x)) === (d.label || String(d.x)) ? 1 : 0.3))
-			})
-
-			legendItems.on('mouseleave', function () {
-				g.selectAll('path').transition().duration(200).attr('opacity', 1)
-			})
-
-			if (animated) {
-				legendItems
-					.attr('opacity', 0)
-					.transition()
-					.duration(400)
-					.delay((_, i) => 600 + i * 60)
-					.attr('opacity', 1)
-			}
-		}
+			const observer = new ResizeObserver(() => initChart())
+			observer.observe(container)
+			initChart()
+		})
+	}
 
-		const observer = new ResizeObserver(() => initChart())
-		observer.observe(container)
-		initChart()
-	})
+	onHydration(initPieCharts)
 </script>
diff --git a/src/components/content/ScatterChart.astro b/src/components/content/ScatterChart.astro
index 9d8ed9c..214e8f6 100644
--- a/src/components/content/ScatterChart.astro
+++ b/src/components/content/ScatterChart.astro
@@ -98,388 +98,397 @@ const chartColors = JSON.stringify(colors)
 <script>
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
+	import { onHydration } from '../../utils/hydration'
+
+	function initScatterCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="scatter-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; color?: string; label?: string }> = rawData
+				? JSON.parse(rawData)
+				: []
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const showTrendline = (wrapper as HTMLElement).dataset.chartShowTrendline === 'true'
+			const trendlineColor = (wrapper as HTMLElement).dataset.chartTrendlineColor || '#ef4444'
+			const showLabels = (wrapper as HTMLElement).dataset.chartShowLabels !== 'false'
+			const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '6')
+			const pointOpacity = parseFloat((wrapper as HTMLElement).dataset.chartPointOpacity || '1')
+			const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
+			const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
+			const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
+			const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
+
+			if (!chartData.length) return
+
+			const margin = { top: 20, right: 20, bottom: 40, left: 60 }
+			const tooltip = createTooltip(container)
+
+			function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
+				const { axisColor } = getThemeColors()
+				axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
+				axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
+				axisG
+					.selectAll('.tick text')
+					.attr('fill', textColor)
+					.style('fill', textColor)
+					.attr('font-size', '12px')
+					.attr('font-family', 'inherit')
+					.style('font-weight', '500')
+			}
 
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="scatter-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; color?: string; label?: string }> = rawData
-			? JSON.parse(rawData)
-			: []
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const showTrendline = (wrapper as HTMLElement).dataset.chartShowTrendline === 'true'
-		const trendlineColor = (wrapper as HTMLElement).dataset.chartTrendlineColor || '#ef4444'
-		const showLabels = (wrapper as HTMLElement).dataset.chartShowLabels !== 'false'
-		const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '6')
-		const pointOpacity = parseFloat((wrapper as HTMLElement).dataset.chartPointOpacity || '1')
-		const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
-		const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
-		const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '300')
-		const chartId = parseInt((wrapper as HTMLElement).dataset.chartId || 'uid')
-
-		if (!chartData.length) return
-
-		const margin = { top: 20, right: 20, bottom: 40, left: 60 }
-		const tooltip = createTooltip(container)
-
-		function applyAxisStyles(axisG: d3.Selection<SVGGElement, unknown, null, undefined>, textColor: string) {
-			const { axisColor } = getThemeColors()
-			axisG.select('.domain').style('stroke', axisColor).style('stroke-width', 1.5)
-			axisG.selectAll('.tick line').style('stroke', axisColor).style('stroke-width', 1)
-			axisG
-				.selectAll('.tick text')
-				.attr('fill', textColor)
-				.style('fill', textColor)
-				.attr('font-size', '12px')
-				.attr('font-family', 'inherit')
-				.style('font-weight', '500')
-		}
-
-		function renderGrid(
-			g: d3.Selection<SVGGElement, unknown, null, undefined>,
-			y: d3.ScaleLinear<number, number>,
-			w: number,
-			gridColor: string,
-		) {
-			const gridG = g.append('g').attr('class', 'grid')
-			gridG.call(
-				d3
-					.axisLeft(y)
-					.tickSize(-w)
-					.tickFormat(() => ''),
-			)
-			gridG.selectAll('line').style('stroke', gridColor).style('stroke-dasharray', '3,3').style('stroke-width', 1)
-			gridG.select('.domain').remove()
-			return gridG
-		}
-
-		function calculateTrendline(
-			data: Array<{ x: number; y: number }>,
-			x: d3.ScaleLinear<number, number>,
-			y: d3.ScaleLinear<number, number>,
-		) {
-			const n = data.length
-			if (n < 2) return null
-
-			const xValues = data.map((d) => d.x)
-			const yValues = data.map((d) => d.y)
-
-			const xMean = xValues.reduce((a, b) => a + b, 0) / n
-			const yMean = yValues.reduce((a, b) => a + b, 0) / n
-
-			let numerator = 0
-			let denominator = 0
-			for (let i = 0; i < n; i++) {
-				numerator += (xValues[i] - xMean) * (yValues[i] - yMean)
-				denominator += (xValues[i] - xMean) ** 2
+			function renderGrid(
+				g: d3.Selection<SVGGElement, unknown, null, undefined>,
+				y: d3.ScaleLinear<number, number>,
+				w: number,
+				gridColor: string,
+			) {
+				const gridG = g.append('g').attr('class', 'grid')
+				gridG.call(
+					d3
+						.axisLeft(y)
+						.tickSize(-w)
+						.tickFormat(() => ''),
+				)
+				gridG
+					.selectAll('line')
+					.style('stroke', gridColor)
+					.style('stroke-dasharray', '3,3')
+					.style('stroke-width', 1)
+				gridG.select('.domain').remove()
+				return gridG
 			}
 
-			const slope = denominator !== 0 ? numerator / denominator : 0
-			const intercept = yMean - slope * xMean
-
-			const xMin = d3.min(xValues)!
-			const xMax = d3.max(xValues)!
-			const yStart = slope * xMin + intercept
-			const yEnd = slope * xMax + intercept
-
-			return {
-				x1: x(xMin),
-				y1: y(yStart),
-				x2: x(xMax),
-				y2: y(yEnd),
-				slope,
-				r2:
-					denominator !== 0
-						? numerator ** 2 / (denominator * yValues.reduce((s, v) => s + (v - yMean) ** 2, 0))
-						: 0,
+			function calculateTrendline(
+				data: Array<{ x: number; y: number }>,
+				x: d3.ScaleLinear<number, number>,
+				y: d3.ScaleLinear<number, number>,
+			) {
+				const n = data.length
+				if (n < 2) return null
+
+				const xValues = data.map((d) => d.x)
+				const yValues = data.map((d) => d.y)
+
+				const xMean = xValues.reduce((a, b) => a + b, 0) / n
+				const yMean = yValues.reduce((a, b) => a + b, 0) / n
+
+				let numerator = 0
+				let denominator = 0
+				for (let i = 0; i < n; i++) {
+					numerator += (xValues[i] - xMean) * (yValues[i] - yMean)
+					denominator += (xValues[i] - xMean) ** 2
+				}
+
+				const slope = denominator !== 0 ? numerator / denominator : 0
+				const intercept = yMean - slope * xMean
+
+				const xMin = d3.min(xValues)!
+				const xMax = d3.max(xValues)!
+				const yStart = slope * xMin + intercept
+				const yEnd = slope * xMax + intercept
+
+				return {
+					x1: x(xMin),
+					y1: y(yStart),
+					x2: x(xMax),
+					y2: y(yEnd),
+					slope,
+					r2:
+						denominator !== 0
+							? numerator ** 2 / (denominator * yValues.reduce((s, v) => s + (v - yMean) ** 2, 0))
+							: 0,
+				}
 			}
-		}
-
-		function initChart() {
-			container.innerHTML = ''
-			const width = container.clientWidth
-			const h = chartHeight
-			const innerWidth = width - margin.left - margin.right
-			const innerHeight = h - margin.top - margin.bottom
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.className = 'chart-title'
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+
+			function initChart() {
+				container.innerHTML = ''
+				const width = container.clientWidth
+				const h = chartHeight
+				const innerWidth = width - margin.left - margin.right
+				const innerHeight = h - margin.top - margin.bottom
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.className = 'chart-title'
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 16px;
 					font-weight: 600;
 					text-align: center;
 					color: ${getThemeColors().textColor};
 				`
-				container.appendChild(titleEl)
-			}
-
-			const svg = d3
-				.select(container)
-				.append('svg')
-				.attr('width', width)
-				.attr('height', h)
-				.attr('viewBox', `0 0 ${width} ${h}`)
-				.attr('preserveAspectRatio', 'xMidYMid meet')
-				.style('overflow', 'hidden')
-				.style('cursor', 'grab')
-
-			const defs = svg.append('defs')
-			const clipId = `clip-${chartId}`
-			defs.append('clipPath')
-				.attr('id', clipId)
-				.append('rect')
-				.attr('width', innerWidth)
-				.attr('height', innerHeight)
-			const glowFilter = defs.append('filter').attr('id', `scatter-glow-${chartId}`)
-			glowFilter.append('feGaussianBlur').attr('stdDeviation', 2).attr('result', 'coloredBlur')
-			const feMerge = glowFilter.append('feMerge')
-			feMerge.append('feMergeNode').attr('in', 'coloredBlur')
-			feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
-
-			const g = svg
-				.append('g')
-				.attr('class', 'chart-group')
-				.attr('transform', `translate(${margin.left},${margin.top})`)
-			const chartContent = g.append('g').attr('clip-path', `url(#${clipId})`)
-			const { textColor, gridColor } = getThemeColors()
-
-			const xMin = xAxisConfig.min ?? (chartData.length > 0 ? d3.min(chartData, (d) => d.x)! : 0)
-			const xMax =
-				xAxisConfig.max ?? (chartData.length > 0 ? d3.max(chartData, (d) => d.x)! : chartData.length + 1)
-			const yMin = yAxisConfig.min ?? 0
-			const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.15
-
-			const x = d3.scaleLinear().domain([xMin, xMax]).range([0, innerWidth])
-
-			const y = d3.scaleLinear().domain([yMin, yMax]).range([innerHeight, 0]).nice()
-
-			if (showGrid) {
-				renderGrid(g, y, innerWidth, gridColor)
-			}
-
-			const xAxisG = g.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
-			if (xAxisConfig.tickInterval) {
-				const tickCount = Math.ceil((xMax - xMin) / xAxisConfig.tickInterval)
-				xAxisG.call(d3.axisBottom(x).ticks(tickCount))
-			} else {
-				xAxisG.call(d3.axisBottom(x))
-			}
-			applyAxisStyles(xAxisG, textColor)
-
-			const yAxisG = g.append('g').attr('class', 'y-axis')
-			yAxisG.call(d3.axisLeft(y).ticks(Math.min(chartData.length, 10)))
-			applyAxisStyles(yAxisG, textColor)
-
-			if (showTrendline) {
-				const trend = calculateTrendline(chartData, x, y)
-				if (trend) {
-					const trendline = chartContent
-						.append('line')
-						.attr('class', 'trendline')
-						.attr('x1', trend.x1)
-						.attr('y1', trend.y1)
-						.attr('x2', trend.x2)
-						.attr('y2', trend.y2)
-						.attr('stroke', trendlineColor)
-						.attr('stroke-width', 2)
-						.attr('stroke-dasharray', '6,4')
-						.attr('opacity', 0.7)
+					container.appendChild(titleEl)
+				}
 
-					if (animated) {
-						trendline.attr('opacity', 0).transition().delay(600).duration(500).attr('opacity', 0.7)
-					}
+				const svg = d3
+					.select(container)
+					.append('svg')
+					.attr('width', width)
+					.attr('height', h)
+					.attr('viewBox', `0 0 ${width} ${h}`)
+					.attr('preserveAspectRatio', 'xMidYMid meet')
+					.style('overflow', 'hidden')
+					.style('cursor', 'grab')
+
+				const defs = svg.append('defs')
+				const clipId = `clip-${chartId}`
+				defs.append('clipPath')
+					.attr('id', clipId)
+					.append('rect')
+					.attr('width', innerWidth)
+					.attr('height', innerHeight)
+				const glowFilter = defs.append('filter').attr('id', `scatter-glow-${chartId}`)
+				glowFilter.append('feGaussianBlur').attr('stdDeviation', 2).attr('result', 'coloredBlur')
+				const feMerge = glowFilter.append('feMerge')
+				feMerge.append('feMergeNode').attr('in', 'coloredBlur')
+				feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
+
+				const g = svg
+					.append('g')
+					.attr('class', 'chart-group')
+					.attr('transform', `translate(${margin.left},${margin.top})`)
+				const chartContent = g.append('g').attr('clip-path', `url(#${clipId})`)
+				const { textColor, gridColor } = getThemeColors()
+
+				const xMin = xAxisConfig.min ?? (chartData.length > 0 ? d3.min(chartData, (d) => d.x)! : 0)
+				const xMax =
+					xAxisConfig.max ?? (chartData.length > 0 ? d3.max(chartData, (d) => d.x)! : chartData.length + 1)
+				const yMin = yAxisConfig.min ?? 0
+				const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y)! * 1.15
+
+				const x = d3.scaleLinear().domain([xMin, xMax]).range([0, innerWidth])
+
+				const y = d3.scaleLinear().domain([yMin, yMax]).range([innerHeight, 0]).nice()
+
+				if (showGrid) {
+					renderGrid(g, y, innerWidth, gridColor)
+				}
 
-					const r2 = isNaN(trend.r2) ? 0 : Math.max(0, Math.min(1, trend.r2))
-					const legendText = g
-						.append('text')
-						.attr('x', innerWidth - 5)
-						.attr('y', 15)
-						.attr('text-anchor', 'end')
-						.attr('fill', trendlineColor)
-						.attr('font-size', '11px')
-						.attr('font-weight', '600')
-						.attr('font-family', 'inherit')
-						.text(`R² = ${r2.toFixed(3)}`)
+				const xAxisG = g.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
+				if (xAxisConfig.tickInterval) {
+					const tickCount = Math.ceil((xMax - xMin) / xAxisConfig.tickInterval)
+					xAxisG.call(d3.axisBottom(x).ticks(tickCount))
+				} else {
+					xAxisG.call(d3.axisBottom(x))
+				}
+				applyAxisStyles(xAxisG, textColor)
+
+				const yAxisG = g.append('g').attr('class', 'y-axis')
+				yAxisG.call(d3.axisLeft(y).ticks(Math.min(chartData.length, 10)))
+				applyAxisStyles(yAxisG, textColor)
+
+				if (showTrendline) {
+					const trend = calculateTrendline(chartData, x, y)
+					if (trend) {
+						const trendline = chartContent
+							.append('line')
+							.attr('class', 'trendline')
+							.attr('x1', trend.x1)
+							.attr('y1', trend.y1)
+							.attr('x2', trend.x2)
+							.attr('y2', trend.y2)
+							.attr('stroke', trendlineColor)
+							.attr('stroke-width', 2)
+							.attr('stroke-dasharray', '6,4')
+							.attr('opacity', 0.7)
+
+						if (animated) {
+							trendline.attr('opacity', 0).transition().delay(600).duration(500).attr('opacity', 0.7)
+						}
 
-					if (animated) {
-						legendText.attr('opacity', 0).transition().delay(800).duration(400).attr('opacity', 1)
+						const r2 = isNaN(trend.r2) ? 0 : Math.max(0, Math.min(1, trend.r2))
+						const legendText = g
+							.append('text')
+							.attr('x', innerWidth - 5)
+							.attr('y', 15)
+							.attr('text-anchor', 'end')
+							.attr('fill', trendlineColor)
+							.attr('font-size', '11px')
+							.attr('font-weight', '600')
+							.attr('font-family', 'inherit')
+							.text(`R² = ${r2.toFixed(3)}`)
+
+						if (animated) {
+							legendText.attr('opacity', 0).transition().delay(800).duration(400).attr('opacity', 1)
+						}
 					}
 				}
-			}
 
-			const dots = chartContent
-				.selectAll('.dot')
-				.data(chartData)
-				.enter()
-				.append('circle')
-				.attr('class', 'dot')
-				.attr('cx', (d) => x(d.x))
-				.attr('cy', (d) => y(d.y))
-				.attr('r', pointSize)
-				.attr('fill', (d, i) => d.color || getColor(i, colors))
-				.attr('stroke', '#fff')
-				.attr('stroke-width', 2)
-				.attr('opacity', pointOpacity)
-				.style('cursor', 'pointer')
-				.style('filter', `url(#scatter-glow-${chartId})`)
-
-			if (animated) {
-				dots.attr('opacity', 0)
-					.attr('r', 0)
-					.transition()
-					.duration(500)
-					.delay((_, i) => i * 60)
-					.ease(d3.easeBackOut.overshoot(1.5))
-					.attr('opacity', pointOpacity)
+				const dots = chartContent
+					.selectAll('.dot')
+					.data(chartData)
+					.enter()
+					.append('circle')
+					.attr('class', 'dot')
+					.attr('cx', (d) => x(d.x))
+					.attr('cy', (d) => y(d.y))
 					.attr('r', pointSize)
-			}
+					.attr('fill', (d, i) => d.color || getColor(i, colors))
+					.attr('stroke', '#fff')
+					.attr('stroke-width', 2)
+					.attr('opacity', pointOpacity)
+					.style('cursor', 'pointer')
+					.style('filter', `url(#scatter-glow-${chartId})`)
 
-			dots.on('mousemove', function (event, d) {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('r', pointSize + 4)
-					.style('filter', `drop-shadow(0 0 8px ${d.color || colors[0]})`)
-
-				const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
-				showTooltip(
-					tooltip,
-					event.offsetX,
-					event.offsetY,
-					`${labelText}x: ${d.x}<br/>y: ${d.y.toLocaleString()}`,
-					container.getBoundingClientRect(),
-				)
-			})
+				if (animated) {
+					dots.attr('opacity', 0)
+						.attr('r', 0)
+						.transition()
+						.duration(500)
+						.delay((_, i) => i * 60)
+						.ease(d3.easeBackOut.overshoot(1.5))
+						.attr('opacity', pointOpacity)
+						.attr('r', pointSize)
+				}
 
-			dots.on('mouseleave', function () {
-				d3.select(this)
-					.transition()
-					.duration(150)
-					.attr('r', pointSize)
-					.style('filter', `url(#scatter-glow-${chartId})`)
+				dots.on('mousemove', function (event, d) {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('r', pointSize + 4)
+						.style('filter', `drop-shadow(0 0 8px ${d.color || colors[0]})`)
+
+					const labelText = d.label ? `<strong>${d.label}</strong><br/>` : ''
+					showTooltip(
+						tooltip,
+						event.offsetX,
+						event.offsetY,
+						`${labelText}x: ${d.x}<br/>y: ${d.y.toLocaleString()}`,
+						container.getBoundingClientRect(),
+					)
+				})
 
-				hideTooltip(tooltip)
-			})
+				dots.on('mouseleave', function () {
+					d3.select(this)
+						.transition()
+						.duration(150)
+						.attr('r', pointSize)
+						.style('filter', `url(#scatter-glow-${chartId})`)
 
-			dots.on('click', function (_, d) {
-				const customEvent = new CustomEvent('chart:click', {
-					bubbles: true,
-					detail: { type: 'scatter', x: d.x, y: d.y, label: d.label },
+					hideTooltip(tooltip)
 				})
-				container.dispatchEvent(customEvent)
-			})
 
-			if (showLabels) {
-				const labels = chartContent
-					.selectAll('.label')
-					.data(chartData)
-					.enter()
-					.append('text')
-					.attr('class', 'label')
-					.attr('x', (d) => x(d.x))
-					.attr('y', (d) => y(d.y))
-					.attr('dx', pointSize + 6)
-					.attr('dy', 4)
-					.attr('fill', textColor)
-					.attr('font-size', '11px')
-					.attr('font-weight', '500')
-					.attr('font-family', 'inherit')
-					.style('pointer-events', 'none')
-					.text((d) => d.label || `(${d.x}, ${d.y})`)
+				dots.on('click', function (_, d) {
+					const customEvent = new CustomEvent('chart:click', {
+						bubbles: true,
+						detail: { type: 'scatter', x: d.x, y: d.y, label: d.label },
+					})
+					container.dispatchEvent(customEvent)
+				})
 
-				if (animated) {
-					labels
-						.attr('opacity', 0)
-						.transition()
-						.duration(400)
-						.delay((_, i) => 500 + i * 60)
-						.attr('opacity', 1)
-				}
-			}
+				if (showLabels) {
+					const labels = chartContent
+						.selectAll('.label')
+						.data(chartData)
+						.enter()
+						.append('text')
+						.attr('class', 'label')
+						.attr('x', (d) => x(d.x))
+						.attr('y', (d) => y(d.y))
+						.attr('dx', pointSize + 6)
+						.attr('dy', 4)
+						.attr('fill', textColor)
+						.attr('font-size', '11px')
+						.attr('font-weight', '500')
+						.attr('font-family', 'inherit')
+						.style('pointer-events', 'none')
+						.text((d) => d.label || `(${d.x}, ${d.y})`)
 
-			const zoom = d3
-				.zoom<SVGSVGElement, unknown>()
-				.scaleExtent([0.5, 10])
-				.translateExtent([
-					[-innerWidth, -innerHeight],
-					[innerWidth * 2, innerHeight * 2],
-				])
-				.on('zoom', (event) => {
-					const newX = event.transform.rescaleX(x)
-
-					xAxisG.call(d3.axisBottom(newX))
-					applyAxisStyles(xAxisG, textColor)
-
-					dots.attr('cx', (d) => newX(d.x))
-
-					if (showLabels) {
-						chartContent
-							.selectAll<
-								SVGTextElement,
-								{ x: number; y: number; label?: string; color?: string }
-							>('.label')
-							.attr('x', (d) => newX(d.x))
+					if (animated) {
+						labels
+							.attr('opacity', 0)
+							.transition()
+							.duration(400)
+							.delay((_, i) => 500 + i * 60)
+							.attr('opacity', 1)
 					}
+				}
+
+				const zoom = d3
+					.zoom<SVGSVGElement, unknown>()
+					.scaleExtent([0.5, 10])
+					.translateExtent([
+						[-innerWidth, -innerHeight],
+						[innerWidth * 2, innerHeight * 2],
+					])
+					.on('zoom', (event) => {
+						const newX = event.transform.rescaleX(x)
+
+						xAxisG.call(d3.axisBottom(newX))
+						applyAxisStyles(xAxisG, textColor)
 
-					chartContent.selectAll('.trendline').remove()
-					if (showTrendline) {
-						const trend = calculateTrendline(chartData, newX, y)
-						if (trend) {
+						dots.attr('cx', (d) => newX(d.x))
+
+						if (showLabels) {
 							chartContent
-								.append('line')
-								.attr('class', 'trendline')
-								.attr('x1', trend.x1)
-								.attr('y1', trend.y1)
-								.attr('x2', trend.x2)
-								.attr('y2', trend.y2)
-								.attr('stroke', trendlineColor)
-								.attr('stroke-width', 2)
-								.attr('stroke-dasharray', '6,4')
-								.attr('opacity', 0.7)
+								.selectAll<
+									SVGTextElement,
+									{ x: number; y: number; label?: string; color?: string }
+								>('.label')
+								.attr('x', (d) => newX(d.x))
 						}
-					}
-				})
-
-			svg.call(zoom)
-
-			const zoomBtns = wrapper.querySelectorAll('.chart-btn')
-			zoomBtns.forEach((btn) => {
-				btn.addEventListener('click', () => {
-					if ((btn as HTMLElement).classList.contains('zoom-in')) {
-						svg.transition().duration(300).call(zoom.scaleBy, 1.5)
-					} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
-						svg.transition().duration(300).call(zoom.scaleBy, 0.67)
-					} else {
-						svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity)
-					}
-				})
-			})
 
-			dots.call(
-				d3
-					.drag<SVGCircleElement, { x: number; y: number; color?: string; label?: string }>()
-					.on('start', function (this: SVGCircleElement) {
-						d3.select(this).raise().style('cursor', 'grabbing')
+						chartContent.selectAll('.trendline').remove()
+						if (showTrendline) {
+							const trend = calculateTrendline(chartData, newX, y)
+							if (trend) {
+								chartContent
+									.append('line')
+									.attr('class', 'trendline')
+									.attr('x1', trend.x1)
+									.attr('y1', trend.y1)
+									.attr('x2', trend.x2)
+									.attr('y2', trend.y2)
+									.attr('stroke', trendlineColor)
+									.attr('stroke-width', 2)
+									.attr('stroke-dasharray', '6,4')
+									.attr('opacity', 0.7)
+							}
+						}
 					})
-					.on('drag', function (this: SVGCircleElement, event) {
-						d3.select(this).attr('cx', Math.max(0, Math.min(innerWidth, event.x)))
+
+				svg.call(zoom)
+
+				const zoomBtns = wrapper.querySelectorAll('.chart-btn')
+				zoomBtns.forEach((btn) => {
+					btn.addEventListener('click', () => {
+						if ((btn as HTMLElement).classList.contains('zoom-in')) {
+							svg.transition().duration(300).call(zoom.scaleBy, 1.5)
+						} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
+							svg.transition().duration(300).call(zoom.scaleBy, 0.67)
+						} else {
+							svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity)
+						}
 					})
-					.on('end', function (this: SVGCircleElement) {
-						d3.select(this).style('cursor', 'pointer')
-					}),
-			)
-		}
-
-		const observer = new ResizeObserver(() => initChart())
-		observer.observe(container)
-		initChart()
-	})
+				})
+
+				dots.call(
+					d3
+						.drag<SVGCircleElement, { x: number; y: number; color?: string; label?: string }>()
+						.on('start', function (this: SVGCircleElement) {
+							d3.select(this).raise().style('cursor', 'grabbing')
+						})
+						.on('drag', function (this: SVGCircleElement, event) {
+							d3.select(this).attr('cx', Math.max(0, Math.min(innerWidth, event.x)))
+						})
+						.on('end', function (this: SVGCircleElement) {
+							d3.select(this).style('cursor', 'pointer')
+						}),
+				)
+			}
+
+			const observer = new ResizeObserver(() => initChart())
+			observer.observe(container)
+			initChart()
+		})
+	}
+
+	onHydration(initScatterCharts)
 </script>
diff --git a/src/components/content/ScatterChart3D.astro b/src/components/content/ScatterChart3D.astro
index 5a98f9d..22d0f6d 100644
--- a/src/components/content/ScatterChart3D.astro
+++ b/src/components/content/ScatterChart3D.astro
@@ -99,438 +99,447 @@ const chartColors = JSON.stringify(colors)
 	import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 	import * as d3 from 'd3'
 	import { getThemeColors, getColor, createTooltip, showTooltip, hideTooltip } from '../../utils/chartUtils'
+	import { onHydration } from '../../utils/hydration'
 
 	const CUBE = 1.8
 
-	const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="scatter3d-chart"]')
-
-	wrappers.forEach((wrapper) => {
-		const container = wrapper.querySelector('div') as HTMLElement
-		if (!container) return
-
-		const rawData = (wrapper as HTMLElement).dataset.chartData
-		const chartData: Array<{ x: number; y: number; z: number; color?: string; label?: string }> = rawData
-			? JSON.parse(rawData).map((d: { x: number; y: number; z?: number; color?: string; label?: string }) => ({
-					...d,
-					z: d.z ?? 0,
-				}))
-			: []
-
-		if (!chartData.length) return
-
-		const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
-		const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
-		const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '8')
-		const pointOpacity = parseFloat((wrapper as HTMLElement).dataset.chartPointOpacity || '1')
-		const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
-		const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
-		const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
-		const zAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartZAxis || '{}')
-		const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '400')
-		const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
-
-		const xMin = xAxisConfig.min ?? d3.min(chartData, (d) => d.x) ?? 0
-		const xMax = xAxisConfig.max ?? d3.max(chartData, (d) => d.x) ?? 1
-		const yMin = yAxisConfig.min ?? d3.min(chartData, (d) => d.y) ?? 0
-		const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y) ?? 1
-		const zMin = zAxisConfig.min ?? d3.min(chartData, (d) => d.z) ?? 0
-		const zMax = zAxisConfig.max ?? d3.max(chartData, (d) => d.z) ?? 1
-
-		const scaleX = d3.scaleLinear().domain([xMin, xMax]).range([0, CUBE])
-		const scaleY = d3.scaleLinear().domain([yMin, yMax]).range([0, CUBE])
-		const scaleZ = d3.scaleLinear().domain([zMin, zMax]).range([0, CUBE])
-
-		let scene: THREE.Scene
-		let camera: THREE.PerspectiveCamera
-		let renderer: THREE.WebGLRenderer
-		let controls: OrbitControls
-		let pointsGroup: THREE.Group
-		let raycaster: THREE.Raycaster
-		let mouse: THREE.Vector2
-		let hoveredMesh: THREE.Mesh | null = null
-
-		const DEFAULT_EYE = new THREE.Vector3(CUBE * 0.5, CUBE * 0.6, CUBE * 2.5)
-		const CENTER = new THREE.Vector3(CUBE / 2, CUBE / 2, CUBE / 2)
-
-		function makeLabel(
-			text: string,
-			position: THREE.Vector3,
-			colorHex: number,
-			scaleW = 0.28,
-			scaleH = 0.1,
-			fontPx = 28,
-		) {
-			const canvas = document.createElement('canvas')
-			canvas.width = 256
-			canvas.height = 64
-			const ctx = canvas.getContext('2d')!
-			ctx.clearRect(0, 0, 256, 64)
-			ctx.fillStyle = `#${colorHex.toString(16).padStart(6, '0')}`
-			ctx.font = `${fontPx}px monospace`
-			ctx.textAlign = 'center'
-			ctx.textBaseline = 'middle'
-			ctx.fillText(text, 128, 32)
-			const texture = new THREE.CanvasTexture(canvas)
-			texture.needsUpdate = true
-			const mat = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false })
-			const sprite = new THREE.Sprite(mat)
-			sprite.position.copy(position)
-			sprite.scale.set(scaleW, scaleH, 1)
-			return sprite
-		}
-
-		function makeFaceGrid(
-			origin: THREE.Vector3,
-			uDir: THREE.Vector3,
-			vDir: THREE.Vector3,
-			divisions: number,
-			color: number,
-		) {
-			const points: THREE.Vector3[] = []
-			for (let i = 0; i <= divisions; i++) {
-				const t = (i / divisions) * CUBE
-				points.push(origin.clone().addScaledVector(vDir, t))
-				points.push(origin.clone().addScaledVector(uDir, CUBE).addScaledVector(vDir, t))
-				points.push(origin.clone().addScaledVector(uDir, t))
-				points.push(origin.clone().addScaledVector(uDir, t).addScaledVector(vDir, CUBE))
+	function initScatter3DCharts() {
+		const wrappers = document.querySelectorAll('.chart-wrapper[data-chart-id^="scatter3d-chart"]')
+
+		wrappers.forEach((wrapper) => {
+			const container = wrapper.querySelector('div') as HTMLElement
+			if (!container) return
+
+			const rawData = (wrapper as HTMLElement).dataset.chartData
+			const chartData: Array<{ x: number; y: number; z: number; color?: string; label?: string }> = rawData
+				? JSON.parse(rawData).map(
+						(d: { x: number; y: number; z?: number; color?: string; label?: string }) => ({
+							...d,
+							z: d.z ?? 0,
+						}),
+					)
+				: []
+
+			if (!chartData.length) return
+
+			const colors: string[] = JSON.parse((wrapper as HTMLElement).dataset.chartColors || '[]')
+			const animated = (wrapper as HTMLElement).dataset.chartAnimated !== 'false'
+			const pointSize = parseFloat((wrapper as HTMLElement).dataset.chartPointSize || '8')
+			const pointOpacity = parseFloat((wrapper as HTMLElement).dataset.chartPointOpacity || '1')
+			const showGrid = (wrapper as HTMLElement).dataset.chartShowGrid !== 'false'
+			const xAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartXAxis || '{}')
+			const yAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartYAxis || '{}')
+			const zAxisConfig = JSON.parse((wrapper as HTMLElement).dataset.chartZAxis || '{}')
+			const chartHeight = parseInt((wrapper as HTMLElement).dataset.chartHeight || '400')
+			const chartTitle = (wrapper as HTMLElement).dataset.chartTitle || ''
+
+			const xMin = xAxisConfig.min ?? d3.min(chartData, (d) => d.x) ?? 0
+			const xMax = xAxisConfig.max ?? d3.max(chartData, (d) => d.x) ?? 1
+			const yMin = yAxisConfig.min ?? d3.min(chartData, (d) => d.y) ?? 0
+			const yMax = yAxisConfig.max ?? d3.max(chartData, (d) => d.y) ?? 1
+			const zMin = zAxisConfig.min ?? d3.min(chartData, (d) => d.z) ?? 0
+			const zMax = zAxisConfig.max ?? d3.max(chartData, (d) => d.z) ?? 1
+
+			const scaleX = d3.scaleLinear().domain([xMin, xMax]).range([0, CUBE])
+			const scaleY = d3.scaleLinear().domain([yMin, yMax]).range([0, CUBE])
+			const scaleZ = d3.scaleLinear().domain([zMin, zMax]).range([0, CUBE])
+
+			let scene: THREE.Scene
+			let camera: THREE.PerspectiveCamera
+			let renderer: THREE.WebGLRenderer
+			let controls: OrbitControls
+			let pointsGroup: THREE.Group
+			let raycaster: THREE.Raycaster
+			let mouse: THREE.Vector2
+			let hoveredMesh: THREE.Mesh | null = null
+
+			const DEFAULT_EYE = new THREE.Vector3(CUBE * 0.5, CUBE * 0.6, CUBE * 2.5)
+			const CENTER = new THREE.Vector3(CUBE / 2, CUBE / 2, CUBE / 2)
+
+			function makeLabel(
+				text: string,
+				position: THREE.Vector3,
+				colorHex: number,
+				scaleW = 0.28,
+				scaleH = 0.1,
+				fontPx = 28,
+			) {
+				const canvas = document.createElement('canvas')
+				canvas.width = 256
+				canvas.height = 64
+				const ctx = canvas.getContext('2d')!
+				ctx.clearRect(0, 0, 256, 64)
+				ctx.fillStyle = `#${colorHex.toString(16).padStart(6, '0')}`
+				ctx.font = `${fontPx}px monospace`
+				ctx.textAlign = 'center'
+				ctx.textBaseline = 'middle'
+				ctx.fillText(text, 128, 32)
+				const texture = new THREE.CanvasTexture(canvas)
+				texture.needsUpdate = true
+				const mat = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false })
+				const sprite = new THREE.Sprite(mat)
+				sprite.position.copy(position)
+				sprite.scale.set(scaleW, scaleH, 1)
+				return sprite
 			}
-			const geo = new THREE.BufferGeometry().setFromPoints(points)
-			const mat = new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.35 })
-			return new THREE.LineSegments(geo, mat)
-		}
-
-		function initChart() {
-			container.innerHTML = ''
-			const isDark = document.documentElement.classList.contains('dark')
-			const textColor = isDark ? 0xd4d4d8 : 0x52525b
-			const gridColor = isDark ? 0x3f3f46 : 0xdde1e7
-			const axisColor = isDark ? 0x71717a : 0x94a3b8
-			const faceColor = isDark ? 0x18181b : 0xf1f5f9
-			const bgCss = isDark ? '#0c0c0e' : '#f8fafc'
-
-			if (chartTitle) {
-				const titleEl = document.createElement('div')
-				titleEl.textContent = chartTitle
-				titleEl.style.cssText = `
+
+			function makeFaceGrid(
+				origin: THREE.Vector3,
+				uDir: THREE.Vector3,
+				vDir: THREE.Vector3,
+				divisions: number,
+				color: number,
+			) {
+				const points: THREE.Vector3[] = []
+				for (let i = 0; i <= divisions; i++) {
+					const t = (i / divisions) * CUBE
+					points.push(origin.clone().addScaledVector(vDir, t))
+					points.push(origin.clone().addScaledVector(uDir, CUBE).addScaledVector(vDir, t))
+					points.push(origin.clone().addScaledVector(uDir, t))
+					points.push(origin.clone().addScaledVector(uDir, t).addScaledVector(vDir, CUBE))
+				}
+				const geo = new THREE.BufferGeometry().setFromPoints(points)
+				const mat = new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.35 })
+				return new THREE.LineSegments(geo, mat)
+			}
+
+			function initChart() {
+				container.innerHTML = ''
+				const isDark = document.documentElement.classList.contains('dark')
+				const textColor = isDark ? 0xd4d4d8 : 0x52525b
+				const gridColor = isDark ? 0x3f3f46 : 0xdde1e7
+				const axisColor = isDark ? 0x71717a : 0x94a3b8
+				const faceColor = isDark ? 0x18181b : 0xf1f5f9
+				const bgCss = isDark ? '#0c0c0e' : '#f8fafc'
+
+				if (chartTitle) {
+					const titleEl = document.createElement('div')
+					titleEl.textContent = chartTitle
+					titleEl.style.cssText = `
 					font-size: 15px; font-weight: 600; text-align: center;
 					color: ${isDark ? '#e4e4e7' : '#27272a'}; margin-bottom: 4px;
 				`
-				container.prepend(titleEl)
-			}
-
-			const width = container.clientWidth
-			const h = chartHeight
-
-			scene = new THREE.Scene()
-
-			scene.add(new THREE.AmbientLight(0xffffff, 0.7))
-			const dLight = new THREE.DirectionalLight(0xffffff, 0.9)
-			dLight.position.set(3, 5, 3)
-			scene.add(dLight)
-			const dLight2 = new THREE.DirectionalLight(0xffffff, 0.25)
-			dLight2.position.set(-2, -1, -2)
-			scene.add(dLight2)
-
-			camera = new THREE.PerspectiveCamera(40, width / h, 0.01, 200)
-			camera.position.copy(DEFAULT_EYE)
-			camera.lookAt(CENTER)
-
-			renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
-			renderer.setSize(width, h)
-			renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-			renderer.setClearColor(0x000000, 0)
-			renderer.domElement.style.cssText = `position:absolute;top:0;left:0;z-index:1;border-radius:8px;`
-			container.style.position = 'relative'
-			container.appendChild(renderer.domElement)
-
-			const tooltip = createTooltip(container)
-
-			controls = new OrbitControls(camera, renderer.domElement)
-			controls.enableDamping = true
-			controls.dampingFactor = 0.06
-			controls.rotateSpeed = 0.7
-			controls.zoomSpeed = 1.2
-			controls.minDistance = CUBE * 0.5
-			controls.maxDistance = CUBE * 8
-			controls.target.copy(CENTER)
-			controls.update()
-
-			const corners = [
-				[0, 0, 0],
-				[CUBE, 0, 0],
-				[CUBE, CUBE, 0],
-				[0, CUBE, 0],
-				[0, 0, CUBE],
-				[CUBE, 0, CUBE],
-				[CUBE, CUBE, CUBE],
-				[0, CUBE, CUBE],
-			].map(([x, y, z]) => new THREE.Vector3(x, y, z))
-
-			const edgePairs = [
-				[0, 1],
-				[1, 2],
-				[2, 3],
-				[3, 0],
-				[4, 5],
-				[5, 6],
-				[6, 7],
-				[7, 4],
-				[0, 4],
-				[1, 5],
-				[2, 6],
-				[3, 7],
-			]
-			const edgePoints: THREE.Vector3[] = []
-			edgePairs.forEach(([a, b]) => {
-				edgePoints.push(corners[a], corners[b])
-			})
-			const edgeGeo = new THREE.BufferGeometry().setFromPoints(edgePoints)
-			const edgeMat = new THREE.LineBasicMaterial({ color: axisColor, transparent: true, opacity: 0.6 })
-			scene.add(new THREE.LineSegments(edgeGeo, edgeMat))
+					container.prepend(titleEl)
+				}
 
-			if (showGrid) {
-				const DIVS = 6
-				scene.add(
-					makeFaceGrid(
-						new THREE.Vector3(0, 0, 0),
-						new THREE.Vector3(1, 0, 0),
-						new THREE.Vector3(0, 0, 1),
-						DIVS,
-						gridColor,
-					),
-				)
-				scene.add(
-					makeFaceGrid(
-						new THREE.Vector3(0, 0, 0),
-						new THREE.Vector3(1, 0, 0),
-						new THREE.Vector3(0, 1, 0),
-						DIVS,
-						gridColor,
-					),
-				)
-				scene.add(
-					makeFaceGrid(
-						new THREE.Vector3(0, 0, 0),
-						new THREE.Vector3(0, 0, 1),
-						new THREE.Vector3(0, 1, 0),
-						DIVS,
-						gridColor,
-					),
-				)
-			}
+				const width = container.clientWidth
+				const h = chartHeight
+
+				scene = new THREE.Scene()
+
+				scene.add(new THREE.AmbientLight(0xffffff, 0.7))
+				const dLight = new THREE.DirectionalLight(0xffffff, 0.9)
+				dLight.position.set(3, 5, 3)
+				scene.add(dLight)
+				const dLight2 = new THREE.DirectionalLight(0xffffff, 0.25)
+				dLight2.position.set(-2, -1, -2)
+				scene.add(dLight2)
+
+				camera = new THREE.PerspectiveCamera(40, width / h, 0.01, 200)
+				camera.position.copy(DEFAULT_EYE)
+				camera.lookAt(CENTER)
+
+				renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+				renderer.setSize(width, h)
+				renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+				renderer.setClearColor(0x000000, 0)
+				renderer.domElement.style.cssText = `position:absolute;top:0;left:0;z-index:1;border-radius:8px;`
+				container.style.position = 'relative'
+				container.appendChild(renderer.domElement)
+
+				const tooltip = createTooltip(container)
+
+				controls = new OrbitControls(camera, renderer.domElement)
+				controls.enableDamping = true
+				controls.dampingFactor = 0.06
+				controls.rotateSpeed = 0.7
+				controls.zoomSpeed = 1.2
+				controls.minDistance = CUBE * 0.5
+				controls.maxDistance = CUBE * 8
+				controls.target.copy(CENTER)
+				controls.update()
 
-			const TICKS = 5
-			const tickOffset = CUBE * 0.02
+				const corners = [
+					[0, 0, 0],
+					[CUBE, 0, 0],
+					[CUBE, CUBE, 0],
+					[0, CUBE, 0],
+					[0, 0, CUBE],
+					[CUBE, 0, CUBE],
+					[CUBE, CUBE, CUBE],
+					[0, CUBE, CUBE],
+				].map(([x, y, z]) => new THREE.Vector3(x, y, z))
+
+				const edgePairs = [
+					[0, 1],
+					[1, 2],
+					[2, 3],
+					[3, 0],
+					[4, 5],
+					[5, 6],
+					[6, 7],
+					[7, 4],
+					[0, 4],
+					[1, 5],
+					[2, 6],
+					[3, 7],
+				]
+				const edgePoints: THREE.Vector3[] = []
+				edgePairs.forEach(([a, b]) => {
+					edgePoints.push(corners[a], corners[b])
+				})
+				const edgeGeo = new THREE.BufferGeometry().setFromPoints(edgePoints)
+				const edgeMat = new THREE.LineBasicMaterial({ color: axisColor, transparent: true, opacity: 0.6 })
+				scene.add(new THREE.LineSegments(edgeGeo, edgeMat))
+
+				if (showGrid) {
+					const DIVS = 6
+					scene.add(
+						makeFaceGrid(
+							new THREE.Vector3(0, 0, 0),
+							new THREE.Vector3(1, 0, 0),
+							new THREE.Vector3(0, 0, 1),
+							DIVS,
+							gridColor,
+						),
+					)
+					scene.add(
+						makeFaceGrid(
+							new THREE.Vector3(0, 0, 0),
+							new THREE.Vector3(1, 0, 0),
+							new THREE.Vector3(0, 1, 0),
+							DIVS,
+							gridColor,
+						),
+					)
+					scene.add(
+						makeFaceGrid(
+							new THREE.Vector3(0, 0, 0),
+							new THREE.Vector3(0, 0, 1),
+							new THREE.Vector3(0, 1, 0),
+							DIVS,
+							gridColor,
+						),
+					)
+				}
 
-			for (let i = 0; i <= TICKS; i++) {
-				const t = i / TICKS
-				const xVal = xMin + t * (xMax - xMin)
-				const yVal = yMin + t * (yMax - yMin)
-				const zVal = zMin + t * (zMax - zMin)
-				const xW = t * CUBE
-				const yW = t * CUBE
-				const zW = t * CUBE
+				const TICKS = 5
+				const tickOffset = CUBE * 0.02
+
+				for (let i = 0; i <= TICKS; i++) {
+					const t = i / TICKS
+					const xVal = xMin + t * (xMax - xMin)
+					const yVal = yMin + t * (yMax - yMin)
+					const zVal = zMin + t * (zMax - zMin)
+					const xW = t * CUBE
+					const yW = t * CUBE
+					const zW = t * CUBE
+
+					scene.add(
+						makeLabel(
+							xVal.toFixed(1),
+							new THREE.Vector3(xW, -tickOffset, CUBE + tickOffset),
+							textColor,
+							0.2,
+							0.08,
+							24,
+						),
+					)
+					scene.add(
+						makeLabel(
+							yVal.toFixed(1),
+							new THREE.Vector3(-tickOffset * 1.5, yW, CUBE + tickOffset),
+							textColor,
+							0.2,
+							0.08,
+							24,
+						),
+					)
+					scene.add(
+						makeLabel(
+							zVal.toFixed(1),
+							new THREE.Vector3(-tickOffset * 1.5, -tickOffset, zW),
+							textColor,
+							0.2,
+							0.08,
+							24,
+						),
+					)
+				}
 
+				const xLabel = xAxisConfig.label || 'X'
+				const yLabel = yAxisConfig.label || 'Y'
+				const zLabel = zAxisConfig.label || 'Z'
 				scene.add(
 					makeLabel(
-						xVal.toFixed(1),
-						new THREE.Vector3(xW, -tickOffset, CUBE + tickOffset),
+						xLabel,
+						new THREE.Vector3(CUBE / 2, -tickOffset * 2.5, CUBE + tickOffset * 2),
 						textColor,
-						0.2,
-						0.08,
-						24,
+						0.3,
+						0.1,
+						30,
 					),
 				)
 				scene.add(
 					makeLabel(
-						yVal.toFixed(1),
-						new THREE.Vector3(-tickOffset * 1.5, yW, CUBE + tickOffset),
+						yLabel,
+						new THREE.Vector3(-tickOffset * 3, CUBE / 2, CUBE + tickOffset * 2),
 						textColor,
-						0.2,
-						0.08,
-						24,
+						0.3,
+						0.1,
+						30,
 					),
 				)
 				scene.add(
 					makeLabel(
-						zVal.toFixed(1),
-						new THREE.Vector3(-tickOffset * 1.5, -tickOffset, zW),
+						zLabel,
+						new THREE.Vector3(-tickOffset * 3, -tickOffset * 2.5, CUBE / 2),
 						textColor,
-						0.2,
-						0.08,
-						24,
+						0.3,
+						0.1,
+						30,
 					),
 				)
-			}
 
-			const xLabel = xAxisConfig.label || 'X'
-			const yLabel = yAxisConfig.label || 'Y'
-			const zLabel = zAxisConfig.label || 'Z'
-			scene.add(
-				makeLabel(
-					xLabel,
-					new THREE.Vector3(CUBE / 2, -tickOffset * 2.5, CUBE + tickOffset * 2),
-					textColor,
-					0.3,
-					0.1,
-					30,
-				),
-			)
-			scene.add(
-				makeLabel(
-					yLabel,
-					new THREE.Vector3(-tickOffset * 3, CUBE / 2, CUBE + tickOffset * 2),
-					textColor,
-					0.3,
-					0.1,
-					30,
-				),
-			)
-			scene.add(
-				makeLabel(
-					zLabel,
-					new THREE.Vector3(-tickOffset * 3, -tickOffset * 2.5, CUBE / 2),
-					textColor,
-					0.3,
-					0.1,
-					30,
-				),
-			)
-
-			pointsGroup = new THREE.Group()
-			const sphereGeo = new THREE.SphereGeometry(pointSize * 0.005, 20, 20)
-
-			chartData.forEach((d, i) => {
-				const color = new THREE.Color(d.color || getColor(i, colors))
-				const mat = new THREE.MeshStandardMaterial({
-					color,
-					transparent: pointOpacity < 1,
-					opacity: pointOpacity,
-					roughness: 0.35,
-					metalness: 0.15,
+				pointsGroup = new THREE.Group()
+				const sphereGeo = new THREE.SphereGeometry(pointSize * 0.005, 20, 20)
+
+				chartData.forEach((d, i) => {
+					const color = new THREE.Color(d.color || getColor(i, colors))
+					const mat = new THREE.MeshStandardMaterial({
+						color,
+						transparent: pointOpacity < 1,
+						opacity: pointOpacity,
+						roughness: 0.35,
+						metalness: 0.15,
+					})
+					const mesh = new THREE.Mesh(sphereGeo, mat)
+					mesh.position.set(scaleX(d.x), scaleY(d.y), scaleZ(d.z))
+					mesh.userData = { index: i, originalColor: color.clone() }
+					pointsGroup.add(mesh)
 				})
-				const mesh = new THREE.Mesh(sphereGeo, mat)
-				mesh.position.set(scaleX(d.x), scaleY(d.y), scaleZ(d.z))
-				mesh.userData = { index: i, originalColor: color.clone() }
-				pointsGroup.add(mesh)
-			})
-			scene.add(pointsGroup)
-
-			if (animated) {
-				pointsGroup.scale.setScalar(0)
-				const t0 = performance.now()
-				const dur = 700
-				function animateIn() {
-					const p = Math.min((performance.now() - t0) / dur, 1)
-					pointsGroup.scale.setScalar(1 - Math.pow(1 - p, 3))
-					if (p < 1) requestAnimationFrame(animateIn)
+				scene.add(pointsGroup)
+
+				if (animated) {
+					pointsGroup.scale.setScalar(0)
+					const t0 = performance.now()
+					const dur = 700
+					function animateIn() {
+						const p = Math.min((performance.now() - t0) / dur, 1)
+						pointsGroup.scale.setScalar(1 - Math.pow(1 - p, 3))
+						if (p < 1) requestAnimationFrame(animateIn)
+					}
+					animateIn()
 				}
-				animateIn()
-			}
 
-			wrapper.querySelectorAll('.chart-btn').forEach((btn) => {
-				btn.addEventListener('click', () => {
-					if ((btn as HTMLElement).classList.contains('zoom-in')) {
-						controls.dollyIn(1.4)
-					} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
-						controls.dollyOut(1.4)
-					} else {
-						// Smooth reset
-						const resetStart = performance.now()
-						const fromPos = camera.position.clone()
-						const toPos = DEFAULT_EYE.clone()
-						function resetAnim() {
-							const p = Math.min((performance.now() - resetStart) / 400, 1)
-							const e = 1 - Math.pow(1 - p, 3)
-							camera.position.lerpVectors(fromPos, toPos, e)
-							controls.target.copy(CENTER)
-							controls.update()
-							if (p < 1) requestAnimationFrame(resetAnim)
+				wrapper.querySelectorAll('.chart-btn').forEach((btn) => {
+					btn.addEventListener('click', () => {
+						if ((btn as HTMLElement).classList.contains('zoom-in')) {
+							controls.dollyIn(1.4)
+						} else if ((btn as HTMLElement).classList.contains('zoom-out')) {
+							controls.dollyOut(1.4)
+						} else {
+							// Smooth reset
+							const resetStart = performance.now()
+							const fromPos = camera.position.clone()
+							const toPos = DEFAULT_EYE.clone()
+							function resetAnim() {
+								const p = Math.min((performance.now() - resetStart) / 400, 1)
+								const e = 1 - Math.pow(1 - p, 3)
+								camera.position.lerpVectors(fromPos, toPos, e)
+								controls.target.copy(CENTER)
+								controls.update()
+								if (p < 1) requestAnimationFrame(resetAnim)
+							}
+							resetAnim()
 						}
-						resetAnim()
-					}
+					})
 				})
-			})
-
-			raycaster = new THREE.Raycaster()
-			raycaster.params.Points = { threshold: 0.02 }
-			mouse = new THREE.Vector2()
-
-			renderer.domElement.addEventListener('mousemove', (e: MouseEvent) => {
-				const rect = renderer.domElement.getBoundingClientRect()
-				mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1
-				mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1
 
-				raycaster.setFromCamera(mouse, camera)
-				const hits = raycaster.intersectObjects(pointsGroup.children, false)
+				raycaster = new THREE.Raycaster()
+				raycaster.params.Points = { threshold: 0.02 }
+				mouse = new THREE.Vector2()
+
+				renderer.domElement.addEventListener('mousemove', (e: MouseEvent) => {
+					const rect = renderer.domElement.getBoundingClientRect()
+					mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1
+					mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1
+
+					raycaster.setFromCamera(mouse, camera)
+					const hits = raycaster.intersectObjects(pointsGroup.children, false)
+
+					if (hoveredMesh && (!hits.length || hits[0].object !== hoveredMesh)) {
+						;(hoveredMesh.material as THREE.MeshStandardMaterial).color.copy(
+							hoveredMesh.userData.originalColor,
+						)
+						;(hoveredMesh.material as THREE.MeshStandardMaterial).emissive.set(0x000000)
+						hoveredMesh = null
+						hideTooltip(tooltip)
+					}
 
-				if (hoveredMesh && (!hits.length || hits[0].object !== hoveredMesh)) {
-					;(hoveredMesh.material as THREE.MeshStandardMaterial).color.copy(hoveredMesh.userData.originalColor)
-					;(hoveredMesh.material as THREE.MeshStandardMaterial).emissive.set(0x000000)
-					hoveredMesh = null
-					hideTooltip(tooltip)
-				}
+					renderer.domElement.style.cursor = hits.length ? 'pointer' : 'grab'
 
-				renderer.domElement.style.cursor = hits.length ? 'pointer' : 'grab'
+					if (hits.length) {
+						const mesh = hits[0].object as THREE.Mesh
+						if (mesh !== hoveredMesh) {
+							hoveredMesh = mesh
+							;(mesh.material as THREE.MeshStandardMaterial).color.set(0xffffff)
+							;(mesh.material as THREE.MeshStandardMaterial).emissive.set(0x444444)
+						}
+						const d = chartData[mesh.userData.index]
+						const lbl = d.label ? `<strong>${d.label}</strong><br/>` : ''
+						showTooltip(
+							tooltip,
+							e.offsetX,
+							e.offsetY,
+							`${lbl}x: ${d.x.toFixed(2)}<br/>y: ${d.y.toFixed(2)}<br/>z: ${d.z.toFixed(2)}`,
+							container.getBoundingClientRect(),
+						)
+					}
+				})
 
-				if (hits.length) {
-					const mesh = hits[0].object as THREE.Mesh
-					if (mesh !== hoveredMesh) {
-						hoveredMesh = mesh
-						;(mesh.material as THREE.MeshStandardMaterial).color.set(0xffffff)
-						;(mesh.material as THREE.MeshStandardMaterial).emissive.set(0x444444)
+				renderer.domElement.addEventListener('click', (e: MouseEvent) => {
+					const rect = renderer.domElement.getBoundingClientRect()
+					mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1
+					mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1
+					raycaster.setFromCamera(mouse, camera)
+					const hits = raycaster.intersectObjects(pointsGroup.children, false)
+					if (hits.length) {
+						const d = chartData[(hits[0].object as THREE.Mesh).userData.index]
+						container.dispatchEvent(
+							new CustomEvent('chart:click', {
+								bubbles: true,
+								detail: { type: 'scatter3d', x: d.x, y: d.y, z: d.z, label: d.label },
+							}),
+						)
 					}
-					const d = chartData[mesh.userData.index]
-					const lbl = d.label ? `<strong>${d.label}</strong><br/>` : ''
-					showTooltip(
-						tooltip,
-						e.offsetX,
-						e.offsetY,
-						`${lbl}x: ${d.x.toFixed(2)}<br/>y: ${d.y.toFixed(2)}<br/>z: ${d.z.toFixed(2)}`,
-						container.getBoundingClientRect(),
-					)
-				}
-			})
+				})
 
-			renderer.domElement.addEventListener('click', (e: MouseEvent) => {
-				const rect = renderer.domElement.getBoundingClientRect()
-				mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1
-				mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1
-				raycaster.setFromCamera(mouse, camera)
-				const hits = raycaster.intersectObjects(pointsGroup.children, false)
-				if (hits.length) {
-					const d = chartData[(hits[0].object as THREE.Mesh).userData.index]
-					container.dispatchEvent(
-						new CustomEvent('chart:click', {
-							bubbles: true,
-							detail: { type: 'scatter3d', x: d.x, y: d.y, z: d.z, label: d.label },
-						}),
-					)
+				let rafId: number
+				function animate() {
+					rafId = requestAnimationFrame(animate)
+					controls.update()
+					renderer.render(scene, camera)
+				}
+				animate()
+				;(container as any).__cleanup = () => {
+					cancelAnimationFrame(rafId)
+					renderer.dispose()
 				}
+			}
+
+			const resizeObs = new ResizeObserver(() => {
+				if (!renderer || !camera) return
+				const w = container.clientWidth
+				camera.aspect = w / chartHeight
+				camera.updateProjectionMatrix()
+				renderer.setSize(w, chartHeight)
 			})
+			resizeObs.observe(container)
 
-			let rafId: number
-			function animate() {
-				rafId = requestAnimationFrame(animate)
-				controls.update()
-				renderer.render(scene, camera)
-			}
-			animate()
-			;(container as any).__cleanup = () => {
-				cancelAnimationFrame(rafId)
-				renderer.dispose()
-			}
-		}
-
-		const resizeObs = new ResizeObserver(() => {
-			if (!renderer || !camera) return
-			const w = container.clientWidth
-			camera.aspect = w / chartHeight
-			camera.updateProjectionMatrix()
-			renderer.setSize(w, chartHeight)
+			initChart()
 		})
-		resizeObs.observe(container)
+	}
 
-		initChart()
-	})
+	onHydration(initScatter3DCharts)
 </script>
diff --git a/src/utils/hydration.ts b/src/utils/hydration.ts
new file mode 100644
index 0000000..bc1b50f
--- /dev/null
+++ b/src/utils/hydration.ts
@@ -0,0 +1,4 @@
+export function onHydration(init: () => void): void {
+	init()
+	document.addEventListener('astro:after-swap', init)
+}