pace-chart-lib 1.0.66 → 1.0.68

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

@@ -13596,16 +13596,42 @@
           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) {
@@ -15563,16 +15589,41 @@
           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) {
@@ -16396,22 +16447,44 @@
         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) {
@@ -18045,7 +18118,6 @@
     let requiredData = [];
     let scrollPosition = 0;
     let visibleBars;
-    let annotationTimeoutId;
     let chartJSON = {
       dimensionList,
       chartType,
@@ -18983,7 +19055,6 @@
         filteredDimension,
         xScale
       );
-      clearTimeout(annotationTimeoutId);
       const renderAnnotationsAndTotals = () => {
         commonAnnotationsForCustomChart(
           filteredData,
@@ -19028,15 +19099,8 @@
           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);
@@ -27361,7 +27425,7 @@
       });
       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) => {
@@ -27380,7 +27444,11 @@
         ).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,
@@ -27914,7 +27982,7 @@
       });
       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) => {
@@ -27935,7 +28003,11 @@
         ).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, "-") + '"]'
@@ -28462,7 +28534,7 @@
       ).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]);
@@ -28483,7 +28555,7 @@
       });
       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) => {
@@ -28504,7 +28576,11 @@
         ).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(
@@ -28997,7 +29073,7 @@
       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,
@@ -29036,7 +29112,7 @@
             }
             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,
@@ -29106,13 +29182,13 @@
           });
           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(
@@ -29130,7 +29206,7 @@
             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,
@@ -29197,6 +29273,9 @@
             }
             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);
@@ -29442,7 +29521,7 @@
       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,
@@ -29481,7 +29560,7 @@
             }
             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,
@@ -29557,13 +29636,13 @@
           });
           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(
@@ -29581,7 +29660,7 @@
             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,
@@ -29659,6 +29738,9 @@
               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);
@@ -29925,6 +30007,9 @@
               )(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);
@@ -30610,6 +30695,9 @@
             }
           }).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(
@@ -30981,7 +31069,7 @@
             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";
@@ -31014,6 +31102,9 @@
             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);
       }
@@ -31335,6 +31426,9 @@
                       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);
@@ -31803,7 +31897,8 @@
             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,
@@ -31846,6 +31941,9 @@
           }).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");
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS.",
   "license": "MIT",
   "type": "module",

package/dist/Components/Charts/ChartJS/charts/CJSAreaChart.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSAreaChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    /** When true, stacks area datasets on the Y-axis */
-    isChartStacked?: boolean;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js area chart.
- * Built on the line type with fill: true and a semi-transparent background.
- */
-declare const CJSAreaChart: React.FC<ICJSAreaChartProps>;
-export default CJSAreaChart;

package/dist/Components/Charts/ChartJS/charts/CJSBubbleChart.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSBubbleChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth: number;
-    clientHeight: number;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js bubble chart.
- * Uses TDataPoint.markerSize (or properties.markerSize) as bubble radius.
- */
-declare const CJSBubbleChart: React.FC<ICJSBubbleChartProps>;
-export default CJSBubbleChart;

package/dist/Components/Charts/ChartJS/charts/CJSColumnChart.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSColumnChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    /** When true renders a stacked bar chart */
-    isChartStacked?: boolean;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js vertical bar chart.
- * Accepts the same TData / formatOptions props used throughout the library.
- */
-declare const CJSColumnChart: React.FC<ICJSColumnChartProps>;
-export default CJSColumnChart;

package/dist/Components/Charts/ChartJS/charts/CJSDonutChart.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSDonutChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth: number;
-    clientHeight: number;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js doughnut (donut) chart.
- * The inner radius cutout is derived from formatOptions.plotArea.innerRadius (0–100).
- * Segment colours are derived from the active colorBank so they match
- * the host application's selected theme.
- */
-declare const CJSDonutChart: React.FC<ICJSDonutChartProps>;
-export default CJSDonutChart;

package/dist/Components/Charts/ChartJS/charts/CJSHorizontalBarChart.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSHorizontalBarChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    isChartStacked?: boolean;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js horizontal bar chart.
- * Chart.js v4 uses indexAxis: "y" on a regular "bar" chart for horizontal bars.
- */
-declare const CJSHorizontalBarChart: React.FC<ICJSHorizontalBarChartProps>;
-export default CJSHorizontalBarChart;

package/dist/Components/Charts/ChartJS/charts/CJSLineChart.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSLineChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    /** When true, stacks line datasets on the Y-axis */
-    isChartStacked?: boolean;
-    /** Active theme colour bank from the host application. Falls back to default palette. */
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js line chart.
- * Supports secondary Y axis, per-series line styles, and optional Y-axis stacking.
- */
-declare const CJSLineChart: React.FC<ICJSLineChartProps>;
-export default CJSLineChart;

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackAreaChart.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSNormalizedStackAreaChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js 100% normalized stacked area chart.
- * Values are converted to percentages of the column total before rendering.
- * The Y-axis is bounded 0–100 and ticked as whole-number percentages.
- */
-declare const CJSNormalizedStackAreaChart: React.FC<ICJSNormalizedStackAreaChartProps>;
-export default CJSNormalizedStackAreaChart;

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackColumnChart.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSNormalizedStackColumnChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js 100% normalized stacked vertical bar chart.
- * Values are converted to percentages of the column total before rendering.
- * The Y-axis is bounded 0–100 and ticked as whole-number percentages.
- */
-declare const CJSNormalizedStackColumnChart: React.FC<ICJSNormalizedStackColumnChartProps>;
-export default CJSNormalizedStackColumnChart;

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackHorizontalBarChart.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import type { TData, TDefaultChartFormatOptionsType } from "../../Core/Common.types";
-interface ICJSNormalizedStackHorizontalBarChartProps {
-    data: TData;
-    formatOptions: TDefaultChartFormatOptionsType;
-    clientWidth?: number;
-    clientHeight?: number;
-    colorBank?: string[];
-    addLocalFilterFromLib?: (clickedLegendData: any) => void;
-}
-/**
- * Chart.js 100% normalized stacked horizontal bar chart.
- * Values are converted to percentages of the row total before rendering.
- * The X-axis is bounded 0–100 and ticked as whole-number percentages.
- */
-declare const CJSNormalizedStackHorizontalBarChart: React.FC<ICJSNormalizedStackHorizontalBarChartProps>;
-export default CJSNormalizedStackHorizontalBarChart;