Fix touch control of chart zoom (#23302)

* Fix touch control of chart zoom * fix
home-assistant · Dec 16, 2024 · 7370d1e · 7370d1e
1 parent da7d3e1
commit 7370d1e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -113,7 +113,7 @@ export class StateHistoryChartLine extends LitElement {
               },
             },
             min: this.startTime,
-            suggestedMax: this.endTime,
+            max: this.endTime,
             ticks: {
               maxRotation: 0,
               sampleSize: 5,