Fix spacing & colors in statistics-graph chart (#24068)

* Fix statistic chart colors

* Fix spacing in statistics-graph

* set start time based on data

src/components/chart/ha-chart-base.ts

@@ -248,11 +248,16 @@ export class HaChartBase extends LitElement {
 
   private _createOptions(): ECOption {
     let xAxis = this.options?.xAxis;
-    if (xAxis && !Array.isArray(xAxis) && xAxis.type === "time") {
+    if (xAxis) {
-      if (xAxis.max && xAxis.min) {
+      xAxis = Array.isArray(xAxis) ? xAxis : [xAxis];
+      xAxis = xAxis.map((axis: XAXisOption) => {
+        if (axis.type !== "time" || axis.show === false) {
+          return axis;
+        }
+        if (axis.max && axis.min) {
           this._minutesDifference = differenceInMinutes(
-          xAxis.max as Date,
+            axis.max as Date,
-          xAxis.min as Date
+            axis.min as Date
           );
         }
         const dayDifference = this._minutesDifference / 60 / 24;
@@ -265,8 +270,14 @@ export class HaChartBase extends LitElement {
                 ? 3600 * 24 * 1000
                 : undefined;
         }
-      xAxis = {
+        return {
-        ...xAxis,
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+          },
+          ...axis,
           axisLabel: {
             formatter: this._formatTimeLabel,
             rich: {
@@ -275,16 +286,11 @@ export class HaChartBase extends LitElement {
               },
             },
             hideOverlap: true,
-          ...xAxis.axisLabel,
+            ...axis.axisLabel,
-        },
-        axisLine: {
-          show: false,
-        },
-        splitLine: {
-          show: true,
           },
           minInterval,
         } as XAXisOption;
+      });
     }
     const options = {
       animation: !this._reducedMotion,

src/components/chart/statistics-chart.ts

@@ -128,7 +128,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("hideLegend") ||
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
-      changedProps.has("_legendData")
+      changedProps.has("_legendData") ||
+      changedProps.has("_chartData")
     ) {
       this._createOptions();
     }
@@ -245,30 +246,39 @@ export class StatisticsChart extends LitElement {
     const endTime = this.endTime ?? new Date();
     let startTime = this.startTime;
 
+    if (!startTime) {
+      // set start time to the earliest point in the chart data
+      this._chartData.forEach((series) => {
+        if (!Array.isArray(series.data) || !series.data[0]) return;
+        const firstPoint = series.data[0] as any;
+        const timestamp = Array.isArray(firstPoint)
+          ? firstPoint[0]
+          : firstPoint.value?.[0];
+        if (timestamp && (!startTime || new Date(timestamp) < startTime)) {
+          startTime = new Date(timestamp);
+        }
+      });
+
       if (!startTime) {
         // Calculate default start time based on dayDifference
         startTime = new Date(
           endTime.getTime() - dayDifference * 24 * 3600 * 1000
         );
-
-      // Check chart data for earlier points
-      this._chartData.forEach((series) => {
-        if (!Array.isArray(series.data)) return;
-        series.data.forEach((point) => {
-          const timestamp = Array.isArray(point) ? point[0] : point.value?.[0];
-          if (new Date(timestamp) < startTime!) {
-            startTime = new Date(timestamp);
       }
-        });
-      });
     }
 
     this._chartOptions = {
-      xAxis: {
+      xAxis: [
+        {
           type: "time",
           min: startTime,
           max: endTime,
         },
+        {
+          type: "time",
+          show: false,
+        },
+      ],
       yAxis: {
         type: this.logarithmicScale ? "log" : "value",
         name: this.unit,
@@ -462,6 +472,9 @@ export class StatisticsChart extends LitElement {
             displayedLegend = displayedLegend || showLegend;
           }
           statTypes.push(type);
+          const borderColor =
+            band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color;
+          const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
             type: this.chartType,
@@ -485,21 +498,16 @@ export class StatisticsChart extends LitElement {
               this.chartType === "bar"
                 ? {
                     borderRadius: [4, 4, 0, 0],
-                    borderColor:
+                    borderColor,
-                      band && hasMean
-                        ? color + (this.hideLegend ? "00" : "7F")
-                        : color,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color:
+            color: this.chartType === "bar" ? backgroundColor : borderColor,
-              band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,
           };
           if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
             (series as LineSeriesOption).symbol = "none";
-            (series as LineSeriesOption).lineStyle = { width: 1.5 };
             if (drawBands && type === "max") {
               (series as LineSeriesOption).areaStyle = {
                 color: color + "3F",
@@ -561,6 +569,7 @@ export class StatisticsChart extends LitElement {
         color,
         type: this.chartType,
         data: [],
+        xAxisIndex: 1,
       });
     });