pace-chart-lib 1.0.65 → 1.0.67

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

@@ -13100,7 +13100,7 @@
     let object2 = svg.append("foreignObject").attr(
       "visibility",
       formatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden"
-    ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width).attr("height", chartTitleHeight + "px");
+    ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width - 4).attr("height", chartTitleHeight + "px");
     const parseHTMLText = (html) => {
       const temp = document.createElement("div");
       temp.innerHTML = html;
@@ -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);
@@ -21003,19 +21067,20 @@
       let maxLegendWidth = maxLegendDimensions[0];
       let legendMargin = width15Percent < maxLegendWidth + 10 ? width15Percent : maxLegendWidth + 10;
       let totalHeight = formatOptions.plotArea.numberOfBubbles ? 20 : 0;
-      let dimensionHeightWidth = preCalculateTextDimensions(
-        getNumberWithFormatFunction(
-          formatOptions.xAxisLabel.xAxisDisplayUnits,
-          formatOptions.xAxisLabel.xAxisNumberFormat,
-          formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
-        )(
-          maxDimension
-        ).toString(),
-        convertStringToNumber(formatOptions.xAxisLabel.xAxisLabelFontSize),
+      const maxDim = getNumberWithFormatFunction(
+        formatOptions.xAxisLabel.xAxisDisplayUnits,
+        formatOptions.xAxisLabel.xAxisNumberFormat,
+        formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
+      )(
+        maxDimension
+      ).toString();
+      let dimensionHeightWidth = calculateWidthHeightDynamically(
+        maxDim,
+        formatOptions.xAxisLabel.xAxisLabelFontSize,
         formatOptions.xAxisLabel.xAxisLabelFontFamily,
         formatOptions.xAxisLabel.xAxisLabelRotation
       );
-      let maxDimensionWidth = dimensionHeightWidth.width + 10;
+      let maxDimensionWidth = dimensionHeightWidth[3] + 10;
       let xTitle = formatOptions.xAxisTitle.xAxisTitleVisibility ? formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0 ? preCalculateTextDimensions(
         formatOptions.xAxisTitle.xAxisTitleHTML,
         void 0,
@@ -27360,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) => {
@@ -27379,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,
@@ -27913,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) => {
@@ -27934,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, "-") + '"]'
@@ -28461,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]);
@@ -28482,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) => {
@@ -28503,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(
@@ -28996,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,
@@ -29035,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,
@@ -29105,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(
@@ -29129,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,
@@ -29196,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);
@@ -29441,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,
@@ -29480,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,
@@ -29556,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(
@@ -29580,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,
@@ -29658,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);
@@ -29924,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);
@@ -30609,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(
@@ -30980,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";
@@ -31013,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);
       }
@@ -31334,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);
@@ -31802,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,
@@ -31845,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");
           });
@@ -54346,6 +54445,7 @@
     };
     const dataPreparation = () => {
       try {
+        const sortType = formatOptions?.plotArea?.sortBy ?? "default";
         chartDirection = chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
         var sum2 = 0;
         var absoluteSum = 0;
@@ -54356,12 +54456,17 @@
         let tempData = getFlattenedData(rootNode).filter(
           (data2) => data2.value !== null
         );
+        if (sortType !== "default") {
+          tempData = tempData.sort(
+            (a2, b) => sortType === "asc" ? a2.value - b.value : b.value - a2.value
+          );
+        }
         createIdIndexMap(tempData);
         generateUID(tempData);
         chartData = addStyleObjectToChartData(tempData);
         if (chartFormatOptions.heatMap.showHeatMap) {
           heatMapScale = sequential().domain([minMeasure, maxMeasure]).interpolator(
-            interpolateRgb$1(chartFormatOptions.heatMap.heatMapMaxColor, chartFormatOptions.heatMap.heatMapMinColor)
+            interpolateRgb$1(chartFormatOptions.heatMap.heatMapMinColor, chartFormatOptions.heatMap.heatMapMaxColor)
           );
         }
       } catch (error) {
@@ -55386,6 +55491,15 @@
       ));
       initSvg(svgRef, width, height, chartFormatOptions);
       chartAreaTagG = initChartArea(svg, margins);
+      initPlotArea(
+        chartAreaTagG,
+        formatOptions,
+        0,
+        innerWidth2,
+        innerHeight2,
+        "Scatter",
+        chartId
+      );
       drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
       initScale();
       drawXAxis();
@@ -55532,11 +55646,8 @@
     };
     const initScale = () => {
       try {
-        let xStartValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMinText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMinText) : minDimension > 0 ? 0 : minDimension * 1.1;
-        let xEndValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMaxText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMaxText) : maxDimension * 1.1;
         let yStartValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMinText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMinText) : minMeasure > 0 ? 0 : minMeasure * 1.1;
         let yEndValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMaxText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMaxText) : maxMeasure * 1.1;
