From 7c46d2d2f47e28551d9a40de136e3ae1061bcbff Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Mon, 28 Apr 2025 16:30:26 +0300
Subject: [PATCH] History tooltip RTL fix (#24917)

* History tooltip RTL fix

* Fix background color
---
 src/components/chart/ha-chart-base.ts                | 4 ++++
 src/components/chart/state-history-chart-line.ts     | 2 +-
 src/components/chart/state-history-chart-timeline.ts | 8 ++++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 5748378ed4..0fae4ecc53 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -590,6 +590,10 @@ export class HaChartBase extends LitElement {
           lineStyle: { color: style.getPropertyValue("--info-color") },
           crossStyle: { color: style.getPropertyValue("--info-color") },
         },
+        extraCssText:
+          "direction:" +
+          style.getPropertyValue("--direction") +
+          ";margin-inline-start:3px;margin-inline-end:8px;",
       },
       timeline: {},
     };
diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 2eb31f2cd1..2ad664e627 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -135,7 +135,7 @@ export class StateHistoryChartLine extends LitElement {
         seriesIndex: index,
         value: lastData,
         // HTML copied from echarts. May change based on options
-        marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
+        marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
       });
     });
     const unit = this.unit
diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 89a59a7513..34e5e1deb6 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -127,7 +127,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
     (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker, seriesName } = Array.isArray(params)
+      const { value, name, marker, seriesName, color } = Array.isArray(params)
         ? params[0]
         : params;
       const title = seriesName
@@ -138,8 +138,12 @@ export class StateHistoryChartTimeline extends LitElement {
         "ui.components.history_charts.duration"
       )}: ${millisecondsToDuration(durationInMs)}`;
 
+      const markerLocalized = !computeRTL(this.hass)
+        ? marker
+        : `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
+
       const lines = [
-        marker + name,
+        markerLocalized + name,
         formatDateTimeWithSeconds(
           new Date(value![1]),
           this.hass.locale,