diff --git a/src/app.js b/src/app.js
index 307849f..d243ee6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1341,10 +1341,18 @@
return { today, yesterday, avg, avgDays, projected };
}
+ // Trend-specific y-axis: 1-hour gridlines (vs the bar charts' 2-hour steps)
+ // so nearby curves separate visually; still capped at 24h.
+ function niceAxisTrendHours(rawMax) {
+ if (!(rawMax > 0)) return { yMax: 2, steps: 2 };
+ const m = Math.min(24, Math.max(2, Math.ceil(rawMax)));
+ return { yMax: m, steps: m };
+ }
+
function drawSleepTrendChart(curves) {
const svg = document.getElementById("chart-sleep-trend");
if (!svg) return;
- const W = 320, H = 160;
+ const W = 320, H = 220;
const ML = 26, MR = 8, MT = 10, MB = 22;
const innerW = W - ML - MR;
const innerH = H - MT - MB;
@@ -1358,18 +1366,22 @@
].filter(s => s.pts && s.pts.length > 1);
const rawMax = Math.max(...series.flatMap(s => s.pts.map(p => p.y)));
- const { yMax, steps: ySteps } = niceAxisSleepHours(rawMax);
+ const { yMax, steps: ySteps } = niceAxisTrendHours(rawMax);
const xOf = (hour) => ML + (hour / 24) * innerW;
const yOf = (v) => MT + innerH * (1 - v / yMax);
+ // Every gridline gets a label unless that would crowd the 9px text.
+ const labelEvery = ySteps > 16 ? 2 : 1;
const parts = [];
for (let i = 0; i <= ySteps; i++) {
const y = MT + innerH * (1 - i / ySteps);
const v = Math.round(yMax * i / ySteps * 10) / 10;
const vText = v % 1 === 0 ? v : v.toFixed(1);
parts.push(``);
- parts.push(`${vText}h`);
+ if (i % labelEvery === 0) {
+ parts.push(`${vText}h`);
+ }
}
for (const hr of [0, 6, 12, 18, 24]) {
const x = xOf(hr);
diff --git a/src/changelog.json b/src/changelog.json
index 77b355d..7936d35 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
[
+ { "date": "2026-07-15", "text": "The Sleep trend chart is taller with 1-hour gridlines, so nearby lines are easier to tell apart" },
{ "date": "2026-07-15", "text": "The Sleep trend legend shows the hours for each line — Today, Yesterday and the average, next to the projection" },
{ "date": "2026-07-15", "text": "The Sleep trend chart projects where today will land by midnight — a dashed tail continues today's line following the average day's rhythm" },
{ "date": "2026-07-15", "text": "The charts highlight the selected day, so it's easy to spot which bars, rows and cells you're looking at" },
diff --git a/src/index.html b/src/index.html
index 497a900..7dd6627 100644
--- a/src/index.html
+++ b/src/index.html
@@ -222,7 +222,7 @@
Sleep trend
-
+
Today
Projected