From 020aab05846d148ed365ca0d9a5697b78333bd43 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Wed, 15 Mar 2023 04:29:45 -0700
Subject: [PATCH] Align charts when show_names: false (#15782)

* Align charts when show_names: false

* fixes per code review
---
 src/components/chart/state-history-chart-timeline.ts | 9 +++++++--
 src/components/chart/state-history-charts.ts         | 5 ++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index fd2dea5e0a..f255b014da 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -143,11 +143,16 @@ export class StateHistoryChartTimeline extends LitElement {
             }
           },
           afterUpdate: (y) => {
+            const yWidth = this.showNames
+              ? y.width ?? 0
+              : computeRTL(this.hass)
+              ? 0
+              : y.left ?? 0;
             if (
-              this._yWidth !== Math.floor(y.width) &&
+              this._yWidth !== Math.floor(yWidth) &&
               y.ticks.length === this.data.length
             ) {
-              this._yWidth = Math.floor(y.width);
+              this._yWidth = Math.floor(yWidth);
               fireEvent(this, "y-width-changed", {
                 value: this._yWidth,
                 chartIndex: this.chartIndex,
diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts
index 4e3e429219..4e7a0d429a 100644
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@@ -175,15 +175,14 @@ export class StateHistoryCharts extends LitElement {
     if (changedProps.has("_chartCount")) {
       if (this._chartCount < this._childYWidths.length) {
         this._childYWidths.length = this._chartCount;
-        this._maxYWidth =
-          this._childYWidths.length === 0 ? 0 : Math.max(...this._childYWidths);
+        this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
       }
     }
   }
 
   private _yWidthChanged(e: CustomEvent<HASSDomEvents["y-width-changed"]>) {
     this._childYWidths[e.detail.chartIndex] = e.detail.value;
-    this._maxYWidth = Math.max(...this._childYWidths);
+    this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
   }
 
   private _isHistoryEmpty(): boolean {