pace-chart-lib 1.0.56 → 1.0.58

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);
@@ -10832,11 +10868,6 @@ const AnnotationTypeMap = {
   4: d3CalloutElbow,
   5: d3CalloutCurve
 };
-const ConnectedStyle = {
-  "solid": "unset",
-  "Dotted": "2",
-  "Dashed": "7"
-};
 var staticLegendPosition = /* @__PURE__ */ ((staticLegendPosition2) => {
   staticLegendPosition2["left"] = "Left";
   staticLegendPosition2["right"] = "Right";
@@ -10949,6 +10980,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 +11591,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 = {
@@ -13066,10 +13120,20 @@ function getCurveType(formatOptions) {
 }
 function getSlicedLegendForTornado(legend) {
   const index2 = legend.indexOf(" - ");
-  if (index2 == -1) return legend;
+  if (index2 == -1) return tornadoEntryName.default;
   return legend.slice(index2 + 3);
 }
 const getHoverText = (d, isAATornado) => isAATornado ? d?.legend?.split(" - ")[0] : d?.properties?.alias || d?.properties?.name || "Legend";
+function getCurvePoints(dx, dy) {
+  return [
+    [0, 0],
+    // start (anchor)
+    [dx / 2, dy / 2],
+    // control (curve bend)
+    [dx, dy]
+    // end (label)
+  ];
+}
 function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d3Annotation2, labelExcludeList, individualLabelColor, formatOptions, chartType, height, width, innerWidth2, dimensionList, innerHeight2, widgetId, svg, onDataLabelCoordinatesChange, xScaleForLegends, columnWidth, isReportEditable, isSensitivityChart, barChart, isAATornado) {
   try {
     const isTornadoChart = chartType === chartTypes.TornadoChart;
@@ -13077,6 +13141,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
     let annotationType = formatOptions.annotation.annotationType ?? "1";
     let annotationPosition = formatOptions.annotation.annotationPosition.toString() != "4" ? formatOptions.annotation.annotationPosition : null;
     let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
+    const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
     if (formatOptions.annotation.annotationVisibility) {
       let Disable = [annotationType == "1" ? "connector" : ""];
       let labelData = [];
@@ -13307,7 +13372,8 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -13365,12 +13431,10 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-            if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-              newAnnotation.connector["points"] = [
-                [0, 0],
-                [0, 0]
-              ];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
             }
           }
         }
@@ -13433,7 +13497,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -13489,6 +13553,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;
@@ -13508,6 +13587,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       let stackData = [];
       let getChartType = [];
       let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+      const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
       let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
       oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartTypes.CustomColumnChart);
       let annotationsList = [];
@@ -13839,7 +13919,8 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -13861,6 +13942,9 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           !labelExcludeList.includes(d["key"]) && (d.data.axis == axisTypes.primary ? yScaleLeft(d[1]) <= innerHeight2 && yScaleLeft(d[1]) >= 0 : yScaleRight(d[1]) <= innerHeight2 && yScaleRight(d[1]) >= 0) ? annotationsList.push(singleAnnotation) : null
         );
       });
+      if (formatOptions.annotation.annotationHideZeroValues) {
+        annotationsList = annotationsList.filter((d) => d.data.y !== 0);
+      }
       if (oldAnnotationList.length === 0) {
         oldAnnotationList = annotationsList;
         oldMap = new Map(
@@ -13895,7 +13979,11 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+            }
             if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
               newAnnotation.connector["points"] = [
                 [0, 0],
@@ -13949,7 +14037,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -13985,6 +14073,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;
@@ -15169,6 +15279,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
       let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
       let fontStyle = formatOptions.annotation.annotationFontStyle;
       let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+      const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
       let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
       oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartType);
       let annotationsList = [];
@@ -15273,7 +15384,8 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -15323,12 +15435,10 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-            if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-              newAnnotation.connector["points"] = [
-                [0, 0],
-                [0, 0]
-              ];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
             }
           }
         }
