diff --git a/src/data/energy.ts b/src/data/energy.ts
index b4fb94845e..68d18a8e43 100644
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@@ -248,6 +248,62 @@ export interface EnergyData {
   fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
 }
 
+export const getReferencedStatisticIds = (
+  prefs: EnergyPreferences,
+  info: EnergyInfo
+): string[] => {
+  const statIDs: string[] = [];
+
+  for (const source of prefs.energy_sources) {
+    if (source.type === "solar") {
+      statIDs.push(source.stat_energy_from);
+      continue;
+    }
+
+    if (source.type === "gas") {
+      statIDs.push(source.stat_energy_from);
+      if (source.stat_cost) {
+        statIDs.push(source.stat_cost);
+      }
+      const costStatId = info.cost_sensors[source.stat_energy_from];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+      continue;
+    }
+
+    if (source.type === "battery") {
+      statIDs.push(source.stat_energy_from);
+      statIDs.push(source.stat_energy_to);
+      continue;
+    }
+
+    // grid source
+    for (const flowFrom of source.flow_from) {
+      statIDs.push(flowFrom.stat_energy_from);
+      if (flowFrom.stat_cost) {
+        statIDs.push(flowFrom.stat_cost);
+      }
+      const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+    }
+    for (const flowTo of source.flow_to) {
+      statIDs.push(flowTo.stat_energy_to);
+      if (flowTo.stat_compensation) {
+        statIDs.push(flowTo.stat_compensation);
+      }
+      const costStatId = info.cost_sensors[flowTo.stat_energy_to];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+    }
+  }
+
+  return statIDs;
+};
+
 const getEnergyData = async (
   hass: HomeAssistant,
   prefs: EnergyPreferences,
@@ -285,55 +341,15 @@ const getEnergyData = async (
   }
 
   const consumptionStatIDs: string[] = [];
-  const statIDs: string[] = [];
-
   for (const source of prefs.energy_sources) {
-    if (source.type === "solar") {
-      statIDs.push(source.stat_energy_from);
-      continue;
-    }
-
-    if (source.type === "gas") {
-      statIDs.push(source.stat_energy_from);
-      if (source.stat_cost) {
-        statIDs.push(source.stat_cost);
-      }
-      const costStatId = info.cost_sensors[source.stat_energy_from];
-      if (costStatId) {
-        statIDs.push(costStatId);
-      }
-      continue;
-    }
-
-    if (source.type === "battery") {
-      statIDs.push(source.stat_energy_from);
-      statIDs.push(source.stat_energy_to);
-      continue;
-    }
-
     // grid source
-    for (const flowFrom of source.flow_from) {
-      consumptionStatIDs.push(flowFrom.stat_energy_from);
-      statIDs.push(flowFrom.stat_energy_from);
-      if (flowFrom.stat_cost) {
-        statIDs.push(flowFrom.stat_cost);
-      }
-      const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
-      if (costStatId) {
-        statIDs.push(costStatId);
-      }
-    }
-    for (const flowTo of source.flow_to) {
-      statIDs.push(flowTo.stat_energy_to);
-      if (flowTo.stat_compensation) {
-        statIDs.push(flowTo.stat_compensation);
-      }
-      const costStatId = info.cost_sensors[flowTo.stat_energy_to];
-      if (costStatId) {
-        statIDs.push(costStatId);
+    if (source.type === "grid") {
+      for (const flowFrom of source.flow_from) {
+        consumptionStatIDs.push(flowFrom.stat_energy_from);
       }
     }
   }
+  const statIDs = getReferencedStatisticIds(prefs, info);
 
   const dayDifference = differenceInDays(end || new Date(), start);
   const period =
diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts
index 6879a34c96..e674658b43 100644
--- a/src/panels/config/energy/components/ha-energy-battery-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts
@@ -3,7 +3,6 @@ import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-settings-row";
@@ -14,6 +13,10 @@ import {
   EnergyValidationIssue,
   saveEnergyPreferences,
 } from "../../../../data/energy";
+import {
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -32,6 +35,9 @@ export class EnergyBatterySettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public statsMetadata!: Record<string, StatisticsMetaData>;
+
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
 
@@ -85,7 +91,6 @@ export class EnergyBatterySettings extends LitElement {
             )}
           </h3>
           ${batterySources.map((source) => {
-            const fromEntityState = this.hass.states[source.stat_energy_from];
             const toEntityState = this.hass.states[source.stat_energy_to];
             return html`
               <div class="row" .source=${source}>
@@ -96,14 +101,18 @@ export class EnergyBatterySettings extends LitElement {
                   : html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`}
                 <div class="content">
                   <span
-                    >${toEntityState
-                      ? computeStateName(toEntityState)
-                      : source.stat_energy_from}</span
+                    >${getStatisticLabel(
+                      this.hass,
+                      source.stat_energy_from,
+                      this.statsMetadata
+                    )}</span
                   >
                   <span
-                    >${fromEntityState
-                      ? computeStateName(fromEntityState)
-                      : source.stat_energy_to}</span
+                    >${getStatisticLabel(
+                      this.hass,
+                      source.stat_energy_to,
+                      this.statsMetadata
+                    )}</span
                   >
                 </div>
                 <ha-icon-button
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts
index 333574ed67..71600031e8 100644
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -3,7 +3,6 @@ import { mdiDelete, mdiDevices } from "@mdi/js";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-state-icon";
@@ -13,6 +12,10 @@ import {
   EnergyPreferencesValidation,
   saveEnergyPreferences,
 } from "../../../../data/energy";
+import {
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -31,6 +34,9 @@ export class EnergyDeviceSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public statsMetadata!: Record<string, StatisticsMetaData>;
+
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
 
@@ -81,9 +87,11 @@ export class EnergyDeviceSettings extends LitElement {
               <div class="row">
                 <ha-state-icon .state=${entityState}></ha-state-icon>
                 <span class="content"
-                  >${entityState
-                    ? computeStateName(entityState)
-                    : device.stat_consumption}</span
+                  >${getStatisticLabel(
+                    this.hass,
+                    device.stat_consumption,
+                    this.statsMetadata
+                  )}</span
                 >
                 <ha-icon-button
                   .label=${this.hass.localize("ui.common.delete")}
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts
index f771582229..56f82808f8 100644
--- a/src/panels/config/energy/components/ha-energy-gas-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts
@@ -3,7 +3,6 @@ import { mdiDelete, mdiFire, mdiPencil } from "@mdi/js";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import {
@@ -14,6 +13,10 @@ import {
   getEnergyGasUnitCategory,
   saveEnergyPreferences,
 } from "../../../../data/energy";
+import {
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -32,6 +35,9 @@ export class EnergyGasSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public statsMetadata!: Record<string, StatisticsMetaData>;
+
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
 
@@ -89,9 +95,11 @@ export class EnergyGasSettings extends LitElement {
                     ></ha-icon>`
                   : html`<ha-svg-icon .path=${mdiFire}></ha-svg-icon>`}
                 <span class="content"
-                  >${entityState
-                    ? computeStateName(entityState)
-                    : source.stat_energy_from}</span
+                  >${getStatisticLabel(
+                    this.hass,
+                    source.stat_energy_from,
+                    this.statsMetadata
+                  )}</span
                 >
                 <ha-icon-button
                   .label=${this.hass.localize(
diff --git a/src/panels/config/energy/components/ha-energy-grid-settings.ts b/src/panels/config/energy/components/ha-energy-grid-settings.ts
index e5d5247f71..5a2e5eb102 100644
--- a/src/panels/config/energy/components/ha-energy-grid-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-grid-settings.ts
@@ -9,7 +9,6 @@ import {
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import {
@@ -28,6 +27,10 @@ import {
   GridSourceTypeEnergyPreference,
   saveEnergyPreferences,
 } from "../../../../data/energy";
+import {
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
 import {
   showAlertDialog,
@@ -51,6 +54,9 @@ export class EnergyGridSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public statsMetadata!: Record<string, StatisticsMetaData>;
+
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
 
@@ -127,9 +133,11 @@ export class EnergyGridSettings extends LitElement {
                       .path=${mdiHomeImportOutline}
                     ></ha-svg-icon>`}
                 <span class="content"
-                  >${entityState
-                    ? computeStateName(entityState)
-                    : flow.stat_energy_from}</span
+                  >${getStatisticLabel(
+                    this.hass,
+                    flow.stat_energy_from,
+                    this.statsMetadata
+                  )}</span
                 >
                 <ha-icon-button
                   .label=${this.hass.localize(
@@ -172,9 +180,11 @@ export class EnergyGridSettings extends LitElement {
                       .path=${mdiHomeExportOutline}
                     ></ha-svg-icon>`}
                 <span class="content"
-                  >${entityState
-                    ? computeStateName(entityState)
-                    : flow.stat_energy_to}</span
+                  >${getStatisticLabel(
+                    this.hass,
+                    flow.stat_energy_to,
+                    this.statsMetadata
+                  )}</span
                 >
                 <ha-icon-button
                   .label=${this.hass.localize(
diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts
index e8d0093299..64074c0a8e 100644
--- a/src/panels/config/energy/components/ha-energy-solar-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts
@@ -3,7 +3,6 @@ import { mdiDelete, mdiPencil, mdiSolarPower } from "@mdi/js";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import {
@@ -14,6 +13,10 @@ import {
   saveEnergyPreferences,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
+import {
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import {
   showConfirmationDialog,
   showAlertDialog,
@@ -32,6 +35,9 @@ export class EnergySolarSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public statsMetadata!: Record<string, StatisticsMetaData>;
+
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
 
@@ -97,9 +103,11 @@ export class EnergySolarSettings extends LitElement {
                     ></ha-icon>`
                   : html`<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>`}
                 <span class="content"
-                  >${entityState
-                    ? computeStateName(entityState)
-                    : source.stat_energy_from}</span
+                  >${getStatisticLabel(
+                    this.hass,
+                    source.stat_energy_from,
+                    this.statsMetadata
+                  )}</span
                 >
                 ${this.info
                   ? html`
diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts
index 44c0f14d66..c6a2d5b150 100644
--- a/src/panels/config/energy/ha-config-energy.ts
+++ b/src/panels/config/energy/ha-config-energy.ts
@@ -8,7 +8,12 @@ import {
   EnergyPreferences,
   getEnergyInfo,
   getEnergyPreferences,
+  getReferencedStatisticIds,
 } from "../../../data/energy";
+import {
+  getStatisticMetadata,
+  StatisticsMetaData,
+} from "../../../data/history";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -47,6 +52,8 @@ class HaConfigEnergy extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _statsMetadata?: Record<string, StatisticsMetaData>;
+
   protected firstUpdated() {
     this._fetchConfig();
   }
@@ -83,12 +90,14 @@ class HaConfigEnergy extends LitElement {
           <ha-energy-grid-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata!}
             .validationResult=${this._validationResult!}
             @value-changed=${this._prefsChanged}
           ></ha-energy-grid-settings>
           <ha-energy-solar-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata!}
             .validationResult=${this._validationResult!}
             .info=${this._info}
             @value-changed=${this._prefsChanged}
@@ -96,18 +105,21 @@ class HaConfigEnergy extends LitElement {
           <ha-energy-battery-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata!}
             .validationResult=${this._validationResult!}
             @value-changed=${this._prefsChanged}
           ></ha-energy-battery-settings>
           <ha-energy-gas-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata!}
             .validationResult=${this._validationResult!}
             @value-changed=${this._prefsChanged}
           ></ha-energy-gas-settings>
           <ha-energy-device-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata!}
             .validationResult=${this._validationResult!}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
@@ -136,6 +148,7 @@ class HaConfigEnergy extends LitElement {
       this._error = err.message;
     }
     this._info = await energyInfoPromise;
+    await this._fetchMetaData();
   }
 
   private async _prefsChanged(ev: CustomEvent) {
@@ -147,6 +160,20 @@ class HaConfigEnergy extends LitElement {
       this._error = err.message;
     }
     this._info = await getEnergyInfo(this.hass);
+    await this._fetchMetaData();
+  }
+
+  private async _fetchMetaData() {
+    if (!this._preferences || !this._info) {
+      return;
+    }
+    const statIDs = getReferencedStatisticIds(this._preferences, this._info);
+    const statsMetadataArray = await getStatisticMetadata(this.hass, statIDs);
+    const statsMetadata: Record<string, StatisticsMetaData> = {};
+    statsMetadataArray.forEach((x) => {
+      statsMetadata[x.statistic_id] = x;
+    });
+    this._statsMetadata = statsMetadata;
   }
 
   static get styles(): CSSResultGroup {