diff --git a/src/app.js b/src/app.js
index 9d0be5e..41b30cc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -980,18 +980,16 @@
const gap = days.length > 14 ? 2 : 4;
const barW = (innerW - (days.length - 1) * gap) / days.length;
- // Every gridline gets a label unless that would crowd the 9px text
- // (this chart's plot area is shorter than the trend chart's).
- const labelEvery = ySteps > 12 ? 2 : 1;
+ // Label every 1h gridline; smaller text once the axis is dense so the
+ // labels stay apart (this chart's plot area is shorter than the trend's).
+ const yLabelCls = ySteps > 12 ? "y-dense" : "";
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(``);
- if (i % labelEvery === 0) {
- parts.push(`${vText}h`);
- }
+ parts.push(`${vText}h`);
}
const selYmd = ymd(selectedDay());
@@ -1368,17 +1366,16 @@
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;
+ // Label every 1h gridline; smaller text once the axis is dense so the
+ // labels stay apart.
+ const yLabelCls = ySteps > 16 ? "y-dense" : "";
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(``);
- if (i % labelEvery === 0) {
- parts.push(`${vText}h`);
- }
+ 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 fd5817d..61ea6b5 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
[
+ { "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" },
{ "date": "2026-07-15", "text": "The Sleep chart in the last-N-days card now has 1-hour gridlines too" },
{ "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" },
diff --git a/src/style.css b/src/style.css
index 659f9f8..29857b0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -597,6 +597,8 @@ dialog menu {
}
.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg text { fill: var(--muted); font-size: 9px; }
+/* Dense 1h y-axes: smaller labels so every gridline can carry one. */
+.chart-svg text.y-dense { font-size: 7px; }
.chart-svg .grid {
stroke: var(--border);
stroke-dasharray: 2 3;