@@ -15364,7 +15474,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -15400,6 +15510,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 +16268,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 +16336,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 +17762,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 +17840,7 @@ const ColumnChart = ({
       filteredDimension,
       xScale
     );
+    getChartType(filteredData);
     commonAnnotations(
       seriesData,
       xScale,
@@ -17746,7 +17892,6 @@ const ColumnChart = ({
       margin,
       innerHeight2
     );
-    getChartType(filteredData);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
@@ -17829,6 +17974,7 @@ const CustomColumnChart = ({
   let requiredData = [];
   let scrollPosition = 0;
   let visibleBars;
+  let annotationTimeoutId;
   let chartJSON = {
     dimensionList,
     chartType,
@@ -18334,13 +18480,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 +18521,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 +18574,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 +18622,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 +18640,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 +18707,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 +18719,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 +18762,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 +18826,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 +18911,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 +19096,6 @@ const LayeredColumnChart = ({
   let yScaleLeft;
   let yScaleRight;
   let xScale;
-  let xScaleForLegends;
   let calculatedRange;
   let yAxisLeft;
   let xAxis;
@@ -19150,7 +19351,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 +19410,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 +19428,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 +19501,7 @@ const LayeredColumnChart = ({
       });
       columnGroups.exit().remove();
     });
+    gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
     innerWidth2 = width - margin2.left - margin2.right;
@@ -19779,7 +19994,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 +20730,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(
@@ -21178,6 +21394,7 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
     const AnnotationType = formatOptions.plotArea.annotationType ?? "1";
     const Disable = [AnnotationType === "1" ? "connector" : ""];
     const ConnectorType = formatOptions.plotArea.connectorType?.toLowerCase() ?? "none";
+    const isCurve = AnnotationType === "5";
     const rotationAngle = formatOptions.plotArea.rotation ?? 0;
     const multiplicationFactor = chartType === chartTypes.PieChart ? 1.06 : 1.1;
     const connecterCurve2 = {
@@ -21185,6 +21402,11 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
       "2": curveLinear$1,
       "3": step
     };
+    const getCurvePoints2 = (dx, dy) => [
+      [0, 0],
+      [dx / 2, dy / 2],
+      [dx, dy]
+    ];
     const connectedStyle2 = {
       solid: "unset",
       dotted: "2,2",
@@ -21240,12 +21462,13 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
         dy: 0,
         connector: {
           end: ConnectorType,
-          curve: connecterCurve2[formatOptions.plotArea.connectorCurve]
+          curve: connecterCurve2[formatOptions.plotArea.connectorCurve],
+          points: isCurve ? getCurvePoints2(0, 0) : [[0, 0], [0, 0]]
         },
         disable: Disable,
         subject: { radius: 3 },
         type: annotationTypeforCharts(d3Annotation2, AnnotationType),
-        color: formatOptions.plotArea.dataLabelNameColor ?? "#000",
+        color: formatOptions.plotArea.connectorColor ?? "#ccc",
         width,
         height,
         index: index2
@@ -21275,7 +21498,11 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
           newAnnotation.dy = old.dy * scaleFactor;
         }
         newAnnotation.data.isVisible = old.data?.isVisible ?? true;
-        newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+        if (old.connectorPoints?.length >= (isCurve ? 3 : 2)) {
+          newAnnotation.connector.points = old.connectorPoints;
+        } else {
+          newAnnotation.connector.points = isCurve ? getCurvePoints2(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+        }
       }
       finalAnnotationList.push(newAnnotation);
     });
@@ -21321,11 +21548,42 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
       }
     }).annotations(finalAnnotationList);
     const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
+    const fontStyleName = formatOptions.plotArea.dataLabelNameFontStyle ?? [];
+    annotations.selectAll(".annotation-note-title").style("font-family", formatOptions.plotArea.dataLabelNameFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelNameFontSize}px`).style("font-style", fontStyleName.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleName.includes("Underline") ? "underline" : "").style("font-weight", fontStyleName.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelNameColor ?? "#000");
+    const fontStyleValue = formatOptions.plotArea.dataLabelValueFontStyle ?? [];
+    annotations.selectAll(".annotation-note-label").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("font-style", fontStyleValue.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleValue.includes("Underline") ? "underline" : "").style("font-weight", fontStyleValue.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000");
+    if (formatOptions.plotArea.plotAreaAbsoluteValue) {
+      annotations.selectAll(".annotation-note-label").each(function(d) {
+        const labelEl = select$2(this);
+        const absText = format(".2s")(Math.abs(d.data.y.value));
+        labelEl.append("tspan").attr("x", labelEl.attr("x") ?? "0").attr("dy", "1.2em").attr("fill-opacity", 0.5).attr("font-weight", "300").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000").text(absText);
+      });
+    }
+    if (ConnectorType === "diamond") {
+      const connectorColor2 = formatOptions.plotArea.connectorColor ?? "#ccc";
+      const size = 5;
+      annotations.selectAll(".annotation-connector").each(function() {
+        if (!select$2(this).select("path.connector").empty()) {
+          select$2(this).append("polygon").attr("class", "connector-end connector-diamond").attr("points", `0,${-size} ${size},0 0,${size} ${-size},0`).style("fill", connectorColor2).style("stroke", connectorColor2);
+        }
+      });
+    }
     annotations.selectAll("rect,.annotation-subject").remove();
-    annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
+    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);
+    }
+    const connectorColor = formatOptions.plotArea.connectorColor ?? "#ccc";
+    annotations.selectAll(".connector").style("stroke", connectorColor).attr(
       "stroke-dasharray",
       connectedStyle2[formatOptions.plotArea.connectorStyle?.toLowerCase()]
     );
+    annotations.selectAll(".connector-end").style("fill", connectorColor).style("stroke", connectorColor);
     annotations.selectAll(".annotation-note-label").filter((d) => !d.data.isVisible).style("display", "none");
     annotations.selectAll(".annotation-note-label").filter((d) => formatOptions.plotArea.hideInsignificantValue && d.data.x1 - d.data.x0 < 0.09).style("visibility", "hidden");
   } catch (error) {
@@ -21753,7 +22011,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 +22022,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 +22047,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 +22560,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 +22569,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 +22592,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 +23130,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 +23640,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 +23659,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 +24255,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 +24778,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 +25481,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 +25625,6 @@ const LayeredHorizontalBarChart = ({
   let gTag;
   let xScaleBottom;
   let yScale;
-  let yScaleLegend;
   let calculatedRange;
   let xAxisBottom;
   let yAxis;
@@ -25579,7 +25864,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 +25911,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 +25982,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();
@@ -25763,8 +26047,8 @@ const LayeredHorizontalBarChart = ({
       onDataLabelCoordinatesChange,
       void 0,
       columnWidth,
-      false,
       isReportEditable,
+      false,
       barChart
     );
     getConnectors();
@@ -26385,7 +26669,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 +26688,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 +26710,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 +27207,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 +27223,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 +27746,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 +27773,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 +28304,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 +28339,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 +28776,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 +28813,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 +29196,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 +29210,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 +29239,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 +29703,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 +29723,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 +29886,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 +29934,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 +30180,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);
     }
@@ -29880,7 +30213,8 @@ const fileName$4 = "PyramidChart.tsx";
 const PyramidChart = ({
   data,
   formatOptions,
-  chartId
+  chartId,
+  onDataLabelCoordinatesChange
 }) => {
   const svgRef = useRef();
   let seriesData = generalizedChartData(data.ChartData);
@@ -29988,7 +30322,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 +30331,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 +30364,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);
         }
@@ -30039,14 +30377,11 @@ const PyramidChart = ({
   };
   const pyramidAnnotations = (oldAnnotationList) => {
     try {
-      const self = void 0;
-      let AnnotationType = chartFormatOptions.annotation.annotationType ?? "1";
       if (chartFormatOptions.annotation.annotationVisibility) {
-        let Disable = [AnnotationType == "1" ? "connector" : ""];
         let makeAnnotations = annotation();
         let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-        let AnnotationsList = annotationsList;
         let finalAnnotationList = annotationsList;
+        const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
         makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
           x: function() {
             return innerWidth2 * 0.5;
@@ -30056,13 +30391,29 @@ const PyramidChart = ({
           }
         }).on("dragend", function(annotation2) {
           try {
+            finalAnnotationList.forEach((d) => {
+              if (d.data.legend === annotation2.data.legend) {
+                d.dx = annotation2._dx;
+                d.dy = annotation2._dy;
+                d.width = width;
+                d.height = height;
+              }
+            });
+            if (onDataLabelCoordinatesChange) {
+              onDataLabelCoordinatesChange(
+                finalAnnotationList.map((d) => ({
+                  data: { legend: d.data.legend, isVisible: d.data.isVisible ?? true },
+                  dx: d.dx,
+                  dy: d.dy,
+                  width,
+                  height
+                }))
+              );
+            }
             annotations.selectAll(".connector").attr("hoverId", (d) => d.data.legend.replace(/\s+/g, "-")).style(
               "stroke",
               chartFormatOptions.annotation.connectorColor || "#ccc"
-            ).attr(
-              "stroke-dasharray",
-              ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-            );
+            ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
             annotations.selectAll(`.connector-${ConnectorType}`).attr(
               "fill",
               chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30073,10 +30424,7 @@ const PyramidChart = ({
             annotations.selectAll(".note-line").attr("hoverId", (d) => d.data.currentLegend.replace(/\s+/g, "-")).style(
               "stroke",
               chartFormatOptions.annotation.connectorColor || "#ccc"
-            ).attr(
-              "stroke-dasharray",
-              ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-            ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+            ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
             annotations.selectAll(".annotation-note-label").filter((d) => d.data && d.data.isVisible).style("display", "block");
             annotations.selectAll(".annotation-note-title").filter((d) => d.data && d.data.isVisible).style("display", "block");
           } catch (error) {
@@ -30089,10 +30437,7 @@ const PyramidChart = ({
         annotations.selectAll(".connector").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
-        ).attr(
-          "stroke-dasharray",
-          ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-        );
+        ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
         annotations.selectAll(`.connector-${ConnectorType}`).attr("fill", chartFormatOptions.annotation.connectorColor || "#ccc").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30100,10 +30445,7 @@ const PyramidChart = ({
         annotations.selectAll(".note-line").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
-        ).attr(
-          "stroke-dasharray",
-          ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-        ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+        ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
         annotations.selectAll(".connector-end").filter((d) => d.connector.end == "dot" && d._dx == 0 && d._dy == 0).remove();
         annotations.selectAll(".annotation-note-label").filter((d) => d.data && !d.data.isVisible).style("display", "none");
         annotations.selectAll(".annotation-note-title").filter((d) => d.data && !d.data.isVisible).style("display", "none");
@@ -30149,7 +30491,12 @@ const PyramidChart = ({
   const prepareNewAnnotationsList = () => {
     try {
       let annotationType = chartFormatOptions.annotation.annotationType ?? "1";
+      let disable = [annotationType == "1" ? "connector" : ""];
       let connectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "none";
+      const savedList = JSON.parse(
+        JSON.stringify(chartFormatOptions.plotArea.dataLabelsCoordinates || [])
+      );
+      const oldMap = new Map(savedList.map((d) => [d.data?.legend, d]));
       annotationsList = [];
       seriesData.forEach((d, i) => {
         try {
@@ -30194,6 +30541,7 @@ const PyramidChart = ({
               end: connectorType,
               curve: ConnecterCurve[chartFormatOptions.annotation.connectorCurve]
             },
+            disable,
             subject: {
               height: 15,
               width: 15
@@ -30204,6 +30552,12 @@ const PyramidChart = ({
             width,
             index: i
           };
+          const old = oldMap.get(d.legend);
+          if (old) {
+            singleAnnotation.dx = old.dx * width / (old.width || width);
+            singleAnnotation.dy = old.dy * height / (old.height || height);
+            singleAnnotation.data.isVisible = old.data?.isVisible ?? true;
+          }
           annotationsList.push(singleAnnotation);
         } catch (error) {
           logError$2(fileName$4, "prepareNewAnnotationsList.forEach", error);
@@ -30430,7 +30784,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 +31192,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 +31609,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 +31999,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 +32681,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 +54726,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 +54750,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 +54780,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 +55180,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 +55198,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 +55228,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 +56070,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 +56079,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 +56111,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 +56756,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 +56768,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 +56804,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 +57350,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 +57392,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();
@@ -57356,11 +57724,11 @@ function getBorderDash(lineStyle) {
   return [];
 }
 function transformToChartJSData(chartData, chartType, formatOptions, colorBank = CJS_DEFAULT_COLORS) {
-  const { ChartData: seriesList, DimensionList } = chartData;
+  const { ChartData: seriesList, DimensionList, LegendList } = chartData;
   const labels = DimensionList?.length ? DimensionList : seriesList[0]?.data?.map((d) => d.dimension) ?? [];
   const fillOpacity = Number(formatOptions.plotArea?.fillOpacity ?? 0.8);
   if (chartType === "pie" || chartType === "doughnut" || chartType === "polarArea") {
-    return buildCircularData(seriesList, labels, fillOpacity, colorBank);
+    return buildCircularData(seriesList, labels, fillOpacity, colorBank, LegendList);
   }
   if (chartType === "scatter") {
     return buildScatterData(seriesList, colorBank);
@@ -57421,16 +57789,17 @@ function buildCartesianData(seriesList, labels, chartType, formatOptions, fillOp
   });
   return { labels, datasets };
 }
-function buildCircularData(seriesList, labels, fillOpacity, colorBank) {
+function buildCircularData(seriesList, labels, fillOpacity, colorBank, legendList) {
   const allSeries = seriesList.length ? seriesList : [];
   const datasets = allSeries.map((series) => {
     const values = labels.map((lbl) => {
       const pt = series.data?.find((d) => d.dimension === lbl);
       return pt?.value ?? 0;
     });
-    const backgroundColors = labels.map(
-      (_, i) => hexToRgba(colorBank[i % colorBank.length], fillOpacity)
-    );
+    const backgroundColors = labels.map((_, i) => {
+      const legendColor = legendList?.[i]?.color;
+      return hexToRgba(legendColor ?? colorBank[i % colorBank.length], fillOpacity);
+    });
     return {
       label: series.properties.alias,
       data: values,
@@ -57567,17 +57936,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 +57967,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 +57981,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 +57999,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
+        maxRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
+        minRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
       },
       grid: {
         display: formatOptions.plotArea?.gridLinesVisibility !== false && formatOptions.plotArea?.gridLinesVertical !== false,
@@ -57657,7 +58020,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 +58033,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 +58054,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")
       }
     };
@@ -57709,7 +58074,7 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
     }
     if (hasSecondaryAxis) {
       opts.scales.y1 = {
-        display: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelVisibility !== false,
+        display: true,
         position: "right",
         title: {
           display: formatOptions.secondaryYAxisTitle?.secondaryYAxisTitleVisibility !== false,
@@ -57721,9 +58086,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 +58102,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 +58128,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 +58140,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 +58191,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 +58219,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 +58232,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 +62479,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 +62622,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 +62635,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 +62765,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 +62776,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 +73300,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 +73314,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%" } }) })
+      ]
     }
   );
 };