Improve graph tooltips (#15887

* Improve graph tooltips

* Use xy for state charts

* intersect, bigger hitRadius

* improve energy

* fix position tooltips

src/components/chart/ha-chart-base.ts

@@ -302,6 +302,7 @@ export default class HaChartBase extends LitElement {
     return css`
       :host {
         display: block;
+        position: relative;
       }
       .chartContainer {
         overflow: hidden;

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

@@ -61,6 +61,10 @@ class StateHistoryChartLine extends LitElement {
       this._chartOptions = {
         parsing: false,
         animation: false,
+        interaction: {
+          mode: "nearest",
+          axis: "x",
+        },
         scales: {
           x: {
             type: "time",
@@ -108,7 +112,6 @@ class StateHistoryChartLine extends LitElement {
         },
         plugins: {
           tooltip: {
-            mode: "nearest",
             callbacks: {
               label: (context) =>
                 `${context.dataset.label}: ${formatNumber(
@@ -127,16 +130,13 @@ class StateHistoryChartLine extends LitElement {
             },
           },
         },
-        hover: {
-          mode: "nearest",
-        },
         elements: {
           line: {
             tension: 0.1,
             borderWidth: 1.5,
           },
           point: {
-            hitRadius: 5,
+            hitRadius: 50,
           },
         },
         // @ts-expect-error

src/components/chart/statistics-chart.ts

@@ -102,6 +102,7 @@ class StatisticsChart extends LitElement {
     if (
       changedProps.has("statisticsData") ||
       changedProps.has("statTypes") ||
+      changedProps.has("chartType") ||
       changedProps.has("hideLegend")
     ) {
       this._generateData();
@@ -149,6 +150,10 @@ class StatisticsChart extends LitElement {
     this._chartOptions = {
       parsing: false,
       animation: false,
+      interaction: {
+        mode: "nearest",
+        axis: "x",
+      },
       scales: {
         x: {
           type: "time",
@@ -186,7 +191,6 @@ class StatisticsChart extends LitElement {
       },
       plugins: {
         tooltip: {
-          mode: "nearest",
           callbacks: {
             label: (context) =>
               `${context.dataset.label}: ${formatNumber(
@@ -208,9 +212,6 @@ class StatisticsChart extends LitElement {
           },
         },
       },
-      hover: {
-        mode: "nearest",
-      },
       elements: {
         line: {
           tension: 0.4,
@@ -219,7 +220,7 @@ class StatisticsChart extends LitElement {
         },
         bar: { borderWidth: 1.5, borderRadius: 4 },
         point: {
-          hitRadius: 5,
+          hitRadius: 50,
         },
       },
       // @ts-expect-error
@@ -316,6 +317,7 @@ class StatisticsChart extends LitElement {
         }
         statDataSets.forEach((d, i) => {
           if (
+            this.chartType === "line" &&
             prevEndTime &&
             prevValues &&
             prevEndTime.getTime() !== start.getTime()

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -157,6 +157,9 @@ export class HuiEnergyGasGraphCard
       const options: ChartOptions = {
         parsing: false,
         animation: false,
+        interaction: {
+          mode: "x",
+        },
         scales: {
           x: {
             type: "time",
@@ -171,9 +174,6 @@ export class HuiEnergyGasGraphCard
               maxRotation: 0,
               sampleSize: 5,
               autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
               font: (context) =>
                 context.tick && context.tick.major
                   ? ({ weight: "bold" } as any)
@@ -213,7 +213,7 @@ export class HuiEnergyGasGraphCard
         },
         plugins: {
           tooltip: {
-            mode: "nearest",
+            position: "nearest",
             callbacks: {
               title: (datasets) => {
                 if (dayDifference > 0) {
@@ -244,13 +244,10 @@ export class HuiEnergyGasGraphCard
             },
           },
         },
-        hover: {
-          mode: "nearest",
-        },
         elements: {
           bar: { borderWidth: 1.5, borderRadius: 4 },
           point: {
-            hitRadius: 5,
+            hitRadius: 50,
           },
         },
         // @ts-expect-error

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -154,6 +154,9 @@ export class HuiEnergySolarGraphCard
       const options: ChartOptions = {
         parsing: false,
         animation: false,
+        interaction: {
+          mode: "x",
+        },
         scales: {
           x: {
             type: "time",
@@ -168,9 +171,6 @@ export class HuiEnergySolarGraphCard
               maxRotation: 0,
               sampleSize: 5,
               autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
               font: (context) =>
                 context.tick && context.tick.major
                   ? ({ weight: "bold" } as any)
@@ -209,7 +209,7 @@ export class HuiEnergySolarGraphCard
         },
         plugins: {
           tooltip: {
-            mode: "nearest",
+            position: "nearest",
             callbacks: {
               title: (datasets) => {
                 if (dayDifference > 0) {
@@ -240,9 +240,6 @@ export class HuiEnergySolarGraphCard
             },
           },
         },
-        hover: {
-          mode: "nearest",
-        },
         elements: {
           line: {
             tension: 0.3,

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -148,6 +148,9 @@ export class HuiEnergyUsageGraphCard
       const options: ChartOptions = {
         parsing: false,
         animation: false,
+        interaction: {
+          mode: "x",
+        },
         scales: {
           x: {
             type: "time",
@@ -162,9 +165,6 @@ export class HuiEnergyUsageGraphCard
               maxRotation: 0,
               sampleSize: 5,
               autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
               font: (context) =>
                 context.tick && context.tick.major
                   ? ({ weight: "bold" } as any)
@@ -204,8 +204,6 @@ export class HuiEnergyUsageGraphCard
         },
         plugins: {
           tooltip: {
-            mode: "x",
-            intersect: true,
             position: "nearest",
             filter: (val) => val.formattedValue !== "0",
             callbacks: {
@@ -265,13 +263,10 @@ export class HuiEnergyUsageGraphCard
             },
           },
         },
-        hover: {
-          mode: "nearest",
-        },
         elements: {
           bar: { borderWidth: 1.5, borderRadius: 4 },
           point: {
-            hitRadius: 5,
+            hitRadius: 50,
           },
         },
         // @ts-expect-error

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -157,6 +157,9 @@ export class HuiEnergyWaterGraphCard
       const options: ChartOptions = {
         parsing: false,
         animation: false,
+        interaction: {
+          mode: "x",
+        },
         scales: {
           x: {
             type: "time",
@@ -171,9 +174,6 @@ export class HuiEnergyWaterGraphCard
               maxRotation: 0,
               sampleSize: 5,
               autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
               font: (context) =>
                 context.tick && context.tick.major
                   ? ({ weight: "bold" } as any)
@@ -213,7 +213,7 @@ export class HuiEnergyWaterGraphCard
         },
         plugins: {
           tooltip: {
-            mode: "nearest",
+            position: "nearest",
             callbacks: {
               title: (datasets) => {
                 if (dayDifference > 0) {
@@ -244,13 +244,10 @@ export class HuiEnergyWaterGraphCard
             },
           },
         },
-        hover: {
-          mode: "nearest",
-        },
         elements: {
           bar: { borderWidth: 1.5, borderRadius: 4 },
           point: {
-            hitRadius: 5,
+            hitRadius: 50,
           },
         },
         // @ts-expect-error