Timeline history graph - react to click to display entity more info

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";
@@ -32,6 +33,8 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ type: Boolean }) public inMoreInfo = false;
+
   @property({ type: Boolean }) public chunked = false;
 
   @property({ attribute: false }) public startTime!: Date;
@@ -220,6 +223,22 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (this.inMoreInfo) {
+          return;
+        }
+
+        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,
+        });
+      },
     };
   }
 

src/components/chart/state-history-charts.ts

@@ -69,6 +69,8 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ type: Boolean }) public inMoreInfo = false;
+
   @property({ type: Boolean }) public isLoadingData = false;
 
   @state() private _computedStartTime!: Date;
@@ -197,6 +199,7 @@ export class StateHistoryCharts extends LitElement {
         .chunked=${this.virtualize}
         .paddingYAxis=${this._maxYWidth}
         .chartIndex=${index}
+        .inMoreInfo=${this.inMoreInfo}
         @y-width-changed=${this._yWidthChanged}
       ></state-history-chart-timeline>
     </div> `;

src/dialogs/more-info/ha-more-info-history.ts

@@ -99,6 +99,7 @@ export class MoreInfoHistory extends LitElement {
                 .historyData=${this._stateHistory}
                 .isLoadingData=${!this._stateHistory}
                 .showNames=${false}
+                inMoreInfo
               ></state-history-charts>`}`
       : ""}`;
   }