From 6efe237639d6db3b8ae861d8513d2ad29bbace20 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 5 Feb 2025 12:47:39 +0100
Subject: [PATCH] Fix label truncated timeline chart (#24077)

---
 src/components/chart/state-history-chart-timeline.ts | 2 +-
 src/util/text.ts                                     | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 39a22c827c..89a59a7513 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -214,7 +214,7 @@ export class StateHistoryChartTimeline extends LitElement {
         },
         axisLabel: {
           show: showNames,
-          width: labelWidth - labelMargin,
+          width: labelWidth,
           overflow: "truncate",
           margin: labelMargin,
           formatter: (id: string) => {
diff --git a/src/util/text.ts b/src/util/text.ts
index b332c2ec0a..3615c0bc4d 100644
--- a/src/util/text.ts
+++ b/src/util/text.ts
@@ -21,5 +21,8 @@ export function measureTextWidth(
   }
 
   context.font = `${fontSize}px ${fontFamily}`;
-  return Math.ceil(context.measureText(text).width);
+  const textMetrics = context.measureText(text);
+  return Math.ceil(
+    textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft
+  );
 }