-        xScale = linear$1().domain([xStartValue, xEndValue]).range([0, innerWidth2]);
         yScale = linear$1().domain([yStartValue, yEndValue]).range([innerHeight2, 0]);
         sizeScale = linear$1().domain([sizeValueMin, sizeValueMax]).range([1, 10]);
       } catch (e) {
@@ -55545,6 +55656,8 @@
     };
     const drawXAxis = () => {
       try {
+        const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksHeight) || 100;
+        const tickSize = tickHeightPercentage / 100 * innerHeight2;
         let { xAxisLabelArray, customTickValue } = responsiveXaxisLabelForNumericValue(
           maxDimension,
           minDimension,
@@ -55555,6 +55668,11 @@
           innerHeight2,
           false
         );
+        if (xAxisLabelArray.length > 0) {
+          xScale = linear$1().domain([xAxisLabelArray[0], xAxisLabelArray[xAxisLabelArray.length - 1]]).range([0, innerWidth2]);
+        } else {
+          xScale = linear$1().domain([customXaxisMinValue, customXaxisMaxValue]).range([0, innerWidth2]);
+        }
         const xAxis = axisBottom(xScale).tickFormat(
           getNumberWithFormatFunction(
             formatOptions.xAxisLabel.xAxisDisplayUnits,
@@ -55562,7 +55680,7 @@
             formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
           )
         ).tickSize(
-          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
+          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -tickSize : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? tickSize : 0 : 0 : 0
         ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
         initXaxis(
           chartAreaTagG,
@@ -55581,6 +55699,8 @@
     };
     const drawYAxis = () => {
       try {
+        const tickWidthPercentage = parseFloat(formatOptions.plotArea.ticksWidth) || 100;
+        const tickSize = tickWidthPercentage / 100 * innerWidth2;
         let { yAxisLabelArray, customTickValue } = responsiveYaxisLabel(
           maxMeasure,
           minMeasure,
@@ -55596,7 +55716,7 @@
             formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2"
           )
         ).tickSize(
-          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -tickSize : 0 : 0
         ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
         initYaxis(
           chartAreaTagG,
@@ -55779,10 +55899,12 @@
         ).style("flex-wrap", "nowrap").style("padding-left", "3px");
         ColorList.forEach((d, i) => {
           let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("margin", "3px 0px").style("width", "fit-content").style("flex-wrap", "nowrap").style("white-space", "nowrap").style("font-size", chartFormatOptions.legends.legendFontSize + "px").style("font-family", chartFormatOptions.legends.legendFontFamily).on("mousemove", function(d2) {
-            svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-            svg.selectAll(
-              '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
-            ).classed("highlight", true).classed("unhighlight", false);
+            if (chartFormatOptions.legends.onHoverEffect) {
+              svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
+              svg.selectAll(
+                '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
+              ).classed("highlight", true).classed("unhighlight", false);
+            }
           }).on("mouseout", function(d2) {
             svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
             svg.selectAll(
@@ -55865,35 +55987,24 @@
         logError$2(fileName, "shapeListWithScroll", e);
       }
     };
-    const shapesForScatterPlot = (innerdiv, shapes) => {
+    const shapesForScatterPlot = (innerdiv, shape) => {
       try {
-        shapes = shapes.toLowerCase();
-        switch (shapes) {
-          case "circle":
-          case "none":
-            innerdiv.append("svg").attr("height", "10px").attr("width", "10px").append("circle").attr("cx", "5px").attr("cy", "5px").attr("r", "5px").style("fill", "black");
-            break;
-          case "square":
-            innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px");
-            break;
-          case "triangle":
-            innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black");
-            break;
-          case "cross":
-            innerdiv.append("div").style("height", "4px").style("width", "10px").style("background", "black").style("border-radius", "1px").append("div").style("height", "10px").style("width", "4px").style("background", "black").style("border-radius", "1px").style("position", "relative").style("top", "-3px").style("left", "3px");
-            break;
-          case "diamond":
-            innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px").style("transform", "rotate(45deg)");
-            break;
-          case "star":
-            innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black").style("position", "relative").style("top", "-2px").style("transform", "rotate(0deg)").append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-top", "10px solid black").style("position", "absolute").style("top", "2px").style("left", "-5.5px").style("transform", "rotate(360deg)");
-            break;
-          case "wye":
-            innerdiv.append("div").style("height", "6.5px").style("width", "3px").style("background", "black").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(-55deg)").style("position", "relative").style("top", "-2px").style("left", "-2px").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(108deg)").style("position", "relative").style("top", "3px").style("left", "2px");
-            break;
-          default:
-            break;
-        }
+        const symbolMap = {
+          none: circle,
+          circle,
+          square,
+          triangle,
+          cross,
+          diamond,
+          star,
+          wye
+        };
+        const symbolType = symbolMap[shape?.toLowerCase()] || circle;
+        const size = 80;
+        innerdiv.append("svg").attr("width", 14).attr("height", 14).append("path").attr(
+          "d",
+          Symbol$1().type(symbolType).size(size)()
+        ).attr("transform", "translate(7,7)").attr("fill", "black");
       } catch (error) {
         logError$2(fileName, "shapesForScatterPlot", error);
       }