diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
index 5bd0e8ce33..1d585f2d57 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
@@ -96,7 +96,10 @@ export class HuiEnergyDevicesDetailGraphCard
   }
 
   protected willUpdate(changedProps: PropertyValues) {
-    if (changedProps.has("_hiddenStats") && this._data) {
+    if (
+      (changedProps.has("_hiddenStats") || changedProps.has("_config")) &&
+      this._data
+    ) {
       this._processStatistics();
     }
   }
@@ -217,17 +220,17 @@ export class HuiEnergyDevicesDetailGraphCard
     const datasets: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
     const datasetExtras: ChartDatasetExtra[] = [];
 
-    datasets.push(
-      ...this._processDataSet(
+    const { data: processedData, dataExtras: processedDataExtras } =
+      this._processDataSet(
         data,
         energyData.statsMetadata,
         energyData.prefs.device_consumption,
         sorted_devices
-      )
-    );
+      );
 
-    const items = datasets.length;
-    datasetExtras.push(...Array<ChartDatasetExtra>(items).fill({}));
+    datasets.push(...processedData);
+
+    datasetExtras.push(...processedDataExtras);
 
     if (compareData) {
       // Add empty dataset to align the bars
@@ -247,18 +250,19 @@ export class HuiEnergyDevicesDetailGraphCard
         show_legend: false,
       });
 
-      datasets.push(
-        ...this._processDataSet(
-          compareData,
-          energyData.statsMetadata,
-          energyData.prefs.device_consumption,
-          sorted_devices,
-          true
-        )
-      );
-      datasetExtras.push(
-        ...Array<ChartDatasetExtra>(items).fill({ show_legend: false })
+      const {
+        data: processedCompareData,
+        dataExtras: processedCompareDataExtras,
+      } = this._processDataSet(
+        compareData,
+        energyData.statsMetadata,
+        energyData.prefs.device_consumption,
+        sorted_devices,
+        true
       );
+
+      datasets.push(...processedCompareData);
+      datasetExtras.push(...processedCompareDataExtras);
     }
 
     this._start = energyData.start;
@@ -281,6 +285,7 @@ export class HuiEnergyDevicesDetailGraphCard
     compare = false
   ) {
     const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
+    const dataExtras: ChartDatasetExtra[] = [];
 
     devices.forEach((source, idx) => {
       const color = getColorByIndex(idx);
@@ -317,23 +322,30 @@ export class HuiEnergyDevicesDetailGraphCard
         }
       }
 
+      const order = sorted_devices.indexOf(source.stat_consumption);
+      const itemExceedsMax = !!(
+        this._config?.max_devices && order >= this._config.max_devices
+      );
+
       data.push({
         label: getStatisticLabel(
           this.hass,
           source.stat_consumption,
           statisticsMetaData[source.stat_consumption]
         ),
-        hidden: this._hiddenStats.has(source.stat_consumption),
+        hidden:
+          this._hiddenStats.has(source.stat_consumption) || itemExceedsMax,
         borderColor: compare ? color + "7F" : color,
         backgroundColor: compare ? color + "32" : color + "7F",
         data: consumptionData,
-        order: 1 + sorted_devices.indexOf(source.stat_consumption),
+        order: 1 + order,
         stack: "devices",
         pointStyle: compare ? false : "circle",
         xAxisID: compare ? "xAxisCompare" : undefined,
       });
+      dataExtras.push({ show_legend: !compare && !itemExceedsMax });
     });
-    return data;
+    return { data, dataExtras };
   }
 
   static get styles(): CSSResultGroup {