diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 142f8252f7..62fc29352b 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/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;
       }
diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 24733ce3f4..9b0a704f86 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/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>
     `;
   }
diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index ee2fc7d007..fe6873ed0b 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/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>
     `;
   }