From daab88185d0a0ad5feb1d08e6d68d3f7d66ac228 Mon Sep 17 00:00:00 2001
From: mib1185 <mail@mib85.de>
Date: Fri, 29 Dec 2023 13:39:59 +0000
Subject: [PATCH] add clickForMoreInfo

---
 src/components/chart/statistics-chart.ts | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index a0fc6ca53ba5..12e2202cab92 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -16,6 +16,7 @@ import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -75,6 +76,8 @@ export class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property() public period?: string;
 
   @state() private _chartData: ChartData = { datasets: [] };
@@ -245,6 +248,28 @@ export class StatisticsChart extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (!this.clickForMoreInfo) {
+          return;
+        }
+
+        const chart = e.chart;
+
+        const points = chart.getElementsAtEventForMode(
+          e,
+          "nearest",
+          { intersect: true },
+          true
+        );
+
+        if (points.length) {
+          const firstPoint = points[0];
+          fireEvent(this, "hass-more-info", {
+            entityId: this._statisticIds[firstPoint.datasetIndex],
+          });
+          chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
+        }
+      },
     };
   }