diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
index 90dec57607..c4a9891ad4 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
@@ -88,16 +88,18 @@ export class HuiEnergyGasGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} ${this._unit}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} ${this._unit}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index bce457b087..dd55f21520 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -90,16 +90,18 @@ export class HuiEnergySolarGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} kWh
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} kWh
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
index 8128ab1f8d..5810e2e12f 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
@@ -103,19 +103,21 @@ export class HuiEnergyUsageGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${this.hass.localize(
-                  "ui.panel.lovelace.cards.energy.energy_usage_graph.total_usage",
-                  { num: formatNumber(this._total, this.hass.locale) }
-                )}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.energy_usage_graph.total_usage",
+                      { num: formatNumber(this._total, this.hass.locale) }
+                    )}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
index 272956a09c..b42b47611e 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
@@ -88,16 +88,18 @@ export class HuiEnergyWaterGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} ${this._unit}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title ? this._config.title : nothing}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} ${this._unit}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,