diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
index 9c3cc406d3..6085f22e69 100644
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -21,7 +21,7 @@ import { LovelaceHeaderFooter, LovelaceHeaderFooterEditor } from "../types";
 import { GraphHeaderFooterConfig } from "./types";
 
 const MINUTE = 60000;
-const DAY = 86400000;
+const HOUR = MINUTE * 60;
 
 @customElement("hui-graph-header-footer")
 export class HuiGraphHeaderFooter extends LitElement
@@ -162,10 +162,24 @@ export class HuiGraphHeaderFooter extends LitElement
         : this._date;
 
     if (this._stateHistory!.length) {
-      this._stateHistory = this._stateHistory!.filter(
-        (entity) =>
-          endTime.getTime() - new Date(entity.last_changed).getTime() <= DAY
+      const inHoursToShow: HassEntity[] = [];
+      const outHoursToShow: HassEntity[] = [];
+      // Split into inside and outside of "hours to show".
+      this._stateHistory!.forEach((entity) =>
+        (endTime.getTime() - new Date(entity.last_changed).getTime() <=
+        this._config!.hours_to_show! * HOUR
+          ? inHoursToShow
+          : outHoursToShow
+        ).push(entity)
       );
+
+      if (outHoursToShow.length) {
+        // If we have values that are now outside of "hours to show", re-add the last entry. This could e.g. be
+        // the "initial state" from the history backend. Without it, it would look like there is no history data
+        // at the start at all in the database = graph would start suddenly instead of on the left side of the card.
+        inHoursToShow.push(outHoursToShow[outHoursToShow.length - 1]);
+      }
+      this._stateHistory = inHoursToShow;
     }
 
     const stateHistory = await fetchRecent(