pace-chart-lib 1.0.56 → 1.0.57

package/dist/pace-chart-lib.es.js

@@ -2392,7 +2392,7 @@ define$1(Hcl, hcl, extend$1(Color$2, {
   }
 }));
 const constant$9 = (x2) => () => x2;
-function linear$2(a2, d) {
+function linear$3(a2, d) {
   return function(t) {
     return a2 + t * d;
   };
@@ -2409,7 +2409,7 @@ function gamma$1(y2) {
 }
 function nogamma$1(a2, b) {
   var d = b - a2;
-  return d ? linear$2(a2, d) : constant$9(isNaN(a2) ? b : a2);
+  return d ? linear$3(a2, d) : constant$9(isNaN(a2) ? b : a2);
 }
 const interpolateRgb$1 = (function rgbGamma(y2) {
   var color2 = gamma$1(y2);
@@ -2634,7 +2634,7 @@ const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
         ];
       };
     } else {
-      var d1 = Math.sqrt(d2), b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1), b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1), r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0), r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
+      var d1 = Math.sqrt(d2), b02 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1), b12 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1), r0 = Math.log(Math.sqrt(b02 * b02 + 1) - b02), r1 = Math.log(Math.sqrt(b12 * b12 + 1) - b12);
       S = (r1 - r0) / rho;
       i = function(t) {
         var s2 = t * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s2 + r0) - sinh(r0));
@@ -3358,49 +3358,85 @@ Transition$1.prototype = {
   end: transition_end$1,
   [Symbol.iterator]: selection_prototype$1[Symbol.iterator]
 };
+const linear$2 = (t) => +t;
+function cubicIn(t) {
+  return t * t * t;
+}
+function cubicOut(t) {
+  return --t * t * t + 1;
+}
 function cubicInOut$1(t) {
   return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
 }
 function tpmt(x2) {
   return (Math.pow(2, -10 * x2) - 9765625e-10) * 1.0009775171065494;
 }
+var b1 = 4 / 11, b2 = 6 / 11, b3 = 8 / 11, b4 = 3 / 4, b5 = 9 / 11, b6 = 10 / 11, b7 = 15 / 16, b8 = 21 / 22, b9 = 63 / 64, b0 = 1 / b1 / b1;
+function bounceOut(t) {
+  return (t = +t) < b1 ? b0 * t * t : t < b3 ? b0 * (t -= b2) * t + b4 : t < b6 ? b0 * (t -= b5) * t + b7 : b0 * (t -= b8) * t + b9;
+}
+var overshoot = 1.70158;
+(function custom(s2) {
+  s2 = +s2;
+  function backIn(t) {
+    return (t = +t) * t * (s2 * (t - 1) + t);
+  }
+  backIn.overshoot = custom;
+  return backIn;
+})(overshoot);
+var backOut = (function custom2(s2) {
+  s2 = +s2;
+  function backOut2(t) {
+    return --t * t * ((t + 1) * s2 + t) + 1;
+  }
+  backOut2.overshoot = custom2;
+  return backOut2;
+})(overshoot);
+(function custom3(s2) {
+  s2 = +s2;
+  function backInOut(t) {
+    return ((t *= 2) < 1 ? t * t * ((s2 + 1) * t - s2) : (t -= 2) * t * ((s2 + 1) * t + s2) + 2) / 2;
+  }
+  backInOut.overshoot = custom3;
+  return backInOut;
+})(overshoot);
 var tau$5 = 2 * Math.PI, amplitude = 1, period = 0.3;
