From 2624cb3d358d4dcc4c9a791b59e2bc6abdf56445 Mon Sep 17 00:00:00 2001
From: Mario Hros <966992+k3a@users.noreply.github.com>
Date: Fri, 22 Sep 2023 17:13:02 +0200
Subject: [PATCH] Handle clicking on a timeline history graph row to display
 more info for the displayed entity

---
 .../chart/state-history-chart-timeline.ts           | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 8f53e0d144a0..6ddcf1489544 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -1,4 +1,5 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import { getRelativePosition } from "chart.js/helpers";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -220,6 +221,18 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        const chart = e.chart;
+        const canvasPosition = getRelativePosition(e, chart);
+
+        const index = Math.abs(
+          chart.scales.y.getValueForPixel(canvasPosition.y)
+        );
+        fireEvent(this, "hass-more-info", {
+          // @ts-ignore
+          entityId: this._chartData?.datasets[index]?.label,
+        });
+      },
     };
   }