pace-chart-lib 1.0.66 → 1.0.68

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

@@ -13593,16 +13593,42 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         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})`;
-        });
+        const isLineChartType = chartType === chartTypes.LineChart;
+        if (isLineChartType) {
+          const xRange = xScale.range ? xScale.range() : [0, 1];
+          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 ?? linear$2)(t) >= progress) return t;
+            }
+            return 1;
+          };
+          annotations.selectAll(".annotation").attr("opacity", 0).each(function(d) {
+            const x2 = accessors.x(d.data) ?? 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);
+          });
+        } else {
+          annotations.selectAll(".annotation").attr("transform", function(d) {
+            if (barChart) {
+              const startX = yScaleLeft ? yScaleLeft(0) : 0;
+              const y2 = accessors.y(d.data);
+              return `translate(${startX}, ${y2})`;
+            } else {
+              const x2 = accessors.x(d.data);
+              const scale2 = d.data?.y?.axis === axisTypes.primary ? yScaleLeft : yScaleRight ?? yScaleLeft;
+              const startY = scale2 ? scale2(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) {
@@ -15560,16 +15586,41 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
         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})`;
-        });
+        const isStackLineType = chartType === chartTypes.StackLineChart || chartType === chartTypes.NormalizedStackLineChart;
+        if (isStackLineType) {
+          const xRange = xScale.range ? xScale.range() : [0, 1];
+          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 ?? linear$2)(t) >= progress) return t;
+            }
+            return 1;
+          };
+          annotations.selectAll(".annotation").attr("opacity", 0).each(function(d) {
+            const x2 = accessors.x(d.data) ?? 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);
+          });
+        } else {
+          annotations.selectAll(".annotation").attr("transform", function(d) {
+            if (barChart) {
+              const startX = yScaleLeft ? yScaleLeft(0) : 0;
+              const y2 = accessors.y(d.data);
+              return `translate(${startX}, ${y2})`;
+            } else {
+              const x2 = accessors.x(d.data);
+              const startY = yScaleLeft ? yScaleLeft(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) {
@@ -16393,22 +16444,44 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
       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);
-        });
+        const isAreaType = [
+          chartTypes.AreaChart,
+          chartTypes.StackAreaChart,
+          chartTypes.NormalizedStackAreaChart,
+          chartTypes.CombinationArea,
+          chartTypes.CombinationStackArea
+        ].includes(type);
+        if (isAreaType) {
+          const stackedTypes = [
+            chartTypes.StackAreaChart,
+            chartTypes.NormalizedStackAreaChart,
+            chartTypes.CombinationStackArea
+          ];
+          mergedMarkers.each(function(d) {
+            const requiredYScale = d.axis === axisTypes.primary ? yScale : yScaleRight;
+            const x2 = xScale(d.dimension);
+            const finalY = stackedTypes.includes(type) ? d[1] > 0 ? requiredYScale(d[1]) : requiredYScale(d[0]) : requiredYScale(d.value);
+            const baseY = yScale(0);
+            select$2(this).attr("transform", `translate(${x2},${baseY})`).transition().duration(duration).ease(ease).attr("transform", `translate(${x2},${finalY})`);
+          });
+        } else {
+          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) {
@@ -18042,7 +18115,6 @@ const CustomColumnChart = ({
   let requiredData = [];
   let scrollPosition = 0;
   let visibleBars;
-  let annotationTimeoutId;
   let chartJSON = {
     dimensionList,
     chartType,
@@ -18980,7 +19052,6 @@ const CustomColumnChart = ({
       filteredDimension,
       xScale
     );
-    clearTimeout(annotationTimeoutId);
     const renderAnnotationsAndTotals = () => {
       commonAnnotationsForCustomChart(
         filteredData,
@@ -19025,15 +19096,8 @@ const CustomColumnChart = ({
         isReportEditable
       );
     };
-    if (formatOptions.animation.animationEnabled) {
-      svg.selectAll(".annotation-group").remove();
-      annotationTimeoutId = setTimeout(
-        renderAnnotationsAndTotals,
-        formatOptions.animation.animationDuration
-      );
-    } else {
-      renderAnnotationsAndTotals();
-    }
+    svg.selectAll(".annotation-group").remove();
+    renderAnnotationsAndTotals();
   };
   const createStackData = (requiredStackChatData) => {
     let legendList = requiredStackChatData.data.map((d) => d.legend);
@@ -27358,7 +27422,7 @@ const AreaChart = ({
     });
     areaGroupsEnter.merge(areaGroups).each(function(d) {
       const g = select$2(this);
-      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2.data)).attr(
+      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => enableTransition ? areaGeneratorStart(d2.data) : areaGenerator(d2.data)).attr(
         "stroke",
         (d2) => d2.properties.areaBorderColor !== commonColors.white ? d2.properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d2) => {
@@ -27377,7 +27441,11 @@ const AreaChart = ({
       ).attr(
         "stroke-width",
         (d2) => !isLinesAndMarkersVisible ? 0 : d2.properties.lineStyle !== staticLineStyle.none && formatOptions.plotArea.plotAreaHideLineAndMarkers ? d2.properties.lineWidth : "0"
-      ).attr("fill", "none");
+      ).attr("fill", "none").each(function(d2) {
+        if (enableTransition) {
+          select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d2.data));
+        }
+      });
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2.data)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       onHoverMarkerForAreaChartFamily(
         formatOptions,
@@ -27911,7 +27979,7 @@ const StackAreaChart = ({
     });
     areaGroupsEnter.merge(areaGroups).each(function(d, i) {
       const g = select$2(this);
-      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2)).attr(
+      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => enableTransition ? areaGeneratorStart(d2) : areaGenerator(d2)).attr(
         "stroke",
         (d2) => d2.color !== commonColors.white ? seriesData[i].properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d2) => {
@@ -27932,7 +28000,11 @@ const StackAreaChart = ({
       ).attr(
         "stroke-width",
         () => !isLinesAndMarkersVisible ? 0 : seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : "0"
-      ).attr("fill", "none").style("pointer-events", "none");
+      ).attr("fill", "none").style("pointer-events", "none").each(function(d2) {
+        if (enableTransition) {
+          select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d2));
+        }
+      });
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       svg.selectAll(
         '[hoverId="' + (seriesData[d.index].properties.alias || seriesData[d.index].properties.name || "Legend").replace(/ /g, "-") + '"]'
@@ -28459,7 +28531,7 @@ const NormalizedStackAreaChart = ({
     ).y0((d) => yScaleLeft(d[0])).y1((d) => yScaleLeft(d[1])).defined((d) => d.data.hideZero ? Boolean(d[0]) : true).curve(curveLinear$1);
     const columnGeneratorStart = area().x(
       (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
-    ).y0((d) => yScaleLeft(d[0])).y1((d) => yScaleLeft(d[1])).defined(
+    ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined(
       (d) => d.data.hideZero ? Boolean(d.data.key) : true
     ).curve(getCurveType(formatOptions));
     let areas = gTag.selectAll(".lineGroup").data([stackChartData]);
@@ -28480,7 +28552,7 @@ const NormalizedStackAreaChart = ({
     });
     areaGroupsEnter.merge(areaGroups).each(function(d, i) {
       const g = select$2(this);
-      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => columnGenerator(d2)).attr(
+      g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => enableTransition ? columnGeneratorStart(d2) : columnGenerator(d2)).attr(
         "stroke",
         (d2) => d2.color !== commonColors.white ? seriesData[i].properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d2) => {
@@ -28501,7 +28573,11 @@ const NormalizedStackAreaChart = ({
       ).attr(
         "stroke-width",
         () => !isLinesAndMarkersVisible ? 0 : seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : "0"
-      ).attr("fill", "none").style("pointer-events", "none");
+      ).attr("fill", "none").style("pointer-events", "none").each(function(d2) {
+        if (enableTransition) {
+          select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", columnGenerator(d2));
+        }
+      });
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => columnGenerator(d2)).attr("fill", commonColors.transparent).style("pointer-events", "all").raise();
       svg.selectAll(
         '[hoverId="' + getJQuerySelector(
@@ -28994,7 +29070,7 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
+        chartAreaTagG.append("g").attr("class", "parentGroup pie-label-group").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
             chartFormatOptions,
@@ -29033,7 +29109,7 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
+        chartAreaTagG.append("g").attr("class", "parentGroup pie-label-group").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
             chartFormatOptions,
@@ -29103,13 +29179,13 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
         });
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
-        chartAreaTagG.selectAll("polyline").data(
+        chartAreaTagG.selectAll("polyline.pie-label-connector").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
             chartFormatOptions,
             (d) => d.data.data[0].value
           )
-        ).join("polyline").attr("transform", getPiePosition()).style(
+        ).join("polyline").attr("class", "pie-label-connector").attr("transform", getPiePosition()).style(
           "stroke",
           (d) => chartFormatOptions.connector.connectorColorOption == "Uniform" ? chartFormatOptions.connector.connectorUniformLineColor : d.data.properties.color
         ).style("fill", "none").style(
@@ -29127,7 +29203,7 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           const yC = posB[1];
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
-        chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
+        chartAreaTagG.append("g").attr("class", "pie-label-group").attr("transform", getPiePosition()).selectAll("foreignObject").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
             chartFormatOptions,
@@ -29194,6 +29270,9 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           }
           return htmlString;
         });
+        if (chartFormatOptions.animation.animationEnabled) {
+          chartAreaTagG.selectAll(".pie-label-group, .pie-label-connector").attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
       }
     } catch (error) {
       logError$2(fileName$8, "drawPieDataLabels", error);
@@ -29439,7 +29518,7 @@ const DonutChart = ({
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
+        chartAreaTagG.append("g").attr("class", "parentGroup pie-label-group").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
             chartFormatOptions,
@@ -29478,7 +29557,7 @@ const DonutChart = ({
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
+        chartAreaTagG.append("g").attr("class", "parentGroup pie-label-group").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
             chartFormatOptions,
@@ -29554,13 +29633,13 @@ const DonutChart = ({
         });
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius2 = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
-        chartAreaTagG.selectAll("polyline").data(
+        chartAreaTagG.selectAll("polyline.pie-label-connector").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
             chartFormatOptions,
             (d) => d.data.data[0].value
           )
-        ).join("polyline").attr("transform", getPiePosition()).style(
+        ).join("polyline").attr("class", "pie-label-connector").attr("transform", getPiePosition()).style(
           "stroke",
           (d) => chartFormatOptions.connector.connectorColorOption == "Uniform" ? chartFormatOptions.connector.connectorUniformLineColor : d.data.properties.color
         ).style("fill", "none").style(
@@ -29578,7 +29657,7 @@ const DonutChart = ({
           const yC = posB[1];
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
-        chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
+        chartAreaTagG.append("g").attr("class", "pie-label-group").attr("transform", getPiePosition()).selectAll("foreignObject").data(
           applyAnnotationRangeFilter(
             pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
             chartFormatOptions,
@@ -29656,6 +29735,9 @@ const DonutChart = ({
             return "";
           }
         });
+        if (chartFormatOptions.animation.animationEnabled) {
+          chartAreaTagG.selectAll(".pie-label-group, .pie-label-connector").attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
       }
     } catch (error) {
       logError$2(fileName$7, "drawDonutDataLabels", error);
@@ -29922,6 +30004,9 @@ const Treemap = ({ data, formatOptions, chartId }) => {
             )(d.data.data[0].value)
           );
         }
+        if (shouldAnimate) {
+          leaf.selectAll("text").attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
       }
     } catch (error) {
       logError$2(fileName$6, "initChartRect", error);
@@ -30607,6 +30692,9 @@ const PyramidChart = ({
           }
         }).notePadding(0).annotations(finalAnnotationList);
         let annotations = chartAreaTagG.append("g").attr("class", "annotation-group parentGroup").call(makeAnnotations);
+        if (chartFormatOptions.animation.animationEnabled) {
+          annotations.attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
         annotations.selectAll("rect").style("visibility", "hidden");
         annotations.selectAll(".annotation-subject").remove();
         annotations.selectAll(".connector").style(
@@ -30978,7 +31066,7 @@ const ProgressChart = ({
           return () => "";
         }
       });
-      chartAreaTagG.append("text").attr("transform", getTransformString()).attr("dy", "0.35em").attr("text-anchor", "middle").attr(
+      const centerLabel = chartAreaTagG.append("text").attr("transform", getTransformString()).attr("dy", "0.35em").attr("text-anchor", "middle").attr(
         "visibility",
         () => {
           if (!chartFormatOptions.plotArea.dataLabels) return "hidden";
@@ -31011,6 +31099,9 @@ const ProgressChart = ({
           chartFormatOptions.plotArea.dataLabelDecimalPrecision
         )(progressValue);
       });
+      if (chartFormatOptions.animation.animationEnabled) {
+        centerLabel.attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+      }
     } catch (error) {
       logError$2(fileName$3, "drawProgressChart", error);
     }
@@ -31332,6 +31423,9 @@ const Speedometer = ({
                     chartFormatOptions.plotArea.dataLabelDecimalPrecision
                   )(d)
                 ).attr("visibility", (d) => d === "" ? "hidden" : "visible");
+                if (chartFormatOptions.animation.animationEnabled) {
+                  lg.selectAll("text").attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+                }
               }
               if (chartFormatOptions.pointerValue.showPointerValue && seriesData.length === 2) {
                 setPointerValueText(positionTransformString);
@@ -31800,7 +31894,8 @@ const RadialBarChart = ({
           chartFormatOptions,
           (d) => d?.data?.[0]?.value ?? 0
         );
-        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(
+        const arcLabelTexts = 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);
+        arcLabelTexts.append("textPath").attr("xlink:href", (d, i) => `#arc-path-${d.index ?? i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
           (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
             chartFormatOptions.plotArea.plotAreaDisplayUnits,
@@ -31843,6 +31938,9 @@ const RadialBarChart = ({
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();
         });
+        if (chartFormatOptions.animation.animationEnabled) {
+          arcLabelTexts.attr("opacity", 0).transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("opacity", 1);
+        }
         arcs.each((d, i) => {
           svg2.append("path").attr("id", `arc-path-${i}-` + chartId).attr("d", dummyArc(d, i)).attr("fill", "none").attr("stroke", "none");
         });