pace-chart-lib 1.0.56 → 1.0.57

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

@@ -2395,7 +2395,7 @@
     }
   }));
   const constant$9 = (x2) => () => x2;
-  function linear$2(a2, d) {
+  function linear$3(a2, d) {
     return function(t) {
       return a2 + t * d;
     };
@@ -2412,7 +2412,7 @@
   }
   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);
@@ -2637,7 +2637,7 @@
           ];
         };
       } 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));
@@ -3361,12 +3361,48 @@
     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 custom(s2) {
+    s2 = +s2;
+    function backOut2(t) {
+      return --t * t * ((t + 1) * s2 + t) + 1;
+    }
+    backOut2.overshoot = custom;
+    return backOut2;
+  })(overshoot);
+  (function custom(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 = custom;
+    return backInOut;
+  })(overshoot);
   var tau$5 = 2 * Math.PI, amplitude = 1, period = 0.3;
   (function custom(a2, p) {
     var s2 = Math.asin(1 / (a2 = Math.max(1, a2))) * (p /= tau$5);
@@ -4397,12 +4433,12 @@
       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;
             }
           }
         }
@@ -4876,19 +4912,19 @@
     });
   }
   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,
@@ -4913,7 +4949,7 @@
       }
       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() {
@@ -4926,11 +4962,11 @@
         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();
       }
@@ -10952,6 +10988,15 @@
     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,
@@ -11554,6 +11599,20 @@
     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 = {
@@ -13492,6 +13551,21 @@
           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;
@@ -13988,6 +14062,28 @@
         }).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;
@@ -15403,6 +15499,21 @@
         }).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;
@@ -16146,7 +16257,7 @@
         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;
@@ -16214,6 +16325,26 @@
             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);
@@ -17620,7 +17751,7 @@
           "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);
@@ -17698,6 +17829,7 @@
         filteredDimension,
         xScale
       );
+      getChartType(filteredData);
       commonAnnotations(
         seriesData,
         xScale,
@@ -17749,7 +17881,6 @@
         margin,
         innerHeight2
       );
-      getChartType(filteredData);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
@@ -17832,6 +17963,7 @@
     let requiredData = [];
     let scrollPosition = 0;
     let visibleBars;
+    let annotationTimeoutId;
     let chartJSON = {
       dimensionList,
       chartType,
@@ -18337,13 +18469,10 @@
         "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 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", (d) => xScaleForLegends(d.legendUniqueId)).attr("width", xScaleForLegends.bandwidth()).attr("y", (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(
@@ -18381,6 +18510,14 @@
           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) => {
@@ -18426,6 +18563,14 @@
         "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,
@@ -18466,6 +18611,10 @@
         )
         // : 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);
@@ -18480,8 +18629,13 @@
       ).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) => {
@@ -18542,6 +18696,10 @@
       ).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);
@@ -18550,8 +18708,13 @@
       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(
@@ -18588,19 +18751,24 @@
       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
         );
@@ -18647,6 +18815,14 @@
           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) => {
@@ -18724,48 +18900,60 @@
         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);
@@ -18897,7 +19085,6 @@
     let yScaleLeft;
     let yScaleRight;
     let xScale;
-    let xScaleForLegends;
     let calculatedRange;
     let yAxisLeft;
     let xAxis;
@@ -19153,7 +19340,7 @@
       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);
@@ -19212,15 +19399,12 @@
         });
       });
       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)`
@@ -19233,22 +19417,38 @@
           "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(
             [
               {
@@ -19290,6 +19490,7 @@
         });
         columnGroups.exit().remove();
       });
+      gTag.selectAll(".parentGroup").raise();
     };
     const setSVGContainer = (margin2) => {
       innerWidth2 = width - margin2.left - margin2.right;
@@ -19782,7 +19983,7 @@
       }).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();
@@ -20518,7 +20719,8 @@
         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(
@@ -21325,6 +21527,15 @@
       }).annotations(finalAnnotationList);
       const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
       annotations.selectAll("rect,.annotation-subject").remove();
+      if (formatOptions.animation?.animationEnabled) {
+        const duration = formatOptions.animation.animationDuration;
+        const ease = effectsMap[formatOptions.animation.animationEffect];
+        const labels = annotations.selectAll(".annotation-note-label");
+        labels.interrupt().style("opacity", 0);
+        setTimeout(() => {
+          labels.transition().delay((d, i) => i * 30).duration(duration).ease(ease).style("opacity", 1);
+        }, 50);
+      }
       annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
         "stroke-dasharray",
         connectedStyle2[formatOptions.plotArea.connectorStyle?.toLowerCase()]
@@ -21756,7 +21967,8 @@
       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(
@@ -21766,12 +21978,10 @@
         "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(
           [
             {
@@ -21793,6 +22003,12 @@
           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) => {
@@ -22300,6 +22516,8 @@
       ).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);
@@ -22307,7 +22525,7 @@
       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) => {
@@ -22330,6 +22548,14 @@
           "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(
@@ -22860,7 +23086,13 @@
           "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(
@@ -23364,7 +23596,7 @@
       ).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()
           );
@@ -23383,6 +23615,13 @@
           "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(
@@ -23972,7 +24211,7 @@
           "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);
@@ -24495,7 +24734,7 @@
         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();
@@ -25198,7 +25437,7 @@
         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();
@@ -25342,7 +25581,6 @@
     let gTag;
     let xScaleBottom;
     let yScale;
-    let yScaleLegend;
     let calculatedRange;
     let xAxisBottom;
     let yAxis;
@@ -25582,7 +25820,7 @@
       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);
@@ -25629,58 +25867,63 @@
         });
       });
       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
@@ -25695,13 +25938,7 @@
             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();
@@ -26388,7 +26625,8 @@
       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(
@@ -26406,7 +26644,7 @@
         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(
           [
             {
@@ -26428,6 +26666,8 @@
           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) => {
@@ -26923,6 +27163,7 @@
       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);
@@ -26938,7 +27179,9 @@
           "-"
         )
       ).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));
         }
       });
@@ -27459,6 +27702,7 @@
       ).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) => {
@@ -27485,7 +27729,9 @@
         "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));
         }
       });
@@ -28014,6 +28260,7 @@
       ).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) => {
@@ -28048,7 +28295,9 @@
         (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));
         }
       });
@@ -28483,13 +28732,13 @@
       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(
@@ -28520,6 +28769,17 @@
           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);
       }
@@ -28892,7 +29152,7 @@
     };
     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()}`);
