Add option to hide legend on statistic graph card (#15506)

src/components/chart/statistics-chart.ts

@@ -59,7 +59,7 @@ export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
 class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public statisticsData!: Statistics;
+  @property({ attribute: false }) public statisticsData?: Statistics;
 
   @property({ attribute: false }) public metadata?: Record<
     string,
@@ -99,7 +99,11 @@ class StatisticsChart extends LitElement {
     if (!this.hasUpdated || changedProps.has("unit")) {
       this._createOptions();
     }
-    if (changedProps.has("statisticsData") || changedProps.has("statTypes")) {
+    if (
+      changedProps.has("statisticsData") ||
+      changedProps.has("statTypes") ||
+      changedProps.has("hideLegend")
+    ) {
       this._generateData();
     }
   }

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -91,7 +91,11 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    return this._config?.title ? 2 : 0 + 2 * (this._entities?.length || 1);
+    return (
+      5 +
+      (this._config?.title ? 2 : 0) +
+      (!this._config?.hide_legend ? this._entities?.length || 0 : 0)
+    );
   }
 
   public setConfig(config: StatisticsGraphCardConfig): void {
@@ -194,6 +198,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .statTypes=${this._statTypes!}
             .names=${this._names}
             .unit=${this._unit}
+            .hideLegend=${this._config.hide_legend || false}
           ></statistics-chart>
         </div>
       </ha-card>

src/panels/lovelace/cards/types.ts

@@ -312,6 +312,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
   period?: "5minute" | "hour" | "day" | "month";
   stat_types?: ExtendedStatisticType | ExtendedStatisticType[];
   chart_type?: "line" | "bar";
+  hide_legend?: boolean;
 }
 
 export interface StatisticCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -12,6 +12,7 @@ import {
   array,
   assert,
   assign,
+  boolean,
   literal,
   number,
   object,
@@ -72,6 +73,7 @@ const cardConfigStruct = assign(
     chart_type: optional(union([literal("bar"), literal("line")])),
     stat_types: optional(union([array(statTypeStruct), statTypeStruct])),
     unit: optional(string()),
+    hide_legend: optional(boolean()),
   })
 );
 
@@ -204,6 +206,11 @@ export class HuiStatisticsGraphCardEditor
                 ["bar", "Bar"],
               ],
             },
+            {
+              name: "hide_legend",
+              required: false,
+              selector: { boolean: {} },
+            },
           ],
         },
       ];
@@ -334,6 +341,7 @@ export class HuiStatisticsGraphCardEditor
       case "stat_types":
       case "period":
       case "unit":
+      case "hide_legend":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.statistics-graph.${schema.name}`
         );

src/translations/en.json

@@ -4194,7 +4194,8 @@
                 "5minute": "5 Minutes"
               },
               "pick_statistic": "Add a statistic",
-              "picked_statistic": "Statistic"
+              "picked_statistic": "Statistic",
+              "hide_legend": "Hide legend"
             },
             "statistic": {
               "name": "Statistic",