diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 9917662..3cd73ce 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -65,7 +65,9 @@
           <div id="chart-legend" class="flex gap-3 text-xs text-gray-500"></div>
         </div>
         <div id="latency-chart" class="relative h-48 w-full" style="cursor:crosshair">
-          <canvas id="chart-canvas" class="w-full h-full"></canvas>
+          <!-- SSR SVG chart (works without JS, replaced by canvas when JS loads) -->
+          <div id="chart-ssr" class="w-full h-full"><%~ it.latencyChartSSR(chartPings) %></div>
+          <canvas id="chart-canvas" class="w-full h-full hidden"></canvas>
           <div id="chart-tooltip" class="absolute hidden bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-xs pointer-events-none z-10 shadow-lg" style="min-width:140px"></div>
           <div id="chart-crosshair" class="absolute top-0 bottom-0 w-px bg-gray-600/50 pointer-events-none hidden"></div>
           <span id="chart-ymax" class="absolute top-1 left-2 text-gray-600 text-xs pointer-events-none"></span>
@@ -214,6 +216,10 @@
 
     function renderChart() {
       const canvas = document.getElementById('chart-canvas');
+      // Replace SSR chart with interactive canvas
+      const ssrChart = document.getElementById('chart-ssr');
+      if (ssrChart) ssrChart.classList.add('hidden');
+      canvas.classList.remove('hidden');
       const container = canvas.parentElement;
       const dpr = window.devicePixelRatio || 1;
       const rect = container.getBoundingClientRect();