@@ -28906,8 +29166,9 @@
           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) => {
@@ -28934,13 +29195,23 @@
             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) {
@@ -29388,8 +29659,9 @@
     };
     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(
             [
               {
@@ -29407,6 +29679,9 @@
             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(
@@ -29567,10 +29842,10 @@
       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(
@@ -29615,14 +29890,25 @@
             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,
@@ -29850,8 +30136,8 @@
         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);
       }
@@ -29991,7 +30277,8 @@
             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}
@@ -29999,7 +30286,7 @@
                 ${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(
                   [
@@ -30032,6 +30319,9 @@
                 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);
           }
@@ -30433,7 +30723,7 @@
         }).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) {
@@ -30841,7 +31131,7 @@
                 }
                 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);
               }
@@ -31258,9 +31548,7 @@
         }).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(
@@ -31650,11 +31938,11 @@
       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;
@@ -32332,8 +32620,8 @@
         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];
@@ -54377,7 +54665,8 @@
         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(
@@ -54400,7 +54689,7 @@
           );
         }).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) => {
@@ -54430,6 +54719,9 @@
         }).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);
       }
@@ -54827,7 +55119,8 @@
           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(
@@ -54844,7 +55137,7 @@
           );
         }).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) => {
@@ -54874,6 +55167,9 @@
         }).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);
       }
@@ -55713,6 +56009,7 @@
             (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, "-")
@@ -55721,10 +56018,7 @@
             (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) => {
@@ -55756,6 +56050,8 @@
           }).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) {
@@ -56399,7 +56695,8 @@
       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,
@@ -56410,7 +56707,7 @@
       ).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(
@@ -56446,6 +56743,8 @@
           !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;
@@ -56990,14 +57289,16 @@
         ).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) => {
@@ -57030,6 +57331,9 @@
           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();
@@ -57570,17 +57874,8 @@
       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",
@@ -57610,9 +57905,10 @@
           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}`;
@@ -57623,13 +57919,13 @@
         // 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",
@@ -57641,14 +57937,16 @@
           }
         },
         ticks: {
+          display: formatOptions.xAxisLabel?.xAxisLabelVisibility !== false,
           color: formatOptions.xAxisLabel?.xAxisLabelColor ?? "#000000",
           font: {
             size: parseInt(formatOptions.xAxisLabel?.xAxisLabelFontSize ?? "11", 10),
             family: formatOptions.xAxisLabel?.xAxisLabelFontFamily ?? "Helvetica",
-            style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
+            style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle),
+            weight: getFontWeight(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
           },
           maxRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
-          minRotation: 0
+          minRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
         },
         grid: {
           display: formatOptions.plotArea?.gridLinesVisibility !== false && formatOptions.plotArea?.gridLinesVertical !== false,
@@ -57660,7 +57958,7 @@
         }
       };
       const yScaleOptions = {
-        display: formatOptions.yAxisLabel?.yAxisLabelVisibility !== false,
+        display: true,
         position: "left",
         title: {
           display: formatOptions.yAxisTitle?.yAxisTitleVisibility !== false,
@@ -57673,11 +57971,13 @@
           }
         },
         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(
@@ -57692,7 +57992,7 @@
           color: gridColor
         },
         border: {
-          color: formatOptions.yAxisLabel?.yAxisColorInverted ?? "#cccccc",
+          color: formatOptions.yAxisLabel?.yAxisColor ?? "#cccccc",
           width: parseFloat(formatOptions.yAxisLabel?.yAxisWidth ?? "0.5")
         }
       };
@@ -57707,12 +58007,17 @@
         if (opts.scales.y.title) {
           opts.scales.y.title.text = formatOptions.xAxisTitle?.xAxisTitleText ?? "Dimension";
         }
+        const hRot = formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0;
+        if (opts.scales.x.ticks) {
+          opts.scales.x.ticks.maxRotation = hRot;
+          opts.scales.x.ticks.minRotation = hRot;
+        }
       } else {
         opts.scales = { x: xScaleOptions, y: yScaleOptions };
       }
       if (hasSecondaryAxis) {
         opts.scales.y1 = {
-          display: formatOptions.secondaryYAxisLabel?.secondaryYAxisLabelVisibility !== false,
+          display: true,
           position: "right",
           title: {
             display: formatOptions.secondaryYAxisTitle?.secondaryYAxisTitleVisibility !== false,
@@ -57724,9 +58029,13 @@
             }
           },
           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(
@@ -57736,7 +58045,11 @@
               );
             }
           },
-          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");
@@ -57758,6 +58071,7 @@
   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 };
@@ -57769,7 +58083,8 @@
     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) {
@@ -57819,14 +58134,25 @@
         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:
@@ -57836,23 +58162,7 @@
     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}
@@ -57865,7 +58175,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,
@@ -72928,7 +73243,13 @@ ${formattedValue}` : formattedValue;
       };
     }, [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,
@@ -72936,9 +73257,37 @@ ${formattedValue}` : formattedValue;
           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%" } }) })
+        ]
       }
     );
   };