From 7370d1e0dd519c4b84e8bc46f441468e810c4683 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:03:32 +0200
Subject: [PATCH] Fix touch control of chart zoom (#23302)

* Fix touch control of chart zoom

* fix
---
 src/components/chart/ha-chart-base.ts           | 17 +++++++++++++++--
 .../chart/state-history-chart-line.ts           |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 06f7a52f36c0..2ad97fa04cab 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -67,6 +67,8 @@ export class HaChartBase extends LitElement {
 
   @state() private _showZoomHint = false;
 
+  @state() private _isZoomed = false;
+
   private _paddingUpdateCount = 0;
 
   private _paddingUpdateLock = false;
@@ -266,7 +268,11 @@ export class HaChartBase extends LitElement {
           })}
           @wheel=${this._handleChartScroll}
         >
-          <canvas></canvas>
+          <canvas
+            class=${classMap({
+              "not-zoomed": !this._isZoomed,
+            })}
+          ></canvas>
           <div
             class="zoom-hint ${classMap({
               visible: this._showZoomHint,
@@ -396,11 +402,14 @@ export class HaChartBase extends LitElement {
               modifierKey,
             },
             mode: "x",
+            onZoomComplete: () => {
+              this._isZoomed = this.chart?.isZoomedOrPanned() ?? false;
+            },
           },
           limits: {
             x: {
               min: "original",
-              max: "original",
+              max: (this.options?.scales?.x as any)?.max ?? "original",
             },
             y: {
               min: "original",
@@ -516,6 +525,10 @@ export class HaChartBase extends LitElement {
       canvas {
         max-height: var(--chart-max-height, 400px);
       }
+      canvas.not-zoomed {
+        /* allow scrolling if the chart is not zoomed */
+        touch-action: pan-y !important;
+      }
       .chartLegend {
         text-align: center;
       }
diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 395a4f1096f4..e2113b747863 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -113,7 +113,7 @@ export class StateHistoryChartLine extends LitElement {
               },
             },
             min: this.startTime,
-            suggestedMax: this.endTime,
+            max: this.endTime,
             ticks: {
               maxRotation: 0,
               sampleSize: 5,