pace-chart-lib 1.0.65 → 1.0.67

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

@@ -13097,7 +13097,7 @@ function setChartTitle(svg, formatOptions, width, chartTitleHeight) {
   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;
@@ -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);
@@ -21000,19 +21064,20 @@ function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOpti
     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,
@@ -27357,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) => {
@@ -27376,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,
@@ -27910,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) => {
@@ -27931,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, "-") + '"]'
@@ -28458,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]);
@@ -28479,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) => {
@@ -28500,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(
@@ -28993,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,
@@ -29032,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,
@@ -29102,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(
@@ -29126,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,
@@ -29193,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);
@@ -29438,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,
@@ -29477,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,
@@ -29553,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(
@@ -29577,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,
@@ -29655,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);
@@ -29921,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);
@@ -30606,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(
@@ -30977,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";
@@ -31010,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);
     }
@@ -31331,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);
@@ -31799,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,
@@ -31842,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");
         });
@@ -54343,6 +54442,7 @@ const OrganizationChart = ({
   };
   const dataPreparation = () => {
     try {
+      const sortType = formatOptions?.plotArea?.sortBy ?? "default";
       chartDirection = chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
       var sum2 = 0;
       var absoluteSum = 0;
@@ -54353,12 +54453,17 @@ const OrganizationChart = ({
       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) {
@@ -55383,6 +55488,15 @@ const ScatterChart = ({
     ));
     initSvg(svgRef, width, height, chartFormatOptions);
     chartAreaTagG = initChartArea(svg, margins);
+    initPlotArea(
+      chartAreaTagG,
+      formatOptions,
+      0,
+      innerWidth2,
+      innerHeight2,
+      "Scatter",
+      chartId
+    );
     drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
     initScale();
     drawXAxis();
@@ -55529,11 +55643,8 @@ const ScatterChart = ({
   };
   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) {
@@ -55542,6 +55653,8 @@ const ScatterChart = ({
   };
   const drawXAxis = () => {
     try {
+      const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksHeight) || 100;
+      const tickSize = tickHeightPercentage / 100 * innerHeight2;
       let { xAxisLabelArray, customTickValue } = responsiveXaxisLabelForNumericValue(
         maxDimension,
         minDimension,
@@ -55552,6 +55665,11 @@ const ScatterChart = ({
         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,
@@ -55559,7 +55677,7 @@ const ScatterChart = ({
           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,
@@ -55578,6 +55696,8 @@ const ScatterChart = ({
   };
   const drawYAxis = () => {
     try {
+      const tickWidthPercentage = parseFloat(formatOptions.plotArea.ticksWidth) || 100;
+      const tickSize = tickWidthPercentage / 100 * innerWidth2;
       let { yAxisLabelArray, customTickValue } = responsiveYaxisLabel(
         maxMeasure,
         minMeasure,
@@ -55593,7 +55713,7 @@ const ScatterChart = ({
           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,
@@ -55776,10 +55896,12 @@ const ScatterChart = ({
       ).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(
@@ -55862,35 +55984,24 @@ const ScatterChart = ({
       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);
     }