Improve graph tooltips (#15887

* Improve graph tooltips * Use xy for state charts * intersect, bigger hitRadius * improve energy * fix position tooltips
2025-07-24 09:46:36 +00:00 · 2023-03-30 16:12:26 +02:00 · 2023-03-30 16:12:26 +02:00 · dcac853b71
commit dcac853b71
parent 0df096d68b
7 changed files with 31 additions and 42 deletions
--- a/src/components/chart/ha-chart-base.ts
+++ b/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;
--- a/src/components/chart/state-history-chart-line.ts
+++ b/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
--- a/src/components/chart/statistics-chart.ts
+++ b/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()
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/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
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/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,
--- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
+++ b/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
--- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
+++ b/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