diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 7d4b415..f61e5db 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -370,30 +370,36 @@
                         level: { type: 'linear', position: 'right', grid: { drawOnChartArea: false } },
                         x: { ticks: { maxTicksLimit: 12 } }
                     },
-                    plugins: [{
-                        id: 'flood-bands',
-                        beforeDraw(chart) {
-                            const levelScale = chart.scales?.level;
-                            if (!levelScale || levelScale.min == null) return;
-                            const zones = [
-                                { min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
-                                { min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
-                                { min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
-                            ];
-                            zones.forEach((z) => {
-                                const top = levelScale.getPixelForValue(Math.min(z.max, levelScale.max));
-                                const bottom = levelScale.getPixelForValue(Math.max(z.min, levelScale.min));
-                                if (bottom > top) {
-                                    const { ctx, chartArea } = chart;
-                                    ctx.save();
-                                    ctx.fillStyle = z.color;
-                                    ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top);
-                                    ctx.restore();
-                                }
-                            });
-                        }
-                    }]
-                }
+                    plugins: {
+                        legend: { display: true },
+                        floodBands: { enabled: true }
+                    }
+                },
+                plugins: [{
+                    id: 'floodBands',
+                    beforeDraw(chart, _args, pluginOptions) {
+                        if (!pluginOptions.enabled || !chart.chartArea) return;
+                        const levelScale = chart.scales?.level;
+                        if (!levelScale || !Number.isFinite(levelScale.min) || !Number.isFinite(levelScale.max)) return;
+                        const { ctx, chartArea } = chart;
+                        const zones = [
+                            { min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
+                            { min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
+                            { min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
+                        ];
+                        ctx.save();
+                        zones.forEach((z) => {
+                            const min = Math.max(z.min, levelScale.min);
+                            const max = Math.min(z.max, levelScale.max);
+                            if (max <= min) return;
+                            const top = levelScale.getPixelForValue(max);
+                            const bottom = levelScale.getPixelForValue(min);
+                            ctx.fillStyle = z.color;
+                            ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top);
+                        });
+                        ctx.restore();
+                    }
+                }]
             });
             $('history-status').textContent = rows.length ? `${rows.length} measurements (${sampled.length} daily) from PostgreSQL` : 'No PostgreSQL measurements in this period';
             $('history-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' });