Improve statistics graph axis when using energy_date_selection (#23974)

src/components/chart/statistics-chart.ts

@@ -56,6 +56,8 @@ export class StatisticsChart extends LitElement {
 
   @property() public unit?: string;
 
+  @property({ attribute: false }) public startTime?: Date;
+
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ attribute: false, type: Array })
@@ -124,6 +126,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("fitYData") ||
       changedProps.has("logarithmicScale") ||
       changedProps.has("hideLegend") ||
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
       changedProps.has("_legendData")
     ) {
       this._createOptions();
@@ -218,6 +222,8 @@ export class StatisticsChart extends LitElement {
           this.hass.config,
           dayDifference
         ),
+        min: this.startTime,
+        max: this.endTime,
         axisLine: {
           show: false,
         },

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

@@ -6,7 +6,10 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../components/ha-card";
 import { getEnergyDataCollection } from "../../../data/energy";
-import { getSuggestedPeriod } from "./energy/common/energy-chart-options";
+import {
+  getSuggestedMax,
+  getSuggestedPeriod,
+} from "./energy/common/energy-chart-options";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -274,10 +277,19 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .unit=${this._unit}
             .minYAxis=${this._config.min_y_axis}
             .maxYAxis=${this._config.max_y_axis}
+            .startTime=${this._energyStart}
+            .endTime=${this._energyEnd && this._energyStart
+              ? getSuggestedMax(
+                  differenceInDays(this._energyEnd, this._energyStart),
+                  this._energyEnd
+                )
+              : undefined}
             .fitYData=${this._config.fit_y_data || false}
             .hideLegend=${this._config.hide_legend || false}
             .logarithmicScale=${this._config.logarithmic_scale || false}
-            .daysToShow=${this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
+            .daysToShow=${this._energyStart && this._energyEnd
+              ? differenceInDays(this._energyEnd, this._energyStart)
+              : this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
             .height=${this._config.grid_options?.rows ? "100%" : undefined}
           ></statistics-chart>
         </div>