diff --git a/cmd/ingestd/web/app.js b/cmd/ingestd/web/app.js
index 82770fd..553eab1 100644
--- a/cmd/ingestd/web/app.js
+++ b/cmd/ingestd/web/app.js
@@ -554,19 +554,26 @@ function renderDashboard(data) {
   const rainTitle = document.getElementById("chart-rain-title");
   const isHourly = state.range === "6h";
   if (rainTitle) {
-    rainTitle.textContent = isHourly ? "Rain (hourly sums)" : "Rain (24h rolling)";
+    rainTitle.textContent = isHourly ? "Rain (obs hourly vs forecast)" : "Rain (obs rolling 24h vs forecast)";
   }
 
   const rainChart = {
-    type: "line",
     data: {
       datasets: [
         {
-          label: isHourly ? "rain hourly sum (mm)" : "rain rolling 24h (mm)",
+          type: "line",
+          label: isHourly ? "obs hourly sum (mm)" : "obs rolling 24h (mm)",
           data: isHourly ? rainHourly : rainRolling,
           borderColor: colors.rain,
           yAxisID: "y",
         },
+        {
+          type: "bar",
+          label: "forecast precip (mm)",
+          data: series(forecast, "precip_mm"),
+          backgroundColor: colors.forecast,
+          yAxisID: "y",
+        },
       ],
     },
     options: rainOptions,
diff --git a/cmd/ingestd/web/index.html b/cmd/ingestd/web/index.html
index 0eecf39..184d9c9 100644
--- a/cmd/ingestd/web/index.html
+++ b/cmd/ingestd/web/index.html
@@ -148,7 +148,7 @@
           </div>
           <div class="chart-card" data-chart="chart-rain">
             <div class="chart-header">
-              <div class="chart-title" id="chart-rain-title">Rain (24h rolling)</div>
+              <div class="chart-title" id="chart-rain-title">Rain (obs vs forecast)</div>
               <button class="chart-link" data-chart="chart-rain" title="Copy chart link">Share</button>
             </div>
             <div class="chart-canvas">