Limit height of charts to 400px (#9487)

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

@@ -20,7 +20,7 @@ interface Tooltip extends TooltipModel<any> {
 export default class HaChartBase extends LitElement {
   public chart?: Chart;
 
-  @property()
+  @property({ attribute: "chart-type", reflect: true })
   public chartType: ChartType = "line";
 
   @property({ attribute: false })
@@ -228,6 +228,9 @@ export default class HaChartBase extends LitElement {
         height: 0;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
       }
+      :host(:not([chart-type="timeline"])) canvas {
+        max-height: 400px;
+      }
       .chartLegend {
         text-align: center;
       }

src/components/chart/state-history-chart-line.ts

@@ -30,7 +30,7 @@ class StateHistoryChartLine extends LitElement {
       <ha-chart-base
         .data=${this._chartData}
         .options=${this._chartOptions}
-        chartType="line"
+        chart-type="line"
       ></ha-chart-base>
     `;
   }

src/components/chart/state-history-chart-timeline.ts

@@ -98,7 +98,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .data=${this._chartData}
         .options=${this._chartOptions}
-        chartType="timeline"
+        chart-type="timeline"
       ></ha-chart-base>
     `;
   }