-(function custom(a2, p) {
+(function custom4(a2, p) {
   var s2 = Math.asin(1 / (a2 = Math.max(1, a2))) * (p /= tau$5);
   function elasticIn2(t) {
     return a2 * tpmt(- --t) * Math.sin((s2 - t) / p);
   }
   elasticIn2.amplitude = function(a3) {
-    return custom(a3, p * tau$5);
+    return custom4(a3, p * tau$5);
   };
   elasticIn2.period = function(p2) {
-    return custom(a2, p2);
+    return custom4(a2, p2);
   };
   return elasticIn2;
 })(amplitude, period);
-var elasticOut$1 = (function custom2(a2, p) {
+var elasticOut$1 = (function custom5(a2, p) {
   var s2 = Math.asin(1 / (a2 = Math.max(1, a2))) * (p /= tau$5);
   function elasticOut2(t) {
     return 1 - a2 * tpmt(t = +t) * Math.sin((t + s2) / p);
   }
   elasticOut2.amplitude = function(a3) {
-    return custom2(a3, p * tau$5);
+    return custom5(a3, p * tau$5);
   };
   elasticOut2.period = function(p2) {
-    return custom2(a2, p2);
+    return custom5(a2, p2);
   };
   return elasticOut2;
 })(amplitude, period);
-(function custom3(a2, p) {
+(function custom6(a2, p) {
   var s2 = Math.asin(1 / (a2 = Math.max(1, a2))) * (p /= tau$5);
   function elasticInOut(t) {
     return ((t = t * 2 - 1) < 0 ? a2 * tpmt(-t) * Math.sin((s2 - t) / p) : 2 - a2 * tpmt(t) * Math.sin((s2 + t) / p)) / 2;
   }
   elasticInOut.amplitude = function(a3) {
-    return custom3(a3, p * tau$5);
+    return custom6(a3, p * tau$5);
   };
   elasticInOut.period = function(p2) {
-    return custom3(a2, p2);
+    return custom6(a2, p2);
   };
   return elasticInOut;
 })(amplitude, period);
@@ -4394,12 +4430,12 @@ function clipRectangle(x02, y02, x12, y12) {
     function polygonInside() {
       var winding = 0;
       for (var i = 0, n = polygon.length; i < n; ++i) {
-        for (var ring2 = polygon[i], j = 1, m = ring2.length, point3 = ring2[0], a0, a1, b0 = point3[0], b1 = point3[1]; j < m; ++j) {
-          a0 = b0, a1 = b1, point3 = ring2[j], b0 = point3[0], b1 = point3[1];
+        for (var ring2 = polygon[i], j = 1, m = ring2.length, point3 = ring2[0], a0, a1, b02 = point3[0], b12 = point3[1]; j < m; ++j) {
+          a0 = b02, a1 = b12, point3 = ring2[j], b02 = point3[0], b12 = point3[1];
           if (a1 <= y12) {
-            if (b1 > y12 && (b0 - a0) * (y12 - a1) > (b1 - a1) * (x02 - a0)) ++winding;
+            if (b12 > y12 && (b02 - a0) * (y12 - a1) > (b12 - a1) * (x02 - a0)) ++winding;
           } else {
-            if (b1 <= y12 && (b0 - a0) * (y12 - a1) < (b1 - a1) * (x02 - a0)) --winding;
+            if (b12 <= y12 && (b02 - a0) * (y12 - a1) < (b12 - a1) * (x02 - a0)) --winding;
           }
         }
       }
@@ -4873,19 +4909,19 @@ function resampleNone(project) {
   });
 }
 function resample$1(project, delta2) {
-  function resampleLineTo(x02, y02, lambda0, a0, b0, c0, x12, y12, lambda1, a1, b1, c1, depth, stream) {
+  function resampleLineTo(x02, y02, lambda0, a0, b02, c0, x12, y12, lambda1, a1, b12, c1, depth, stream) {
     var dx = x12 - x02, dy = y12 - y02, d2 = dx * dx + dy * dy;
     if (d2 > 4 * delta2 && depth--) {
-      var a2 = a0 + a1, b = b0 + b1, c2 = c0 + c1, m = sqrt$1(a2 * a2 + b * b + c2 * c2), phi2 = asin$2(c2 /= m), lambda2 = abs$1(abs$1(c2) - 1) < epsilon$3 || abs$1(lambda0 - lambda1) < epsilon$3 ? (lambda0 + lambda1) / 2 : atan2$1(b, a2), p = project(lambda2, phi2), x2 = p[0], y2 = p[1], dx2 = x2 - x02, dy2 = y2 - y02, dz = dy * dx2 - dx * dy2;
-      if (dz * dz / d2 > delta2 || abs$1((dx * dx2 + dy * dy2) / d2 - 0.5) > 0.3 || a0 * a1 + b0 * b1 + c0 * c1 < cosMinDistance) {
-        resampleLineTo(x02, y02, lambda0, a0, b0, c0, x2, y2, lambda2, a2 /= m, b /= m, c2, depth, stream);
+      var a2 = a0 + a1, b = b02 + b12, c2 = c0 + c1, m = sqrt$1(a2 * a2 + b * b + c2 * c2), phi2 = asin$2(c2 /= m), lambda2 = abs$1(abs$1(c2) - 1) < epsilon$3 || abs$1(lambda0 - lambda1) < epsilon$3 ? (lambda0 + lambda1) / 2 : atan2$1(b, a2), p = project(lambda2, phi2), x2 = p[0], y2 = p[1], dx2 = x2 - x02, dy2 = y2 - y02, dz = dy * dx2 - dx * dy2;
+      if (dz * dz / d2 > delta2 || abs$1((dx * dx2 + dy * dy2) / d2 - 0.5) > 0.3 || a0 * a1 + b02 * b12 + c0 * c1 < cosMinDistance) {
+        resampleLineTo(x02, y02, lambda0, a0, b02, c0, x2, y2, lambda2, a2 /= m, b /= m, c2, depth, stream);
         stream.point(x2, y2);
-        resampleLineTo(x2, y2, lambda2, a2, b, c2, x12, y12, lambda1, a1, b1, c1, depth, stream);
+        resampleLineTo(x2, y2, lambda2, a2, b, c2, x12, y12, lambda1, a1, b12, c1, depth, stream);
       }
     }
   }
   return function(stream) {
-    var lambda00, x002, y002, a00, b00, c00, lambda0, x02, y02, a0, b0, c0;
+    var lambda00, x002, y002, a00, b00, c00, lambda0, x02, y02, a0, b02, c0;
     var resampleStream = {
       point: point2,
       lineStart,
@@ -4910,7 +4946,7 @@ function resample$1(project, delta2) {
     }
     function linePoint(lambda, phi2) {
       var c2 = cartesian([lambda, phi2]), p = project(lambda, phi2);
-      resampleLineTo(x02, y02, lambda0, a0, b0, c0, x02 = p[0], y02 = p[1], lambda0 = lambda, a0 = c2[0], b0 = c2[1], c0 = c2[2], maxDepth, stream);
+      resampleLineTo(x02, y02, lambda0, a0, b02, c0, x02 = p[0], y02 = p[1], lambda0 = lambda, a0 = c2[0], b02 = c2[1], c0 = c2[2], maxDepth, stream);
       stream.point(x02, y02);
     }
     function lineEnd() {
@@ -4923,11 +4959,11 @@ function resample$1(project, delta2) {
       resampleStream.lineEnd = ringEnd;
     }
     function ringPoint(lambda, phi2) {
-      linePoint(lambda00 = lambda, phi2), x002 = x02, y002 = y02, a00 = a0, b00 = b0, c00 = c0;
+      linePoint(lambda00 = lambda, phi2), x002 = x02, y002 = y02, a00 = a0, b00 = b02, c00 = c0;
       resampleStream.point = linePoint;
     }
     function ringEnd() {
-      resampleLineTo(x02, y02, lambda0, a0, b0, c0, x002, y002, lambda00, a00, b00, c00, maxDepth, stream);
+      resampleLineTo(x02, y02, lambda0, a0, b02, c0, x002, y002, lambda00, a00, b00, c00, maxDepth, stream);
       resampleStream.lineEnd = lineEnd;
       lineEnd();
     }
@@ -5674,12 +5710,12 @@ function squarifyRatio(ratio, parent, x02, y02, x12, y12) {
   }
   return rows;
 }
-const squarify = (function custom4(ratio) {
+const squarify = (function custom7(ratio) {
   function squarify2(parent, x02, y02, x12, y12) {
     squarifyRatio(ratio, parent, x02, y02, x12, y12);
   }
   squarify2.ratio = function(x2) {
-    return custom4((x2 = +x2) > 1 ? x2 : 1);
+    return custom7((x2 = +x2) > 1 ? x2 : 1);
   };
   return squarify2;
 })(phi);
@@ -6737,12 +6773,12 @@ Cardinal$1.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-const cardinal = (function custom5(tension) {
+const cardinal = (function custom8(tension) {
   function cardinal2(context) {
     return new Cardinal$1(context, tension);
   }
   cardinal2.tension = function(tension2) {
-    return custom5(+tension2);
+    return custom8(+tension2);
   };
   return cardinal2;
 })(0);
@@ -8641,12 +8677,12 @@ Bundle.prototype = {
     this._y.push(+y2);
   }
 };
-(function custom6(beta) {
+(function custom9(beta) {
   function bundle(context) {
     return beta === 1 ? new Basis(context) : new Bundle(context, beta);
   }
   bundle.beta = function(beta2) {
-    return custom6(+beta2);
+    return custom9(+beta2);
   };
   return bundle;
 })(0.85);
@@ -8709,12 +8745,12 @@ Cardinal.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-(function custom7(tension) {
+(function custom10(tension) {
   function cardinal2(context) {
     return new Cardinal(context, tension);
   }
   cardinal2.tension = function(tension2) {
-    return custom7(+tension2);
+    return custom10(+tension2);
   };
   return cardinal2;
 })(0);
@@ -8772,12 +8808,12 @@ CardinalClosed.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-(function custom8(tension) {
+(function custom11(tension) {
   function cardinal2(context) {
     return new CardinalClosed(context, tension);
   }
   cardinal2.tension = function(tension2) {
-    return custom8(+tension2);
+    return custom11(+tension2);
   };
   return cardinal2;
 })(0);
@@ -8824,12 +8860,12 @@ CardinalOpen.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-(function custom9(tension) {
+(function custom12(tension) {
   function cardinal2(context) {
     return new CardinalOpen(context, tension);
   }
   cardinal2.tension = function(tension2) {
-    return custom9(+tension2);
+    return custom12(+tension2);
   };
   return cardinal2;
 })(0);
@@ -8901,12 +8937,12 @@ CatmullRom.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-const curveCatmullRom = (function custom10(alpha2) {
+const curveCatmullRom = (function custom13(alpha2) {
   function catmullRom(context) {
     return alpha2 ? new CatmullRom(context, alpha2) : new Cardinal(context, 0);
   }
   catmullRom.alpha = function(alpha3) {
-    return custom10(+alpha3);
+    return custom13(+alpha3);
   };
   return catmullRom;
 })(0.5);
@@ -8970,12 +9006,12 @@ CatmullRomClosed.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-(function custom11(alpha2) {
+(function custom14(alpha2) {
   function catmullRom(context) {
     return alpha2 ? new CatmullRomClosed(context, alpha2) : new CardinalClosed(context, 0);
   }
   catmullRom.alpha = function(alpha3) {
-    return custom11(+alpha3);
+    return custom14(+alpha3);
   };
   return catmullRom;
 })(0.5);
@@ -9028,12 +9064,12 @@ CatmullRomOpen.prototype = {
     this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-(function custom12(alpha2) {
+(function custom15(alpha2) {
   function catmullRom(context) {
     return alpha2 ? new CatmullRomOpen(context, alpha2) : new CardinalOpen(context, 0);
   }
   catmullRom.alpha = function(alpha3) {
-    return custom12(+alpha3);
+    return custom15(+alpha3);
   };
   return catmullRom;
 })(0.5);
@@ -10949,6 +10985,15 @@ var waterfallKeys = /* @__PURE__ */ ((waterfallKeys2) => {
   waterfallKeys2["down"] = "down";
   return waterfallKeys2;
 })(waterfallKeys || {});
+const effectsMap = {
+  "easeLinear": linear$2,
+  "easeCubicIn": cubicIn,
+  "easeCubicOut": cubicOut,
+  "easeCubicInOut": cubicInOut$1,
+  "easeBounceOut": bounceOut,
+  "easeElasticOut": elasticOut$1,
+  "easeBackOut": backOut
+};
 const defaultChartFormatOptions = {
   chartDescription: {
     chartDescriptionVisibility: false,
@@ -11551,6 +11596,20 @@ const defaultChartFormatOptions = {
   chartPadding: {
     paddingArrayLTRB: [0, 0, 0, 0]
     // left, top, right, bottom
+  },
+  statisticalTest: {
+    zTest: false,
+    runZTest: [],
+    zTestInputData: []
+  },
+  cjsOptions: {
+    cjsTension: 0,
+    cjsBorderRadius: 0
+  },
+  animation: {
+    animationEnabled: false,
+    animationDuration: 1500,
+    animationEffect: "easeCubicOut"
   }
 };
 const chartMargins = {
@@ -13489,6 +13548,21 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         connectorType,
         barChart
       );
+      if (formatOptions.animation?.animationEnabled) {
+        const duration = formatOptions.animation.animationDuration;
+        const ease = effectsMap[formatOptions.animation.animationEffect];
+        const accessors = makeAnnotations.accessors();
+        annotations.selectAll(".annotation").attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const yScale = d.data?.y?.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+          const startY = yScale(0);
+          return `translate(${x2}, ${startY})`;
+        }).transition().duration(duration).ease(ease).attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const y2 = accessors.y(d.data);
+          return `translate(${x2}, ${y2})`;
+        });
+      }
     }
   } catch (error) {
     throw error;
@@ -13985,6 +14059,28 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       }).notePadding(0).annotations(finalAnnotationList);
       if (!formatOptions.plotArea.fitChart) svg.selectAll(".annotation-group").remove();
       let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType, false);
+      if (formatOptions.animation?.animationEnabled) {
+        const duration = formatOptions.animation.animationDuration;
+        const ease = effectsMap[formatOptions.animation.animationEffect];
+        const accessors = makeAnnotations.accessors();
+        annotations.selectAll(".annotation").attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const chartType = d.data.type || d.type;
+          const axis2 = d.data?.x?.axis || d.data?.axis;
+          const yScale = axis2 === axisTypes.primary ? yScaleLeft : yScaleRight;
+          let startY;
+          if (chartType === chartTypes.StackColumnChart || chartType === chartTypes.StackAreaChart) {
+            startY = yScale(d.data.prevValue ?? 0);
+          } else {
+            startY = yScale(0);
+          }
+          return `translate(${x2}, ${startY})`;
+        }).transition().duration(duration).ease(ease).attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const y2 = accessors.y(d.data);
+          return `translate(${x2}, ${y2})`;
+        });
+      }
     }
   } catch (error) {
     throw error;
@@ -15400,6 +15496,21 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
       }).notePadding(0).annotations(finalAnnotationList);
       if (true) svg.selectAll(".annotation-group").remove();
       let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType, barChart);
+      if (formatOptions.animation?.animationEnabled) {
+        const duration = formatOptions.animation.animationDuration;
+        const ease = effectsMap[formatOptions.animation.animationEffect];
+        const accessors = makeAnnotations.accessors();
+        annotations.selectAll(".annotation").attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const yScale = d.data?.y?.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+          const startY = yScale ? yScale(0) : 0;
+          return `translate(${x2}, ${startY})`;
+        }).transition().duration(duration).ease(ease).attr("transform", function(d) {
+          const x2 = accessors.x(d.data);
+          const y2 = accessors.y(d.data);
+          return `translate(${x2}, ${y2})`;
+        });
+      }
     }
   } catch (error) {
     throw error;
@@ -16143,7 +16254,7 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
       const group2 = select$2(this);
       let markers = group2.selectAll("path").data(groupData.data);
       let markersEnter = markers.enter().append("path").attr("fill", (d) => d.markerColor);
-      markersEnter.merge(markers).attr("d", (d) => {
+      const mergedMarkers = markersEnter.merge(markers).attr("d", (d) => {
         return Symbol$1().type(Markershapes(d.markerShape)).size(d.markerSize * 50)();
       }).attr("visibility", (d) => {
         const hideByX = !xScale(d.dimension) && xScale(d.dimension) !== 0;
@@ -16211,6 +16322,26 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
           return `translate(${x2},${y2}) scale(1)`;
         });
       });
+      if (formatOptions.animation.animationEnabled) {
+        const duration = formatOptions.animation.animationDuration;
+        const ease = effectsMap[formatOptions.animation.animationEffect] ?? linear$2;
+        const xRange = xScale.range();
+        const xRangeMin = Math.min(xRange[0], xRange[1]);
+        const xRangeSpan = Math.max(xRange[0], xRange[1]) - xRangeMin;
+        const invertEase = (progress, steps = 100) => {
+          for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            if (ease(t) >= progress) return t;
+          }
+          return 1;
+        };
+        mergedMarkers.attr("opacity", 0).each(function(d) {
+          const x2 = xScale(d.dimension) ?? xRangeMin;
+          const fraction = xRangeSpan > 0 ? Math.max(0, Math.min(1, (x2 - xRangeMin) / xRangeSpan)) : 0;
+          const delay = invertEase(fraction) * duration;
+          select$2(this).transition().delay(delay).duration(0).attr("opacity", 1);
+        });
+      }
     });
   } catch (error) {
     logError$2(fileName$b, "lineMarkers", error);
@@ -17617,7 +17748,7 @@ const ColumnChart = ({
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
       );
-      const finalBars = bars;
+      const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
       finalBars.attr("y", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return d.value > 0 ? yScale(d.value) : yScale(0);
@@ -17695,6 +17826,7 @@ const ColumnChart = ({
       filteredDimension,
       xScale
     );
+    getChartType(filteredData);
     commonAnnotations(
       seriesData,
       xScale,
@@ -17746,7 +17878,6 @@ const ColumnChart = ({
       margin,
       innerHeight2
     );
-    getChartType(filteredData);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
@@ -17829,6 +17960,7 @@ const CustomColumnChart = ({
   let requiredData = [];
   let scrollPosition = 0;
   let visibleBars;
+  let annotationTimeoutId;
   let chartJSON = {
     dimensionList,
     chartType,
@@ -18334,13 +18466,10 @@ const CustomColumnChart = ({
       "transform",
       (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
     );
-    columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legendUniqueId)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
+    const bars = columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legendUniqueId)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
       const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
-      return d.value > 0 ? yScale(d.value) : yScale(0);
-    }).attr("height", (d) => {
-      const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
-      return Math.abs(yScale(d.value) - yScale(0));
-    }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
+      return yScale(0);
+    }).attr("height", 0).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
       "stroke",
       (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
     ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
@@ -18378,6 +18507,14 @@ const CustomColumnChart = ({
         seriesData.filter((e) => e.legend === d.legend)[0].properties
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+    finalBars.attr("y", (d) => {
+      const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+      return d.value > 0 ? yScale(d.value) : yScale(0);
+    }).attr("height", (d) => {
+      const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+      return Math.abs(yScale(d.value) - yScale(0));
+    });
     columnGroups.exit().remove();
   };
   const drawLineChart = (lineData) => {
@@ -18423,6 +18560,14 @@ const CustomColumnChart = ({
       "stroke-width",
       (d) => d.properties.lineStyle !== "None" ? d.properties.lineWidth : "0"
     );
+    if (formatOptions.animation.animationEnabled) {
+      lineGroupsEnter.merge(lineGroups).select("path").each(function() {
+        const path2 = select$2(this);
+        const totalLength = this.getTotalLength();
+        path2.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength);
+        path2.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("stroke-dashoffset", 0);
+      });
+    }
     lineGroups.exit().remove();
     lineMarkers(
       lines,
@@ -18463,6 +18608,10 @@ const CustomColumnChart = ({
       )
       // : yScaleRight((d as TDataPoint).value)
     ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+    const areaGeneratorStart = area().x(
+      (d) => xScale(d.dimension) ? xScale(d.dimension) : null
+    ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+    const enableAreaTransition = formatOptions.animation.animationEnabled;
     let areas = gTag.selectAll(".areas.parentGroup").data([1]);
     let focus = gTag.append("g").attr("class", "focusClass");
     areas = areas.enter().append("g").attr("class", "areas parentGroup").attr("clip-path", `url(#${chartId}-clip)`).merge(areas);
@@ -18477,8 +18626,13 @@ const CustomColumnChart = ({
     ).attr("class", "area parentGroup").attr(
       "fill",
       (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
-    ).style("fill-opacity", formatOptions.plotArea.fillOpacity);
-    areaGroupsEnter.merge(areaGroups).select("path").attr("d", (d) => areaGenerator(d.data)).attr(
+    ).style("fill-opacity", formatOptions.plotArea.fillOpacity).attr("d", (d) => enableAreaTransition ? areaGeneratorStart(d.data) : areaGenerator(d.data)).each(function(d) {
+      if (enableAreaTransition) {
+        select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d.data));
+      }
+    });
+    areaGroups.select("path").attr("d", (d) => areaGenerator(d.data));
+    areaGroupsEnter.merge(areaGroups).select("path").attr(
       "stroke",
       (d) => d.properties.areaBorderColor !== commonColors.white ? d.properties.areaBorderColor : "none"
     ).attr("stroke-dasharray", (d) => {
@@ -18539,6 +18693,10 @@ const CustomColumnChart = ({
     ).y1(
       (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
     ).defined((d) => d.hideZero ? Boolean(d.key) : true).curve(getCurveType(formatOptions));
+    const stackAreaGeneratorStart = area().x(
+      (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
+    ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined((d) => d.hideZero ? Boolean(d.key) : true).curve(getCurveType(formatOptions));
+    const enableStackAreaTransition = formatOptions.animation.animationEnabled;
     let areas = gTag.selectAll(".parentGroup").data([stackAreaData]);
     gTag.append("g").attr("class", "focusClass");
     areas = areas.enter().append("g").attr("class", "areas parentGroup").attr("clip-path", `url(#${chartId}-clip)`).merge(areas);
@@ -18547,8 +18705,13 @@ const CustomColumnChart = ({
     areaGroupsEnter.append("path").attr(
       "hoverId",
       (d) => (data2.data.filter((e) => e.legend === d.key)[0].properties.alias || data2.data.filter((e) => e.legend === d.key)[0].properties.name || "Legend").replace(/\s+/g, "-")
-    ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none");
-    areaGroupsEnter.merge(areaGroups).select("path").attr("d", (d, i) => areaGenerator(d)).style("opacity", formatOptions.plotArea.fillOpacity).attr(
+    ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").attr("d", (d) => enableStackAreaTransition ? stackAreaGeneratorStart(d) : areaGenerator(d)).each(function(d) {
+      if (enableStackAreaTransition) {
+        select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d));
+      }
+    });
+    areaGroups.select("path").attr("d", (d) => areaGenerator(d));
+    areaGroupsEnter.merge(areaGroups).select("path").style("opacity", formatOptions.plotArea.fillOpacity).attr(
       "stroke",
       (d) => d.color !== commonColors.white ? d.color : "none"
     ).attr(
@@ -18585,19 +18748,24 @@ const CustomColumnChart = ({
     let stackColumnGroupsEnter = stackColumnGroups.enter().append("g").attr("class", (d) => "stackcolumns-group ");
     stackColumnGroups = stackColumnGroupsEnter.merge(stackColumnGroups);
     let rects = stackColumnGroups.selectAll("rect").data((d) => d);
-    rects.enter().append("rect").attr(
-      "transform",
-      (d) => `translate(${xScale(d.data.dimension) - columnWidth / 2},0)`
-    ).merge(rects).attr(
-      "hoverId",
-      (d) => d.alias.includes("~$~") ? d.alias.split("~$~")[1].replace(/ /g, "-") : d.alias.replace(/ /g, "-")
-    ).attr("x", (d) => xScaleForLegends(chartTypes.StackColumnChart)).attr(
+    rects.attr(
       "y",
       (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
     ).attr(
       "height",
       (d) => d.data.axis === axisTypes.primary ? customYaxisMaxValue && d[1] > customYaxisMaxValue ? yScaleLeft(d[0]) - yScaleLeft(customYaxisMaxValue) : yScaleLeft(d[0]) - yScaleLeft(d[1]) : secondaryCustomYaxisMaxValue && d[1] > secondaryCustomYaxisMaxValue ? yScaleRight(d[0]) - yScaleRight(secondaryCustomYaxisMaxValue) : yScaleRight(d[0]) - yScaleRight(d[1])
-    ).attr("width", xScaleForLegends.bandwidth()).attr("fill", (d, i, nodes) => {
+    );
+    const rectsEnter = rects.enter().append("rect").attr(
+      "transform",
+      (d) => `translate(${xScale(d.data.dimension) - columnWidth / 2},0)`
+    ).attr(
+      "y",
+      (d) => d.data.axis === axisTypes.primary ? yScaleLeft(0) : yScaleRight(0)
+    ).attr("height", 0);
+    rectsEnter.merge(rects).attr(
+      "hoverId",
+      (d) => d.alias.includes("~$~") ? d.alias.split("~$~")[1].replace(/ /g, "-") : d.alias.replace(/ /g, "-")
+    ).attr("x", (d) => xScaleForLegends(chartTypes.StackColumnChart)).attr("width", xScaleForLegends.bandwidth()).attr("fill", (d, i, nodes) => {
       const seriesIndex = Array.from(seriesData).findIndex(
         (sdata) => sdata.legend === d.key
       );
@@ -18644,6 +18812,14 @@ const CustomColumnChart = ({
         seriesData.filter((e) => e.legend === d.key)[0].properties
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    const finalStackRects = formatOptions.animation.animationEnabled ? rectsEnter.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : rectsEnter;
+    finalStackRects.attr(
+      "y",
+      (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
+    ).attr(
+      "height",
+      (d) => d.data.axis === axisTypes.primary ? customYaxisMaxValue && d[1] > customYaxisMaxValue ? yScaleLeft(d[0]) - yScaleLeft(customYaxisMaxValue) : yScaleLeft(d[0]) - yScaleLeft(d[1]) : secondaryCustomYaxisMaxValue && d[1] > secondaryCustomYaxisMaxValue ? yScaleRight(d[0]) - yScaleRight(secondaryCustomYaxisMaxValue) : yScaleRight(d[0]) - yScaleRight(d[1])
+    );
     stackColumnGroups.exit().remove();
   };
   const setSVGContainer = (margin2) => {
@@ -18721,48 +18897,60 @@ const CustomColumnChart = ({
       filteredDimension,
       xScale
     );
-    commonAnnotationsForCustomChart(
-      filteredData,
-      xScale,
-      yScaleLeft,
-      yScaleRight,
-      // need to pass secondary axis scale if secondary axis is drawn
-      margin,
-      d3Annotation,
-      stackColumnData,
-      stackAreaData,
-      [],
-      //labelExcludeList
-      [],
-      // individualLabelColor
-      columnWidth,
-      // [], //old annotation list
-      formatOptions,
-      height,
-      width,
-      innerWidth2,
-      filteredDimension,
-      innerHeight2,
-      chartId,
-      svg,
-      onDataLabelCoordinatesChange,
-      xScaleForLegends,
-      isReportEditable
-    );
-    addTotalValue(
-      totalValueMap,
-      xScale,
-      yScaleLeft,
-      margin,
-      d3Annotation,
-      [],
-      formatOptions,
-      chartType,
-      height,
-      width,
-      svg,
-      isReportEditable
-    );
+    clearTimeout(annotationTimeoutId);
+    const renderAnnotationsAndTotals = () => {
+      commonAnnotationsForCustomChart(
+        filteredData,
+        xScale,
+        yScaleLeft,
+        yScaleRight,
+        // need to pass secondary axis scale if secondary axis is drawn
+        margin,
+        d3Annotation,
+        stackColumnData,
+        stackAreaData,
+        [],
+        //labelExcludeList
+        [],
+        // individualLabelColor
+        columnWidth,
+        // [], //old annotation list
+        formatOptions,
+        height,
+        width,
+        innerWidth2,
+        filteredDimension,
+        innerHeight2,
+        chartId,
+        svg,
+        onDataLabelCoordinatesChange,
+        xScaleForLegends,
+        isReportEditable
+      );
+      addTotalValue(
+        totalValueMap,
+        xScale,
+        yScaleLeft,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable
+      );
+    };
+    if (formatOptions.animation.animationEnabled) {
+      svg.selectAll(".annotation-group").remove();
+      annotationTimeoutId = setTimeout(
+        renderAnnotationsAndTotals,
+        formatOptions.animation.animationDuration
+      );
+    } else {
+      renderAnnotationsAndTotals();
+    }
   };
   const createStackData = (requiredStackChatData) => {
     let legendList = requiredStackChatData.data.map((d) => d.legend);
@@ -18894,7 +19082,6 @@ const LayeredColumnChart = ({
   let yScaleLeft;
   let yScaleRight;
   let xScale;
-  let xScaleForLegends;
   let calculatedRange;
   let yAxisLeft;
   let xAxis;
@@ -19150,7 +19337,7 @@ const LayeredColumnChart = ({
     calculatedRange = [0, innerWidth2];
   };
   const getXScale = () => {
-    xScaleForLegends = band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
+    band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
       chartJSON.legendList.length > 1 ? 0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth) / 100 : 0
     );
     xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
@@ -19209,15 +19396,12 @@ const LayeredColumnChart = ({
       });
     });
     lineData.forEach((data2, index2) => {
-      let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.properties.legendUniqueId);
-      column = column.enter().append("g").attr("class", `column parentGroup`).attr("clip-path", `url(#${chartId}-clip)`).merge(column);
-      let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.properties.legendUniqueId);
+      let column = gTag.selectAll(`.parentGroup-${data2.properties.legendUniqueId}`).data([data2], (d) => d.properties.legendUniqueId);
+      column = column.enter().append("g").attr("class", `column parentGroup parentGroup-${data2.properties.legendUniqueId}`).attr("clip-path", `url(#${chartId}-clip)`).merge(column);
+      let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.dimension + "_" + data2.properties.legendUniqueId);
       let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
         "hoverId",
-        (data2.properties.alias || data2.properties.name || "Legend").replace(
-          /\s+/g,
-          "-"
-        )
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")
       ).attr(
         "transform",
         (d) => index2 === 0 ? `translate(${xScale(d.dimension) - columnWidth / 2}, 0)` : `translate(${xScale(d.dimension) - columnWidth / (2 + index2 * 2)}, 0)`
@@ -19230,22 +19414,38 @@ const LayeredColumnChart = ({
         "transform",
         (d) => index2 === 0 ? `translate(${xScale(d.dimension) - columnWidth / 2}, 0)` : `translate(${xScale(d.dimension) - columnWidth / (2 + index2 * 2)}, 0)`
       );
-      columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.dimension)).attr("width", index2 === 0 ? columnWidth : columnWidth / 2 + index2 * 2).attr("y", (d) => {
-        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
-        return d.value > 0 ? yScale(d.value) : yScale(0);
-      }).attr("height", (d) => {
+      const bars = columnGroupsEnter.append("rect").attr("x", () => 0).attr("width", index2 === 0 ? columnWidth : columnWidth / 2 + index2 * 2).attr("y", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
-        return Math.abs(yScale(d.value) - yScale(0));
-      }).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
+        return yScale(0);
+      }).attr("height", 0).attr(
+        "fill",
+        (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color
+      ).attr(
         "stroke-dasharray",
-        (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
-      ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
+        () => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
         () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-      ).on("mousemove", (event2, d) => {
+      );
+      const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+      finalBars.attr("y", (d) => {
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+        return d.value > 0 ? yScale(d.value) : yScale(0);
+      }).attr("height", (d) => {
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+        return Math.abs(yScale(d.value) - yScale(0));
+      });
+      columnGroups.select("rect").transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("y", (d) => {
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+        return d.value > 0 ? yScale(d.value) : yScale(0);
+      }).attr("height", (d) => {
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
+        return Math.abs(yScale(d.value) - yScale(0));
+      });
+      columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -19287,6 +19487,7 @@ const LayeredColumnChart = ({
       });
       columnGroups.exit().remove();
     });
+    gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
     innerWidth2 = width - margin2.left - margin2.right;
@@ -19779,7 +19980,7 @@ const StackColumnChart = ({
     }).on("mouseout", (event2, d) => {
       hideTooltipOnMouseOut();
     });
-    const finalRects = baseRects;
+    const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : baseRects;
     finalRects.attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
@@ -20515,7 +20716,8 @@ const NormalizedStackColumnChart = ({
       const { props } = getPropsForRect(nodes, i);
       return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
     });
-    const applyTransition = (sel) => sel;
+    const shouldAnimate = formatOptions.animation.animationEnabled;
+    const applyTransition = (sel) => shouldAnimate ? sel.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : sel;
     applyTransition(rectsEnter).attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
     rectsEnter.merge(rects).on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
@@ -21322,6 +21524,15 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
     }).annotations(finalAnnotationList);
     const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
     annotations.selectAll("rect,.annotation-subject").remove();
+    if (formatOptions.animation?.animationEnabled) {
+      const duration = formatOptions.animation.animationDuration;
+      const ease = effectsMap[formatOptions.animation.animationEffect];
+      const labels = annotations.selectAll(".annotation-note-label");
+      labels.interrupt().style("opacity", 0);
+      setTimeout(() => {
+        labels.transition().delay((d, i) => i * 30).duration(duration).ease(ease).style("opacity", 1);
+      }, 50);
+    }
     annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
       "stroke-dasharray",
       connectedStyle2[formatOptions.plotArea.connectorStyle?.toLowerCase()]
@@ -21753,7 +21964,8 @@ const ColumnHistogramChart = ({
     formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
   };
   const getChartType = (lineData) => {
-    gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
+    const shouldAnimate = formatOptions.animation.animationEnabled;
+    const bars = gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
       "stroke",
       formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor
     ).attr(
@@ -21763,12 +21975,10 @@ const ColumnHistogramChart = ({
       "stroke-opacity",
       formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity
     ).attr("x", 1).attr("transform", function(d) {
-      return "translate(" + xScale(d.x0) + "," + (yScaleLeft(d.length) > 0 ? yScaleLeft(d.length) : 0) + ")";
+      return "translate(" + xScale(d.x0) + "," + innerHeight2 + ")";
     }).attr("width", function(d) {
       return xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth) < 0 ? 0 : xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth);
-    }).attr("height", function(d) {
-      return innerHeight2 - yScaleLeft(d.length);
-    }).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+    }).attr("height", 0).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [
           {
@@ -21790,6 +22000,12 @@ const ColumnHistogramChart = ({
         event2
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    const finalBars = shouldAnimate ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+    finalBars.attr("transform", function(d) {
+      return "translate(" + xScale(d.x0) + "," + (yScaleLeft(d.length) > 0 ? yScaleLeft(d.length) : 0) + ")";
+    }).attr("height", function(d) {
+      return innerHeight2 - yScaleLeft(d.length);
+    });
     gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
@@ -22297,6 +22513,8 @@ const LineChart = ({
     ).defined(
       (d) => d.hideZero || chartJSON.hideZeroValues ? Boolean(d.value) : true
     ).curve(getCurveType(formatOptions));
+    const shouldAnimate = formatOptions.animation.animationEnabled;
+    const applyTransition = (sel) => shouldAnimate ? sel.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : sel;
     let lines = gTag.selectAll(".parentGroup").data([reversedLineData]);
     lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
     let lineGroups = lines.selectAll(".line-group").data((d) => d);
@@ -22304,7 +22522,7 @@ const LineChart = ({
     lineGroupsEnter.append("path").attr("class", "visibleLine").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d) {
       const g = select$2(this);
-      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", (d2) => lineGenerator(d2.data)).attr(
+      const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", (d2) => lineGenerator(d2.data)).attr(
         "stroke",
         (d2) => d2.properties.color !== commonColors.white ? d2.properties.color : "none"
       ).attr("stroke-dasharray", (d2) => {
@@ -22327,6 +22545,14 @@ const LineChart = ({
         "hoverId",
         (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-")
       ).attr("clip-path", `url(#${chartId}-clip)`).attr("d", (d2) => lineGenerator(d2.data));
+      if (shouldAnimate) {
+        pathSel.each(function() {
+          const path2 = select$2(this);
+          const totalLength = this.getTotalLength();
+          path2.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength);
+          applyTransition(path2).attr("stroke-dashoffset", 0);
+        });
+      }
     });
     lineGroups.exit().remove();
     lineMarkers(
@@ -22857,7 +23083,13 @@ const StackLineChart = ({
         "stroke-width",
         seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
       ).attr("fill", "none");
-      pathSel.node().getTotalLength();
+      const enableTransition = formatOptions.animation.animationEnabled;
+      const totalLength = pathSel.node().getTotalLength();
+      if (enableTransition) {
+        pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("stroke-dashoffset", 0);
+      } else {
+        pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", 0);
+      }
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", commonColors.transparent).attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
@@ -23361,7 +23593,7 @@ const NormalisedStackLineChart = ({
     ).append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d, i) {
       const g = select$2(this);
-      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== commonColors.white ? d.color : "none").attr("stroke-dasharray", (d2) => {
+      const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== commonColors.white ? d.color : "none").attr("stroke-dasharray", (d2) => {
         const lineWidth = parseInt(
           seriesData[i].properties.lineWidth.toString()
         );
@@ -23380,6 +23612,13 @@ const NormalisedStackLineChart = ({
         "stroke-width",
         seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
       ).attr("fill", "none");
+      const enableTransition = formatOptions.animation.animationEnabled;
+      const totalLength = pathSel.node().getTotalLength();
+      if (enableTransition) {
+        pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("stroke-dashoffset", 0);
+      } else {
+        pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", 0);
+      }
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", commonColors.transparent).attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
@@ -23969,7 +24208,7 @@ const HorizontalBarChart = ({
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
       );
-      const finalBars = bars;
+      const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
       finalBars.attr("x", (d) => {
         const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
         return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(d.value);
@@ -24492,7 +24731,7 @@ const StackHorizontalChart = ({
       hideTooltipOnMouseOut();
     });
     baseRects.attr("x", (d) => xScaleBottom(0));
-    const finalRects = baseRects;
+    const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : baseRects;
     finalRects.attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
@@ -25195,7 +25434,7 @@ const NormalizedStackHorizontalBarChart = ({
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       hideTooltipOnMouseOut();
     });
-    const finalRects = baseRects;
+    const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : baseRects;
     finalRects.attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
@@ -25339,7 +25578,6 @@ const LayeredHorizontalBarChart = ({
   let gTag;
   let xScaleBottom;
   let yScale;
-  let yScaleLegend;
   let calculatedRange;
   let xAxisBottom;
   let yAxis;
@@ -25579,7 +25817,7 @@ const LayeredHorizontalBarChart = ({
     getYScale();
   };
   const getYScale = () => {
-    yScaleLegend = band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
+    band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
       chartJSON.legendList.length > 1 ? 0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth) / 100 : 0
     );
     yScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
@@ -25626,58 +25864,63 @@ const LayeredHorizontalBarChart = ({
       });
     });
     lineData.forEach((data2, index2) => {
-      let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.properties.legendUniqueId);
-      column = column.enter().append("g").attr("class", `column parentGroup`).attr("clip-path", `url(#${chartId}-clip)`).merge(column);
-      let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.properties.legendUniqueId);
+      let column = gTag.selectAll(`.parentGroup-${data2.properties.legendUniqueId}`).data([data2], (d) => d.properties.legendUniqueId);
+      column = column.enter().append("g").attr("class", `column parentGroup parentGroup-${data2.properties.legendUniqueId}`).attr("clip-path", `url(#${chartId}-clip)`).merge(column);
+      let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.dimension + "_" + data2.properties.legendUniqueId);
       let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
         "hoverId",
-        (data2.properties.alias || data2.properties.name || "Legend").replace(
-          /\s+/g,
-          "-"
-        )
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")
       ).attr(
         "transform",
-        (d) => index2 === 0 ? `translate(0,${yScale(d.dimension) - columnWidth / 2})` : `translate(0,${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
+        (d) => index2 === 0 ? `translate(0, ${yScale(d.dimension) - columnWidth / 2})` : `translate(0, ${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
       );
       columnGroups.attr(
         "transform",
-        (d) => index2 === 0 ? `translate(0,${yScale(d.dimension) - columnWidth / 2})` : `translate(0,${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
+        (d) => index2 === 0 ? `translate(0, ${yScale(d.dimension) - columnWidth / 2})` : `translate(0, ${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
       );
       columnGroupsEnter.merge(columnGroups).attr(
         "transform",
-        (d) => index2 === 0 ? `translate(0,${yScale(d.dimension) - columnWidth / 2})` : `translate(0,${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
+        (d) => index2 === 0 ? `translate(0, ${yScale(d.dimension) - columnWidth / 2})` : `translate(0, ${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
       );
-      columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegend(d.dimension)).attr("height", index2 === 0 ? columnWidth : columnWidth / 2).attr("x", (d) => {
-        return d.value > 0 ? xScaleBottom(0) : xScaleBottom(d.value);
-      }).attr(
-        "width",
-        (d) => d.value > 0 ? customYaxisMaxValue && d.value > customYaxisMaxValue ? xScaleBottom(customYaxisMaxValue) - xScaleBottom(0) : xScaleBottom(d.value) - xScaleBottom(0) : Math.abs(xScaleBottom(0) - xScaleBottom(d.value))
-      ).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
+      const bars = columnGroupsEnter.append("rect").attr("y", 0).attr("height", index2 === 0 ? columnWidth : columnWidth / 2).attr("x", () => xScaleBottom(0)).attr("width", 0).attr(
+        "fill",
+        (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color
+      ).attr(
         "stroke-dasharray",
-        (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        () => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-      ).on("mousemove", (event2, d) => {
+      );
+      const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+      finalBars.attr(
+        "x",
+        (d) => d.value > 0 ? xScaleBottom(0) : xScaleBottom(d.value)
+      ).attr(
+        "width",
+        (d) => d.value > 0 ? xScaleBottom(d.value) - xScaleBottom(0) : Math.abs(xScaleBottom(0) - xScaleBottom(d.value))
+      );
+      columnGroups.select("rect").transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr(
+        "x",
+        (d) => d.value > 0 ? xScaleBottom(0) : xScaleBottom(d.value)
+      ).attr(
+        "width",
+        (d) => d.value > 0 ? xScaleBottom(d.value) - xScaleBottom(0) : Math.abs(xScaleBottom(0) - xScaleBottom(d.value))
+      );
+      columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
               key: formatOptions.xAxisTitle.xAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.xAxisTitle.xAxisTitleHTML, "text/html").body.textContent?.trim() : formatOptions.xAxisTitle.xAxisTitleText.includes("~$~") ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1] : formatOptions.xAxisTitle.xAxisTitleText,
-              value: chartJSON.formattedDimensionListMap.get(
-                Array.isArray(d.dimension) ? d.dimension[0] : d.dimension
-              )
+              value: chartJSON.formattedDimensionListMap.get(d.dimension)
             },
             {
-              key: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : d.properties?.currentMeasure ? d.properties.currentMeasure : formatOptions.yAxisTitle.yAxisTitleText || d.value,
+              key: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : d.properties?.currentMeasure || formatOptions.yAxisTitle.yAxisTitleText || d.value,
               value: getNumberWithFormat(
-                [
-                  chartTypes.NormalizedStackLineChart,
-                  chartTypes.NormalizedStackAreaChart,
-                  ""
-                ].includes(chartType) ? d[1] - d[0] : d.value,
+                d.value,
                 formatOptions.toolTip.toolTipDisplayUnits,
                 formatOptions.toolTip.toolTipNumberFormat,
                 formatOptions.toolTip.toolTipDecimalPrecision
@@ -25692,13 +25935,7 @@ const LayeredHorizontalBarChart = ({
           event2,
           data2.properties
         );
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
-      }).on("mouseout", (e, d) => {
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
+      }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
       columnGroups.exit().remove();
@@ -26385,7 +26622,8 @@ const HorizontalHistogramChart = ({
     formatOptions.bins.binsCalculation === "Automatic" ? yAxisLeft.ticks(thresholds) : yAxisLeft.tickValues(periods).ticks(innerHeight2 / 50);
   };
   const getChartType = (lineData) => {
-    gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
+    const shouldAnimate = formatOptions.animation.animationEnabled;
+    const bars = gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
       "stroke",
       formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor
     ).attr(
@@ -26403,7 +26641,7 @@ const HorizontalHistogramChart = ({
       const y12 = yScaleLeft(d.x1);
       const gap = parseFloat(formatOptions.bins.binsGapWidth) || 0;
       return Math.max(1, Math.abs(y12 - y02) - gap);
-    }).attr("width", (d) => xScale(d.length)).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+    }).attr("width", 0).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [
           {
@@ -26425,6 +26663,8 @@ const HorizontalHistogramChart = ({
         event2
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    const finalBars = shouldAnimate ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+    finalBars.attr("width", (d) => xScale(d.length));
     gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
@@ -26920,6 +27160,7 @@ const AreaChart = ({
     const areaGeneratorStart = area().x(
       (d) => xScale(d.dimension) ? xScale(d.dimension) : null
     ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+    const enableTransition = formatOptions.animation.animationEnabled;
     let areas = gTag.selectAll(".parentGroup").data([lineData]);
     let focus = gTag.append("g").attr("class", "focusClass");
     areas = areas.enter().append("g").attr("class", "areas lineGroup").attr("clip-path", `url(#${chartId}-clip)`).merge(areas);
@@ -26935,7 +27176,9 @@ const AreaChart = ({
         "-"
       )
     ).attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
-      {
+      if (enableTransition) {
+        select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d.data));
+      } else {
         select$2(this).attr("d", areaGenerator(d.data));
       }
     });
@@ -27456,6 +27699,7 @@ const StackAreaChart = ({
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
+    const enableTransition = formatOptions.animation.animationEnabled;
     const isLinesAndMarkersVisible = formatOptions.plotArea.plotAreaHideLineAndMarkers;
     lineData.forEach((lData) => {
       lData.data.forEach((cData) => {
@@ -27482,7 +27726,9 @@ const StackAreaChart = ({
       "hoverId",
       (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
     ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
-      {
+      if (enableTransition) {
+        select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d));
+      } else {
         select$2(this).attr("d", areaGenerator(d));
       }
     });
@@ -28011,6 +28257,7 @@ const NormalizedStackAreaChart = ({
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
+    const enableTransition = formatOptions.animation.animationEnabled;
     const isLinesAndMarkersVisible = formatOptions.plotArea.plotAreaHideLineAndMarkers;
     stackChartData.forEach(
       (data2, i) => data2.forEach((item, position) => {
@@ -28045,7 +28292,9 @@ const NormalizedStackAreaChart = ({
       (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")
     ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
       const path2 = select$2(this);
-      {
+      if (enableTransition) {
+        path2.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", columnGenerator(d));
+      } else {
         path2.attr("d", columnGenerator(d));
       }
     });
@@ -28480,13 +28729,13 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
     try {
       const arc2 = arc$1().innerRadius(0).outerRadius(radius);
       const arcOver = arc$1().innerRadius(0).outerRadius(radius + 10);
-      chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path").attr(
+      const paths = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path").attr(
         "hoverId",
         (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
       ).attr(
         "fill",
         (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
-      ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
+      ).on("mouseover.arc", function(d) {
         select$2(this).transition().duration(100).attr("d", arcOver);
       }).on("mousemove. ", (d) => {
         showTooltipOnMouseMove(
@@ -28517,6 +28766,17 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
         select$2(this).transition().duration(100).attr("d", arc2);
         hideTooltipOnMouseOut();
       });
+      if (chartFormatOptions.animation.animationEnabled) {
+        paths.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", function(d) {
+          const interpolate2 = interpolate$4(
+            { startAngle: d.startAngle, endAngle: d.startAngle },
+            d
+          );
+          return (t) => arc2(interpolate2(t));
+        });
+      } else {
+        paths.attr("d", (d) => arc2(d));
+      }
     } catch (error) {
       logError$2(fileName$8, "drawPieChart", error);
     }
@@ -28889,7 +29149,7 @@ const DonutChart = ({
   };
   const drawDonutChart = () => {
     try {
-      const enableTransition = false;
+      const enableTransition = chartFormatOptions.animation.animationEnabled;
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
       const arcOver = arc$1().innerRadius(innerRadius).outerRadius(radius + 10);
       const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
@@ -28903,8 +29163,9 @@ const DonutChart = ({
         const thisPath = d;
         thisPath._current = { startAngle: 0, endAngle: 0 };
       }).on("mouseover.arc", function() {
-        if (enableTransition) ;
-        else {
+        if (enableTransition) {
+          select$2(this).transition().duration(150).attr("d", arcOver);
+        } else {
           select$2(this).attr("d", arcOver);
         }
       }).on("mousemove.text", (d) => {
@@ -28931,13 +29192,23 @@ const DonutChart = ({
           d.currentTarget.__data__.data.properties
         );
       }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
-        if (enableTransition) ;
-        else {
+        if (enableTransition) {
+          select$2(this).transition().duration(150).attr("d", arc2);
+        } else {
           select$2(this).attr("d", arc2);
         }
       });
-      if (enableTransition) ;
-      else {
+      if (enableTransition) {
+        paths.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", function(d) {
+          const interpolate2 = interpolate$4(
+            { startAngle: d.startAngle, endAngle: d.startAngle },
+            d
+          );
+          return function(t) {
+            return arc2(interpolate2(t));
+          };
+        });
+      } else {
         paths.attr("d", (d) => arc2(d));
       }
     } catch (error) {
@@ -29385,8 +29656,9 @@ const Treemap = ({ data, formatOptions, chartId }) => {
   };
   const initChartRect = () => {
     try {
+      const shouldAnimate = chartFormatOptions.animation.animationEnabled;
       const leaf = chartAreaTagG.selectAll("g").data(chartData).enter().append("g").attr("transform", (d) => `translate(${d.x0},${d.y0})`);
-      leaf.append("rect").attr("fill", (d) => getColor(d.data)).attr("fill-opacity", 0.7).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0).on("mousemove", (d, data2) => {
+      const rects = leaf.append("rect").attr("fill", (d) => getColor(d.data)).attr("fill-opacity", shouldAnimate ? 0 : 0.7).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0).on("mousemove", (d, data2) => {
         showTooltipOnMouseMove(
           [
             {
@@ -29404,6 +29676,9 @@ const Treemap = ({ data, formatOptions, chartId }) => {
           getMarkerColorForTooltip(d)
         );
       }).on("mouseout", () => hideTooltipOnMouseOut());
+      if (shouldAnimate) {
+        rects.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("fill-opacity", 0.7);
+      }
       leaf.append("clipPath").attr("id", (d, i) => `clip-${i}-${chartId}`).append("rect").attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
       if (chartFormatOptions.plotArea.dataLabels) {
         leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
@@ -29564,10 +29839,10 @@ const PieofPie = ({
     try {
       const arc2 = arc$1().innerRadius(0).outerRadius(radius);
       const arcOver = arc$1().innerRadius(0).outerRadius(radius + 10);
-      chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getParentPiePosition()}`).selectAll("path").data(pieOfPieData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
+      const paths = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getParentPiePosition()}`).selectAll("path").data(pieOfPieData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
         "fill",
         (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
-      ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
+      ).on("mouseover.arc", function(d) {
         select$2(this).transition().duration(100).attr("d", arcOver);
       }).on("mousemove.text", (d) => {
         showTooltipOnMouseMove(
@@ -29612,14 +29887,25 @@ const PieofPie = ({
           logError$2(fileName$5, "drawPieChart_onClick", error);
         }
       });
+      if (chartFormatOptions.animation.animationEnabled) {
+        paths.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", function(d) {
+          const interpolate2 = interpolate$4(
+            { startAngle: d.startAngle, endAngle: d.startAngle },
+            d
+          );
+          return (t) => arc2(interpolate2(t));
+        });
+      } else {
+        paths.attr("d", (d) => arc2(d));
+      }
     } catch (error) {
       logError$2(fileName$5, "drawPieChart", error);
     }
   };
   const drawChildPie = (childData, rotate2, parentArc) => {
     try {
-      chartAreaTagG.select(".parentGroup").transition().attr("transform", `${getParentPiePosition()} rotate(${rotate2})`).duration(1e3);
-      chartAreaTagG.selectAll(".parentLabels").transition().attr("transform", `${getParentPiePosition()} rotate(${rotate2})`).duration(1e3);
+      chartAreaTagG.select(".parentGroup").transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("transform", `${getParentPiePosition()} rotate(${rotate2})`);
+      chartAreaTagG.selectAll(".parentLabels").transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("transform", `${getParentPiePosition()} rotate(${rotate2})`);
       const childPie = pie().value((d) => d.data[0].value);
       let childPieData = childPie(childData).map((d, i) => ({
         ...d,
@@ -29847,8 +30133,8 @@ const PieofPie = ({
       let radius2 = angleData.y1;
       let y2 = radius2 * Math.sin(arcAngle);
       let x2 = y2 / Math.tan(arcAngle);
-      chartAreaTagG.append("line").transition().style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor).style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth).style("stroke-dasharray", "3, 3").attr("opacity", 0.5).attr("x1", parentPieX + x2).attr("y1", parentPieY - y2).attr("x2", childPieX).attr("y2", childPieY - childRadius).duration(1e3);
-      chartAreaTagG.append("line").transition().style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor).style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth).style("stroke-dasharray", "3, 3").attr("opacity", 0.5).attr("x1", parentPieX + x2).attr("y1", parentPieY + y2).attr("x2", childPieX).attr("y2", childPieY + childRadius).duration(1e3);
+      chartAreaTagG.append("line").style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor).style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth).style("stroke-dasharray", "3, 3").attr("opacity", 0.5).attr("x1", parentPieX + x2).attr("y1", parentPieY - y2).attr("x2", childPieX).attr("y2", childPieY - childRadius);
+      chartAreaTagG.append("line").style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor).style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth).style("stroke-dasharray", "3, 3").attr("opacity", 0.5).attr("x1", parentPieX + x2).attr("y1", parentPieY + y2).attr("x2", childPieX).attr("y2", childPieY + childRadius);
     } catch (error) {
       logError$2(fileName$5, "drawLines", error);
     }
@@ -29988,7 +30274,8 @@ const PyramidChart = ({
           const bottomWidth = pyramidSide * (inversionConstant - stackHeightArray[i + 1] / pyramidHeight);
           const centerX = innerWidth2 / 2;
           const pyramidContainer = chartAreaTagG.append("g").attr("id", "PyramidChart").attr("class", "parentGroup");
-          pyramidContainer.append("polygon").attr("class", "segment").attr("hoverId", d.legend.replace(/\s+/g, "-")).attr(
+          const shouldAnimate = chartFormatOptions.animation.animationEnabled;
+          const polygon = pyramidContainer.append("polygon").attr("class", "segment").attr("hoverId", d.legend.replace(/\s+/g, "-")).attr(
             "points",
             `
                 ${centerX - topWidth / 2},${yTop}
@@ -29996,7 +30283,7 @@ const PyramidChart = ({
                 ${centerX + bottomWidth / 2},${yBottom}
                 ${centerX - bottomWidth / 2},${yBottom}
               `
-          ).attr("fill", d.properties.color || "#4cb2ff").on("mousemove", function() {
+          ).attr("fill", d.properties.color || "#4cb2ff").attr("opacity", shouldAnimate ? 0 : 1).on("mousemove", function() {
             try {
               showTooltipOnMouseMove(
                 [
@@ -30029,6 +30316,9 @@ const PyramidChart = ({
               logError$2(fileName$4, "drawPyramidChart.onMouseOut", error);
             }
           });
+          if (shouldAnimate) {
+            polygon.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+          }
         } catch (error) {
           logError$2(fileName$4, "drawPyramidChart.forEach", error);
         }
@@ -30430,7 +30720,7 @@ const ProgressChart = ({
       }).attr(
         "transform",
         "translate(" + innerWidth2 / 2 + "," + innerHeight2 / 2 + ")"
-      ).transition().duration(1e3).attrTween("d", function(d) {
+      ).transition().duration(chartFormatOptions.animation.animationEnabled ? chartFormatOptions.animation.animationDuration : 0).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", function(d) {
         try {
           const interpolate2 = interpolate$4(0, progressAngle);
           return function(t) {
@@ -30838,7 +31128,7 @@ const Speedometer = ({
               }
               let ratio = scale2(newValue);
               let newAngle = config.minAngle + ratio * range2;
-              pointer2.transition().duration(config.transitionMs).ease(elasticOut$1).attr("transform", "rotate(" + newAngle + ")");
+              pointer2.transition().duration(chartFormatOptions.animation.animationEnabled ? chartFormatOptions.animation.animationDuration : 0).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("transform", "rotate(" + newAngle + ")");
             } catch (error) {
               logError$2(fileName2, "gauge.update", error);
             }
@@ -31255,9 +31545,7 @@ const RadialBarChart = ({
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
-      arcs.transition().delay(
-        (d, i) => chartFormatOptions.plotArea.arcTransition ? i * 200 : 0
-      ).duration(chartFormatOptions.plotArea.arcTransition ? 500 : 0).attrTween("d", arcTween);
+      arcs.transition().duration(chartFormatOptions.animation.animationEnabled ? chartFormatOptions.animation.animationDuration : 0).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", arcTween);
       if (chartFormatOptions.plotArea.dataLabels) {
         const labelsData = getModifiedDataForLabels(ChartData);
         svg2.selectAll(".arc-label-" + chartId).data(labelsData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(d.index ?? i) - getInnerRadius(d.index ?? i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${d.index ?? i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
@@ -31647,11 +31935,11 @@ function requireD3Cloud() {
     return false;
   }
   function cloudBounds(bounds, d) {
-    var b0 = bounds[0], b1 = bounds[1];
-    if (d.x + d.x0 < b0.x) b0.x = d.x + d.x0;
-    if (d.y + d.y0 < b0.y) b0.y = d.y + d.y0;
-    if (d.x + d.x1 > b1.x) b1.x = d.x + d.x1;
-    if (d.y + d.y1 > b1.y) b1.y = d.y + d.y1;
+    var b02 = bounds[0], b12 = bounds[1];
+    if (d.x + d.x0 < b02.x) b02.x = d.x + d.x0;
+    if (d.y + d.y0 < b02.y) b02.y = d.y + d.y0;
+    if (d.x + d.x1 > b12.x) b12.x = d.x + d.x1;
+    if (d.y + d.y1 > b12.y) b12.y = d.y + d.y1;
   }
   function collideRects(a2, b) {
     return a2.x + a2.x1 > b[0].x && a2.x + a2.x0 < b[1].x && a2.y + a2.y1 > b[0].y && a2.y + a2.y0 < b[1].y;
@@ -32329,8 +32617,8 @@ function addMissingAreas(areas) {
       pairs[[b, a2]] = true;
     }
   }
-  ids.sort(function(a3, b2) {
-    return a3 > b2;
+  ids.sort(function(a3, b10) {
+    return a3 > b10;
   });
   for (i = 0; i < ids.length; ++i) {
     a2 = ids[i];
@@ -54374,7 +54662,8 @@ const BubbleChart = ({
       let maxBubbleSize = 30;
       let sizeData = { minimumValue: minMeasure, maximumValue: maxMeasure };
       const circles = chartAreaTagG.append("g").attr("class", "circles").attr("class", "parentGroup");
-      circles.append("g").selectAll(".bubbleScatter").data(data).enter().append("g").attr(
+      const shouldAnimate = chartFormatOptions.animation.animationEnabled;
+      const bubblePaths = circles.append("g").selectAll(".bubbleScatter").data(data).enter().append("g").attr(
         "hoverId",
         (d) => d.legendName.replace(/ /g, "-")
       ).attr(
@@ -54397,7 +54686,7 @@ const BubbleChart = ({
         );
       }).attr("transform", function(d) {
         return `translate(${xScale(d.dimension)}, ${yScale(d.measure)})`;
-      }).attr("opacity", chartFormatOptions.plotArea.fillOpacity).style(
+      }).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
         "visibility",
         (d, i) => d.dimension[0] === 0 || d.measure === 0 && chartFormatOptions.plotArea.hideZeroValues || d.dimension < customXaxisMinValue || d.dimension > customXaxisMaxValue || d.measure < customYaxisMinValue || d.measure > customYaxisMaxValue ? "hidden" : "visible"
       ).on("mousemove", (event2, d) => {
@@ -54427,6 +54716,9 @@ const BubbleChart = ({
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
+      if (shouldAnimate) {
+        bubblePaths.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", chartFormatOptions.plotArea.fillOpacity);
+      }
     } catch (e) {
       logError$2("BubbleChart", "initCircles", e);
     }
@@ -54824,7 +55116,8 @@ const ScatterChart = ({
         return Shape == "Square" ? square : Shape == "Circle" ? circle : Shape == "Cross" ? cross : Shape == "Triangle" ? triangle : Shape == "Star" ? star : Shape == "Diamond" ? diamond : Shape == "Wye" ? wye : circle;
       };
       const circles = chartAreaTagG.append("g").attr("class", "circles").attr("class", "parentGroup");
-      circles.append("g").selectAll(".bubbleScatter").data(data).enter().append("g").attr("fill", (d) => d.selectedColor).attr(
+      const shouldAnimate = chartFormatOptions.animation.animationEnabled;
+      const scatterPaths = circles.append("g").selectAll(".bubbleScatter").data(data).enter().append("g").attr("fill", (d) => d.selectedColor).attr(
         "colorId",
         (d) => d.legendName.includes("-") ? d.legendName.split("-")[0].replace(/ /g, "-") : d.legendName.replace(/ /g, "-")
       ).attr(
@@ -54841,7 +55134,7 @@ const ScatterChart = ({
         );
       }).attr("transform", function(d) {
         return `translate(${xScale(d.dimension)}, ${yScale(d.measure)})`;
-      }).attr("opacity", chartFormatOptions.plotArea.fillOpacity).style(
+      }).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
         "visibility",
         (d, i) => d.dimension[0] === 0 || d.measure === 0 && chartFormatOptions.plotArea.hideZeroValues || d.dimension < customXaxisMinValue || d.dimension > customXaxisMaxValue || d.measure < customYaxisMinValue || d.measure > customYaxisMaxValue ? "hidden" : "visible"
       ).on("mousemove", (event2, d) => {
@@ -54871,6 +55164,9 @@ const ScatterChart = ({
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
+      if (shouldAnimate) {
+        scatterPaths.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", chartFormatOptions.plotArea.fillOpacity);
+      }
     } catch (e) {
       logError$2(fileName, "initCircles", e);
     }
@@ -55710,6 +56006,7 @@ const WaterfallChart = ({
           (d) => d,
           (d) => d.key || d.Key
         );
+        const shouldAnimate = formatOptions.animation.animationEnabled;
         const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr(
           "class",
           (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")
@@ -55718,10 +56015,7 @@ const WaterfallChart = ({
           (d) => xScale(
             !isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey
           )
-        ).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("clip-path", `url(#${chartId}-clip)`).attr(
-          "height",
-          (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0
-        ).attr("width", xScale.bandwidth()).attr(
+        ).attr("y", yScaleLeft(0) ?? 0).attr("clip-path", `url(#${chartId}-clip)`).attr("height", 0).attr("width", xScale.bandwidth()).attr(
           "visibility",
           (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible"
         ).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
@@ -55753,6 +56047,8 @@ const WaterfallChart = ({
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();
         });
+        const finalRects = shouldAnimate ? rectsEnter.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : rectsEnter;
+        finalRects.attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0);
         rects.exit().remove();
         rects = rectsEnter.merge(rects);
         if (formatOptions.plotArea.plotAreaDataLabel == "2" && k2 != 1) {
@@ -56396,7 +56692,8 @@ const TornadoChart = ({
     const positiveBarColor = formatOptions.plotArea.plotAreaCalculatedHigh;
     const negativeBarColor = formatOptions.plotArea.plotAreaCalculatedLow;
     const parent = gTag.append("g").attr("class", "parentGroup");
-    parent.selectAll("rect").data(
+    const shouldAnimate = formatOptions.animation.animationEnabled;
+    const bars = parent.selectAll("rect").data(
       filteredData.flatMap(
         (d) => d.data.map((child) => ({
           ...child,
@@ -56407,7 +56704,7 @@ const TornadoChart = ({
     ).enter().append("rect").attr("class", "rect").attr(
       "y",
       (d) => (d.legendText ? yScaleLeft(d.legendText) : yScaleLeft(chartTypes.TornadoDefaultEntry)) - columnWidth / 2
-    ).attr("height", columnWidth).attr("x", (d) => d.value >= 0 ? xScale(0) : xScale(d.value)).attr("width", (d) => Math.abs(xScale(d.value) - xScale(0))).style("shape-rendering", "crispEdges").attr(
+    ).attr("height", columnWidth).attr("x", xScale(0)).attr("width", 0).style("shape-rendering", "crispEdges").attr(
       "stroke-dasharray",
       (d) => d.properties.stackBorderStyle == 2 ? "5,3" : "0"
     ).attr("stroke-width", (d) => `${d.properties.stackBorderWidth}px`).attr(
@@ -56443,6 +56740,8 @@ const TornadoChart = ({
         !data.IsCalCSensitivity ? d.properties : d.properties.legend === "Calculated Low(-ve)" ? { markerColor: formatOptions.plotArea.plotAreaCalculatedLow } : { markerColor: formatOptions.plotArea.plotAreaCalculatedHigh }
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    const finalBars = shouldAnimate ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
+    finalBars.attr("x", (d) => d.value >= 0 ? xScale(0) : xScale(d.value)).attr("width", (d) => Math.abs(xScale(d.value) - xScale(0)));
   };
   const setSVGContainer = (margin2) => {
     innerWidth2 = width - margin2.left - margin2.right;
@@ -56987,14 +57286,16 @@ const DotPlot = ({
       ).merge(column);
       let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.dimension);
       let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group");
-      columnGroupsEnter.append("path").attr("class", "cleveland-dot").merge(columnGroups.select("path")).attr(
+      const shouldAnimate = formatOptions.animation.animationEnabled;
+      const enteringDots = columnGroupsEnter.append("path").attr("class", "cleveland-dot").attr("opacity", shouldAnimate ? 0 : 0.9);
+      enteringDots.merge(columnGroups.select("path")).attr(
         "d",
         (d) => Symbol$1().type(Markershapes(d.markerShape)).size((d.markerSize || 6) * 70)()
       ).attr("transform", (d) => {
         const x2 = xScaleBottom(d.value);
         const y2 = yScale(d.dimension);
         return `translate(${x2},${y2})`;
-      }).attr("fill", (d) => data2.properties.color).attr("opacity", 0.9).attr(
+      }).attr("fill", (d) => data2.properties.color).attr(
         "visibility",
         () => formatOptions.marker?.markerVisibility ? "visible" : "hidden"
       ).on("mousemove", (event2, d) => {
@@ -57027,6 +57328,9 @@ const DotPlot = ({
         selectAll(".halo").remove();
         hideTooltipOnMouseOut();
       });
+      if (shouldAnimate) {
+        enteringDots.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("opacity", 0.9);
+      }
       columnGroups.exit().remove();
     });
     gTag.selectAll(".parentGroup").raise();
@@ -57567,17 +57871,8 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
     maintainAspectRatio: false,
     plugins: {
       // ---- Title ----
-      title: {
-        display: formatOptions.chartTitle?.chartTitleVisibility ?? true,
-        text: formatOptions.chartTitle?.dynamicTitleText || formatOptions.chartTitle?.chartTitleText || "",
-        color: formatOptions.chartTitle?.chartTitleColor ?? "#000000",
-        font: {
-          size: parseInt(formatOptions.chartTitle?.chartTitleFontSize ?? "15", 10),
-          family: formatOptions.chartTitle?.chartTitleFontFamily ?? "Helvetica",
-          style: getFontStyle(formatOptions.chartTitle?.chartTitleFontStyle),
-          weight: getFontWeight(formatOptions.chartTitle?.chartTitleFontStyle)
-        }
-      },
+      // Title is rendered as a separate DOM element in ChartJSWrapper
+      title: { display: false },
       // ---- Legend ----
       legend: {
         display: formatOptions.legends?.legendVisibility !== false && formatOptions.legends?.legendPosition !== "None",
@@ -57607,9 +57902,10 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
         callbacks: {
           label(ctx) {
             const value2 = typeof ctx.raw === "number" ? ctx.raw : ctx.raw?.y ?? 0;
-            const formatted = formatValueForAxis(
+            const formatted = getNumberWithFormat(
               value2,
               formatOptions.toolTip?.toolTipDisplayUnits ?? "None",
+              formatOptions.toolTip?.toolTipNumberFormat ?? ",",
               formatOptions.toolTip?.toolTipDecimalPrecision ?? "2"
             );
             return ` ${ctx.dataset.label}: ${formatted}`;
@@ -57620,13 +57916,13 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
       // This block is only active when chartjs-plugin-datalabels is registered in ChartJSWrapper.
       datalabels: buildDataLabelsConfig(formatOptions, chartType)
     },
-    animation: formatOptions.cjsOptions?.cjsAnimationEnabled === true ? {
-      duration: formatOptions.cjsOptions?.cjsAnimationDuration ?? 1e3
+    animation: formatOptions.animation?.animationEnabled === true ? {
+      duration: formatOptions.animation?.animationDuration ?? 1e3
     } : false
   };
   if (!isCircular) {
     const xScaleOptions = {
-      display: formatOptions.xAxisLabel?.xAxisLabelVisibility !== false,
+      display: true,
       title: {
         display: formatOptions.xAxisTitle?.xAxisTitleVisibility !== false,
         text: formatOptions.xAxisTitle?.xAxisTitleText ?? "Dimension",
@@ -57638,14 +57934,16 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
         }
       },
       ticks: {
+        display: formatOptions.xAxisLabel?.xAxisLabelVisibility !== false,
         color: formatOptions.xAxisLabel?.xAxisLabelColor ?? "#000000",
         font: {
           size: parseInt(formatOptions.xAxisLabel?.xAxisLabelFontSize ?? "11", 10),
           family: formatOptions.xAxisLabel?.xAxisLabelFontFamily ?? "Helvetica",
-          style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
+          style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle),
+          weight: getFontWeight(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
         },
         maxRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
-        minRotation: 0
+        minRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
       },
       grid: {
         display: formatOptions.plotArea?.gridLinesVisibility !== false && formatOptions.plotArea?.gridLinesVertical !== false,
@@ -57657,7 +57955,7 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
       }
     };
     const yScaleOptions = {
-      display: formatOptions.yAxisLabel?.yAxisLabelVisibility !== false,
+      display: true,
       position: "left",
       title: {
         display: formatOptions.yAxisTitle?.yAxisTitleVisibility !== false,
@@ -57670,11 +57968,13 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
         }
       },
       ticks: {
+        display: formatOptions.yAxisLabel?.yAxisLabelVisibility !== false,
         color: formatOptions.yAxisLabel?.yAxisLabelColor ?? "#000000",
         font: {
           size: parseInt(formatOptions.yAxisLabel?.yAxisLabelFontSize ?? "11", 10),
           family: formatOptions.yAxisLabel?.yAxisLabelFontFamily ?? "Helvetica",
-          style: getFontStyle(formatOptions.yAxisLabel?.yAxisLabelFontStyle)
+          style: getFontStyle(formatOptions.yAxisLabel?.yAxisLabelFontStyle),
+          weight: getFontWeight(formatOptions.yAxisLabel?.yAxisLabelFontStyle)
         },
         callback(value2) {
           return formatValueForAxis(
@@ -57689,7 +57989,7 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
         color: gridColor
       },
       border: {
-        color: formatOptions.yAxisLabel?.yAxisColorInverted ?? "#cccccc",
+        color: formatOptions.yAxisLabel?.yAxisColor ?? "#cccccc",
         width: parseFloat(formatOptions.yAxisLabel?.yAxisWidth ?? "0.5")
       }
     };
@@ -57704,12 +58004,17 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
       if (opts.scales.y.title) {
         opts.scales.y.title.text = formatOptions.xAxisTitle?.xAxisTitleText ?? "Dimension";
       }
+      const hRot = formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0;
+      if (opts.scales.x.ticks) {
+        opts.scales.x.ticks.maxRotation = hRot;
+        opts.scales.x.ticks.minRotation = hRot;
+      }
     } else {
       opts.scales = { x: xScaleOptions, y: yScaleOptions };
     }
     if (hasSecondaryAxis) {
       opts.scales.y1 = {
-        display: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelVisibility !== false,
+        display: true,
         position: "right",
         title: {
           display: formatOptions.secondaryYAxisTitle?.secondaryYAxisTitleVisibility !== false,
@@ -57721,9 +58026,13 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
           }
         },
         ticks: {
+          display: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelVisibility !== false,
           color: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelColor ?? "#000000",
           font: {
-            size: parseInt(formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelFontSize ?? "11", 10)
+            size: parseInt(formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelFontSize ?? "11", 10),
+            family: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelFontFamily ?? "Helvetica",
+            style: getFontStyle(formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelFontStyle),
+            weight: getFontWeight(formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelFontStyle)
           },
           callback(value2) {
             return formatValueForAxis(
@@ -57733,7 +58042,11 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
             );
           }
         },
-        grid: { drawOnChartArea: false }
+        grid: { drawOnChartArea: false },
+        border: {
+          color: formatOptions.secondaryYAxisLabel?.secondaryYAxisColor ?? "#000000",
+          width: parseFloat(formatOptions.secondaryYAxisLabel?.secondaryYAxisWidth ?? "0.5")
+        }
       };
     }
     const isStacked2 = chartType.toLowerCase().includes("stack");
@@ -57755,6 +58068,7 @@ function getRawValue(raw) {
 function buildDataLabelsConfig(formatOptions, chartType = "bar") {
   const annotation2 = formatOptions.annotation;
   const isCircular = chartType === "pie" || chartType === "doughnut" || chartType === "polarArea";
+  const isHorizontal = chartType === "horizontalBar";
   const visibilityStr = annotation2?.annotationVisibility ?? "5";
   if (visibilityStr === "5" || !visibilityStr) {
     return { display: false };
@@ -57766,7 +58080,8 @@ function buildDataLabelsConfig(formatOptions, chartType = "bar") {
   const fontStyle = getFontStyle(annotation2?.annotationFontStyle);
   const fontWeight = getFontWeight(annotation2?.annotationFontStyle);
   const labelColor = annotation2?.annotationColor ?? "#000000";
-  const decimalPrecision = parseInt(annotation2?.annotationDecimalPrecision ?? "2", 10);
+  const useSeriesColor = annotation2?.annotationSetLabelColor === "2";
+  const decimalPrecision = annotation2?.annotationDecimalPrecision ?? "2";
   const numberFormat = annotation2?.annotationNumberFormat ?? ",";
   const displayUnits = annotation2?.annotationDisplayUnits ?? "None";
   function display(ctx) {
@@ -57816,14 +58131,25 @@ function buildDataLabelsConfig(formatOptions, chartType = "bar") {
       return positionStr === "2" ? "center" : "end";
     }
     const v = getCtxValue(ctx);
+    if (isHorizontal) {
+      switch (positionStr) {
+        case "2":
+          return "center";
+        case "3":
+          return "right";
+        // baseline side → point into bar (rightward from zero for pos, rightward toward zero for neg)
+        case "1":
+        case "4":
+        default:
+          return v < 0 ? "left" : "right";
+      }
+    }
     switch (positionStr) {
       case "2":
         return "center";
       case "3":
         return v > 0 ? "top" : "bottom";
-      // always upward — inside bar in both cases:
-      //   positive: above zero   = inside bar base
-      //   negative: above extreme = toward zero = inside bar
+      // inside bar near baseline
       case "1":
       case "4":
       default:
@@ -57833,23 +58159,7 @@ function buildDataLabelsConfig(formatOptions, chartType = "bar") {
   function formatter2(raw, ctx) {
     const v = getRawValue(raw);
     if (hideZero && v === 0) return null;
-    let scaled = v;
-    if (displayUnits === "Thousands") scaled = v / 1e3;
-    else if (displayUnits === "Millions") scaled = v / 1e6;
-    else if (displayUnits === "Billions") scaled = v / 1e9;
-    let formattedValue;
-    if (numberFormat === ",.0%") {
-      formattedValue = (scaled / 100).toLocaleString(void 0, {
-        style: "percent",
-        minimumFractionDigits: decimalPrecision,
-        maximumFractionDigits: decimalPrecision
-      });
-    } else {
-      formattedValue = scaled.toLocaleString(void 0, {
-        minimumFractionDigits: decimalPrecision,
-        maximumFractionDigits: decimalPrecision
-      });
-    }
+    const formattedValue = getNumberWithFormat(v, displayUnits, numberFormat, decimalPrecision);
     if (isCircular) {
       const label = ctx?.chart?.data?.labels?.[ctx.dataIndex] ?? "";
       return label ? `${label}
@@ -57862,7 +58172,12 @@ ${formattedValue}` : formattedValue;
     anchor,
     align,
     offset: isCircular ? positionStr === "2" ? 0 : 8 : positionStr === "2" ? 0 : 4,
-    color: labelColor,
+    color: useSeriesColor ? (ctx) => {
+      const bg = ctx.dataset?.backgroundColor;
+      const border = ctx.dataset?.borderColor;
+      const c2 = Array.isArray(bg) ? bg[ctx.dataIndex] : bg;
+      return typeof c2 === "string" && c2 ? c2 : typeof border === "string" && border ? border : labelColor;
+    } : labelColor,
     font: {
       size: fontSize,
       family: fontFamily,
@@ -62104,8 +62419,8 @@ function parseArrayOrPrimitive(meta, data, start2, count2) {
   }
   return parsed;
 }
-function isFloatBar(custom13) {
-  return custom13 && custom13.barStart !== void 0 && custom13.barEnd !== void 0;
+function isFloatBar(custom16) {
+  return custom16 && custom16.barStart !== void 0 && custom16.barEnd !== void 0;
 }
 function barSign(size, vScale, actualBase) {
   if (size !== 0) {
@@ -62247,10 +62562,10 @@ class BarController extends DatasetController {
   }
   updateRangeFromParsed(range2, scale2, parsed, stack2) {
     super.updateRangeFromParsed(range2, scale2, parsed, stack2);
-    const custom13 = parsed._custom;
-    if (custom13 && scale2 === this._cachedMeta.vScale) {
-      range2.min = Math.min(range2.min, custom13.min);
-      range2.max = Math.max(range2.max, custom13.max);
+    const custom16 = parsed._custom;
+    if (custom16 && scale2 === this._cachedMeta.vScale) {
+      range2.min = Math.min(range2.min, custom16.min);
+      range2.max = Math.max(range2.max, custom16.max);
     }
   }
   getMaxOverflow() {
@@ -62260,8 +62575,8 @@ class BarController extends DatasetController {
     const meta = this._cachedMeta;
     const { iScale, vScale } = meta;
     const parsed = this.getParsed(index2);
-    const custom13 = parsed._custom;
-    const value2 = isFloatBar(custom13) ? "[" + custom13.start + ", " + custom13.end + "]" : "" + vScale.getLabelForValue(parsed[vScale.axis]);
+    const custom16 = parsed._custom;
+    const value2 = isFloatBar(custom16) ? "[" + custom16.start + ", " + custom16.end + "]" : "" + vScale.getLabelForValue(parsed[vScale.axis]);
     return {
       label: "" + iScale.getLabelForValue(parsed[iScale.axis]),
       value: value2
@@ -62390,8 +62705,8 @@ class BarController extends DatasetController {
     const { _cachedMeta: { vScale, _stacked, index: datasetIndex }, options: { base: baseValue, minBarLength } } = this;
     const actualBase = baseValue || 0;
     const parsed = this.getParsed(index2);
-    const custom13 = parsed._custom;
-    const floating = isFloatBar(custom13);
+    const custom16 = parsed._custom;
+    const floating = isFloatBar(custom16);
     let value2 = parsed[vScale.axis];
     let start2 = 0;
     let length = _stacked ? this.applyStack(vScale, parsed, _stacked) : value2;
@@ -62401,9 +62716,9 @@ class BarController extends DatasetController {
       length = value2;
     }
     if (floating) {
-      value2 = custom13.barStart;
-      length = custom13.barEnd - custom13.barStart;
-      if (value2 !== 0 && sign(value2) !== sign(custom13.barEnd)) {
+      value2 = custom16.barStart;
+      length = custom16.barEnd - custom16.barStart;
+      if (value2 !== 0 && sign(value2) !== sign(custom16.barEnd)) {
         start2 = 0;
       }
       start2 += value2;
@@ -72925,7 +73240,13 @@ const ChartJSWrapper = ({
     };
   }, [chartType, data, options, isChartStacked]);
   const bgColor = formatOptions.chartArea?.chartAreaColor ?? "#ffffff";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const titleFontStyle = Array.isArray(formatOptions.chartTitle?.chartTitleFontStyle) ? formatOptions.chartTitle.chartTitleFontStyle : [];
+  const titleColor = formatOptions.chartTitle?.chartTitleColor && formatOptions.chartTitle.chartTitleColor !== "#ffffff" && formatOptions.chartTitle.chartTitleColor !== "#FFFFFF00" ? formatOptions.chartTitle.chartTitleColor : "rgba(119,119,119)";
+  const titleFontSize = formatOptions.chartTitle?.chartTitleFontSize ? `${formatOptions.chartTitle.chartTitleFontSize}px` : "16px";
+  const titleText = formatOptions.chartTitle?.dynamicTitleText || formatOptions.chartTitle?.chartTitleText || "";
+  const titleHTML = formatOptions.chartTitle?.chartTitleHTML || titleText;
+  const titleVisible = formatOptions.chartTitle?.chartTitleVisibility !== false;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       className,
@@ -72933,9 +73254,37 @@ const ChartJSWrapper = ({
         width: "100%",
         height: "100%",
         backgroundColor: bgColor,
-        position: "relative"
+        position: "relative",
+        display: "flex",
+        flexDirection: "column"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef })
+      children: [
+        titleVisible && titleText && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            id: "chartTitleId",
+            className: "chartTiltle",
+            title: formatOptions.chartTitle?.chartTitleText,
+            style: {
+              color: titleColor,
+              fontSize: titleFontSize,
+              fontFamily: formatOptions.chartTitle?.chartTitleFontFamily,
+              fontStyle: titleFontStyle.includes("Italic") ? "italic" : "normal",
+              fontWeight: titleFontStyle.includes("Bold") ? "bold" : "normal",
+              textDecoration: titleFontStyle.includes("Underline") ? "underline" : "none",
+              whiteSpace: "pre",
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+              lineHeight: "1.3em",
+              userSelect: "none",
+              padding: "2px 4px",
+              flexShrink: 0
+            },
+            dangerouslySetInnerHTML: { __html: titleHTML }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef, style: { width: "100%", height: "100%" } }) })
+      ]
     }
   );
 };