diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index f4d8f31c93..01cec98dcb 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -35,7 +35,6 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
-const RESIZE_ANIMATION_DURATION = 250;
 
 export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
@@ -91,6 +90,8 @@ export class HaChartBase extends LitElement {
 
   private _shouldResizeChart = false;
 
+  private _resizeAnimationDuration?: number;
+
   // @ts-ignore
   private _resizeController = new ResizeController(this, {
     callback: () => {
@@ -214,6 +215,7 @@ export class HaChartBase extends LitElement {
       ) {
         // custom legend changes may require a resize to layout properly
         this._shouldResizeChart = true;
+        this._resizeAnimationDuration = 250;
       }
     } else if (this._isTouchDevice && changedProps.has("_isZoomed")) {
       chartOptions.dataZoom = this._getDataZoomConfig();
@@ -977,11 +979,14 @@ export class HaChartBase extends LitElement {
   private _handleChartRenderFinished = () => {
     if (this._shouldResizeChart) {
       this.chart?.resize({
-        animation: this._reducedMotion
-          ? undefined
-          : { duration: RESIZE_ANIMATION_DURATION },
+        animation:
+          this._reducedMotion ||
+          typeof this._resizeAnimationDuration !== "number"
+            ? undefined
+            : { duration: this._resizeAnimationDuration },
       });
       this._shouldResizeChart = false;
+      this._resizeAnimationDuration = undefined;
     }
   };