pace-chart-lib 1.0.36 → 1.0.39

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

@@ -12238,9 +12238,9 @@
       throw error;
     }
   }
-  function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptions, chartJSON) {
+  function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptions, innerHeight2) {
     try {
-      let autoLabelFlag = false;
+      let autoLabelFlag = true;
       let secondaryCustomYaxisIntervalValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisIntervalText);
       let secondaryCustomYaxisMinValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText);
       let secondaryCustomYaxisMaxValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText);
@@ -12257,6 +12257,7 @@
         let minRequiredTicks = 18;
         let tickvalue = secondaryCustomYaxisMinValue == 0 || secondaryCustomYaxisMinValue ? secondaryCustomYaxisMinValue : secondaryYmin < 0 ? Math.round(secondaryYmin) : 0;
         secondaryYAxisLabelArray.push(tickvalue);
+        autoLabelFlag = false;
         if (secondaryCustomTickValue > 100) {
           let message = "Tick count cannot exceed more than 100.";
           if (minValue < 0) {
@@ -12282,17 +12283,16 @@
           }
         }
       } else {
-        let autoLabelFlag2 = true;
         let labelWidthPx = calculateWidthHeightDynamically(
-          (parseFloat(formatOptions.yAxisLabel.yAxisMaxText) || chartJSON.yMaxRight).toString(),
-          formatOptions.yAxisLabel.yAxisLabelFontSize,
-          formatOptions.yAxisLabel.yAxisLabelFontFamily,
+          (parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText) || secondaryYmax).toString(),
+          formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontSize,
+          formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontFamily,
           0
         );
         secondaryYAxisLabelArray = getLabelsFromAlgo(
-          parseFloat(formatOptions.yAxisLabel.yAxisMinText) || chartJSON.yMinRight,
-          parseFloat(formatOptions.yAxisLabel.yAxisMaxText) || chartJSON.yMaxRight,
-          innerHeight,
+          parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText) || secondaryYmin,
+          parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText) || secondaryYmax,
+          innerHeight2,
           labelWidthPx[0]
         );
       }
@@ -12347,7 +12347,7 @@
       if (isTornadoChart) {
         const maxAbs = Math.max(Math.abs(Ymin), Math.abs(Ymax));
         const finalMax = customYaxisMaxValue || maxAbs;
-        const finalMin = customYaxisMinValue || -finalMax;
+        const finalMin = customYaxisMinValue || Ymin;
         if (customYaxisIntervalValue && customYaxisIntervalValue > 0) {
           for (let v = finalMin; v <= finalMax + 1e-6; v += customYaxisIntervalValue) {
             yAxisLabelArray.push(parseFloat(v.toFixed(6)));
@@ -12356,10 +12356,11 @@
         } else {
           autoLabelFlag = true;
           const tickCount = 6;
-          for (let i = -tickCount; i <= tickCount; i++) {
-            yAxisLabelArray.push(
-              parseFloat((i * finalMax / tickCount).toFixed(6))
-            );
+          const range2 = finalMax - finalMin;
+          const step2 = range2 / tickCount;
+          for (let i = 0; i <= tickCount; i++) {
+            const v = finalMin + i * step2;
+            yAxisLabelArray.push(parseFloat(v.toFixed(6)));
           }
           customTickValue = barChart ? innerWidth2 / 80 : innerHeight2 / 80;
         }
@@ -12685,7 +12686,7 @@
       XaxisG.select(".domain").style("stroke", formatOptions.xAxisLabel.xAxisColor).attr(
         "stroke-width",
         formatOptions.xAxisLabel.xAxisWidth ? formatOptions.xAxisLabel.xAxisWidth : formatOptions.plotArea.plotAreaBorderThickness
-      ).style("shape-rendering", "crispEdges");
+      ).style("shape-rendering", "crispEdges").raise();
       return gTag;
     } catch (error) {
       throw error;
@@ -12846,9 +12847,6 @@
   }
   function setXaxistitle$1(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartType, yLabel, innerWidth2, innerHeight2) {
     try {
-      let xAxisLabelPosition = formatOptions.xAxisLabel.xAxisPosition;
-      let chartsWithXScrollFlag = true;
-      let chartsWithYScrollFlag = false;
       let object2 = svg.append("foreignObject").attr(
         "visibility",
         formatOptions.xAxisTitle.xAxisTitleVisibility ? "visible" : "hidden"
@@ -13217,7 +13215,7 @@
               width: 15
             },
             color: d.Labelcolor,
-            type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+            type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
             height,
             width
           };
@@ -13229,7 +13227,9 @@
           }
         });
         if (formatOptions.annotation.annotationHideZeroValues) {
-          annotationsList = annotationsList.filter((d) => d.data.y.measure != 0);
+          annotationsList = annotationsList.filter(
+            (d) => barChart ? d.data.x.measure !== 0 : d.data.y.measure !== 0
+          );
         }
         if (oldAnnotationList.length === 0) {
           oldAnnotationList = annotationsList;
@@ -13745,7 +13745,7 @@
               width: 15
             },
             color: d.labelColor || d.data.labelColor,
-            type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+            type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
             height,
             width
           };
@@ -13802,7 +13802,7 @@
               }
             }
           }
-          finalAnnotationList.push(newAnnotation);
+          newAnnotation.data.labelPosition != 4 && finalAnnotationList.push(newAnnotation);
         });
         makeAnnotations.editMode(formatOptions.annotation.annotationDraggable && isReportEditable).accessors({
           x: function(d) {
@@ -13901,7 +13901,7 @@
       throw error;
     }
   };
-  const annotationTypeforCharts = (d3Annotation2, type) => {
+  const annotationTypeforCharts$1 = (d3Annotation2, type) => {
     try {
       let annotationTypeMap = {
         1: d3Annotation2.annotationLabel,
@@ -15127,7 +15127,7 @@
               width: 15
             },
             color: d.properties && d.properties[dataLabelColor] ? d.properties[dataLabelColor] : d.data.labelColor,
-            type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+            type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
             height,
             width
           };
@@ -15321,7 +15321,7 @@
           translate(${-(xScaleBottom(yMaxLeft * 0.01) + xLabelMargin)} ,${-dimHeight / 2})` : `rotate(${90 - formatOptions.xAxisLabel.xAxisLabelRotation})
           translate(${formatOptions.xAxisLabel.xAxisLabelRotation != 0 ? `${xaxisLabelPosition === 1 ? 10 : -xLabelMargin},${-dimHeight / 2}` : -labelWidth / 2 + " ,2"})`;
   }
-  const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yAxis, xAxisTop, xScaleBottom, yMaxLeft, dimensionList, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth, xScale) => {
+  const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yAxis, xAxisTop, xScaleBottom, yMaxLeft, dimensionList, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth, xScale, xLabelSecondaryAxis) => {
     try {
       const isTornadoChart = chartType === chartTypes.TornadoChart;
       let fontStyle = formatOptions.xAxisLabel.xAxisLabelFontStyle;
@@ -15359,7 +15359,7 @@
       );
       const YaxisG = gTag.append("g").attr("id", "yAxisG").attr(
         "transform",
-        isTornadoChart ? `translate(${xScaleBottom(0)},0)` : `translate(${xaxisLabelPosition === 0 ? 0 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0)},0)`
+        isTornadoChart ? `translate(${xScaleBottom(0)},0)` : `translate(${xaxisLabelPosition === 0 ? 0 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0)},${xAxisTop ? xLabelSecondaryAxis : 0})`
       ).call(yAxis);
       let foreignObject = YaxisG.selectAll("g").append("foreignObject").attr("class", "testingoverflowing").style("align-content", "center").attr("width", xLabelMargin).attr("height", dimHeight + "px").attr(
         "transform",
@@ -15476,14 +15476,14 @@
       throw e;
     }
   };
-  const initXaxisTop = (formatOptions, gTag, xLabelSecondary, xAxisTop) => {
+  const initXaxisTop = (formatOptions, gTag, xLabelSecondary, xAxisTop, innerWidth2) => {
     try {
       let fontStyle = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontStyle;
-      gTag.append("rect").attr("transform", `translate(0,-${xLabelSecondary})`).attr("height", xLabelSecondary).attr("width", innerWidth).attr(
+      gTag.append("rect").attr("transform", `translate(0,0)`).attr("height", xLabelSecondary).attr("width", innerWidth2).attr(
         "fill",
         formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : "none" : formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : formatOptions.chartArea.chartAreaColor
       );
-      const XaxisG = gTag.append("g").call(xAxisTop).attr("transform", `translate(0,0)`);
+      const XaxisG = gTag.append("g").call(xAxisTop).attr("transform", `translate(0,${xLabelSecondary})`);
       XaxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
       XaxisG.selectAll("text").attr("transform", "rotate(270) translate(5,5)").style("text-anchor", "start").style("fill", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor : "none").style("font-size", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontSize).style("font-family", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
         "text-decoration",
@@ -15681,7 +15681,7 @@
               width: 15
             },
             color: formatOptions.total.totalColor,
-            type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+            type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
             height,
             width
           };
@@ -15760,6 +15760,13 @@
       });
     }
   }
+  function getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, shouldAdjustForAxisPosition = false) {
+    const axisPositionMultiplier = shouldAdjustForAxisPosition ? formatOptions.xAxisLabel.xAxisPosition == "1" ? -1 : 1 : 1;
+    const dataTableHeightIfPreset = dataTableHeight > 0 ? dataTableHeight : 0;
+    const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksHeight) || 100;
+    const actualTickHeight = (innerHeight2 - dataTableHeightIfPreset) * tickHeightPercentage / 100;
+    return formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -actualTickHeight * axisPositionMultiplier : 0 : 0;
+  }
   const chartProperties = {
     color: "defaultColor",
     name: "",
@@ -17342,6 +17349,12 @@
         ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
+        let seondaryResponsiveLablesObj = responsiveSecondaryYaxisLabel(
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : yScaleRight.domain()[1],
+          yScaleRight.domain()[0],
+          formatOptions,
+          innerHeight2
+        );
         yAxisRight = axisRight(yScaleRight).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -17350,19 +17363,9 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision
           )
         ).tickValues(
-          responsiveSecondaryYaxisLabel(
-            secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-            chartJSON.yMinRight,
-            formatOptions,
-            chartJSON
-          ).secondaryYAxisLabelArray
+          seondaryResponsiveLablesObj.autoLabelFlag ? void 0 : seondaryResponsiveLablesObj.secondaryYAxisLabelArray
         ).ticks(
-          responsiveSecondaryYaxisLabel(
-            secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-            chartJSON.yMinRight,
-            formatOptions,
-            chartJSON
-          ).secondaryCustomTickValue ?? innerHeight2 / 30
+          seondaryResponsiveLablesObj.secondaryCustomTickValue ?? innerHeight2 / 30
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
@@ -17371,7 +17374,7 @@
     const getXAxis = () => {
       let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
       xAxis = (xaxisLabelPosition == 1 ? axisTop(xScale) : axisBottom(xScale)).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : -formatOptions.plotArea.ticksHeight * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) : 0 : 0
+        getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight)
       ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
     };
     const getChartType = (lineData) => {
@@ -17852,7 +17855,7 @@
             ...point2,
             type: series.properties.type,
             axis: series.properties.axis,
-            labelPosition: formatOptions?.annotation?.annotationPosition.toString() === "4" ? series.properties.dataLabelPosition.toString() : formatOptions?.annotation?.annotationPosition.toString(),
+            labelPosition: formatOptions?.annotation?.annotationPosition.toString() === "4" ? series.properties.annotationPosition.toString() : formatOptions?.annotation?.annotationPosition.toString(),
             labelColor: series.properties.labelColor,
             legendUniqueId: series.properties.legendUniqueId
           };
@@ -18005,7 +18008,7 @@
           secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
           secondaryCustomYaxisMinValue ? secondaryCustomYaxisMinValue : chartJSON.yMinRight,
           formatOptions,
-          chartJSON
+          innerHeight2
         ).secondaryYAxisLabelArray;
         chartJSON.yMaxRight = secondaryYAxisLabelArray[secondaryYAxisLabelArray.length - 1];
         chartJSON.yMinRight = secondaryYAxisLabelArray[0];
@@ -18575,7 +18578,7 @@
           stackData["individualAnnotationVisibility"] = JSON.parse(
             JSON.stringify(requiredStackChatData.data[j].properties.annotation)
           );
-          d.data.labelPosition = formatOptions?.annotation?.annotationPosition.toString() === "4" ? requiredStackChatData.data[j].properties.dataLabelPosition.toString() : formatOptions?.annotation?.annotationPosition.toString();
+          d.data.labelPosition = formatOptions?.annotation?.annotationPosition.toString() === "4" ? requiredStackChatData.data[j].properties.annotationPosition.toString() : formatOptions?.annotation?.annotationPosition.toString();
           d.data["labelColor"] = seriesColor == "2" ? JSON.parse(
             JSON.stringify(requiredStackChatData.data[j].properties.color)
           ) : JSON.parse(
@@ -19462,7 +19465,7 @@
     };
     const getXAxis = () => {
       xAxis = axisBottom(xScale).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : parseFloat(formatOptions.plotArea.ticksHeight) * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) : 0 : 0
+        getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
       ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
     };
     const getChartType = (lineData) => {
@@ -20887,6 +20890,137 @@
       logError$1(fileName$a, "initXaxis", error);
     }
   }
+  function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosition, chartType, width, height, svg, radius) {
+    try {
+      if (!formatOptions.annotation.annotationVisibility) return;
+      const AnnotationType = formatOptions.plotArea.annotationType ?? "1";
+      const Disable = [AnnotationType === "1" ? "connector" : ""];
+      const ConnectorType = formatOptions.plotArea.connectorType?.toLowerCase() ?? "none";
+      const rotationAngle = formatOptions.plotArea.rotation ?? 0;
+      const multiplicationFactor = chartType === chartTypes.PieChart ? 1.06 : 1.1;
+      const connecterCurve2 = {
+        "1": "",
+        "2": curveLinear$1,
+        "3": step
+      };
+      const connectedStyle2 = {
+        solid: "unset",
+        Dotted: 2,
+        Dashed: 7
+      };
+      let makeAnnotations = d3Annotation2.annotation();
+      let oldAnnotationList = JSON.parse(
+        JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates || [])
+      );
+      oldAnnotationList.forEach((d) => {
+        d.dx = d.dx * width / d.width;
+        d.dy = d.dy * height / d.height;
+        d.width = width;
+        d.height = height;
+      });
+      const sum2 = chartData.reduce(
+        (a2, b) => a2 + (b?.data?.data?.[0]?.value ?? 0),
+        0
+      );
+      const safeSum = sum2 === 0 ? 1 : sum2;
+      const createAnnotation = (data, index2) => {
+        const value2 = data.data.data[0].value;
+        const midAngle = (data.x0 + data.x1) / 2;
+        const angleSize = data.x1 - data.x0;
+        return {
+          note: {
+            title: formatOptions.plotArea.dataLabelName ? data.data.legend : "",
+            label: formatOptions.plotArea.dataLabelValue && value2 !== 0 ? formatOptions.plotArea.dataLabelNumberFormat === ",.0%" ? (Math.abs(value2 / safeSum) * 100).toFixed(
+              convertStringToNumber(
+                formatOptions.plotArea.dataLabelDecimalPrecision
+              )
+            ) + "%" : getNumberWithFormatFunction(
+              formatOptions.plotArea.plotAreaDisplayUnits,
+              formatOptions.plotArea.dataLabelNumberFormat,
+              formatOptions.plotArea.dataLabelDecimalPrecision
+            )(value2) : "",
+            align: "middle",
+            wrap: 1e3
+          },
+          data: {
+            x: { legend: data.data.legend },
+            y: { value: value2 },
+            x0: data.x0,
+            x1: data.x1,
+            y0: data.y0,
+            y1: data.y1,
+            midAngle,
+            isVisible: true,
+            Data: data.data.properties
+          },
+          connector: {
+            end: ConnectorType,
+            curve: connecterCurve2[formatOptions.plotArea.connectorCurve]
+          },
+          disable: Disable,
+          subject: { radius: 3 },
+          type: annotationTypeforCharts(d3Annotation2, AnnotationType),
+          color: formatOptions.plotArea.dataLabelNameColor ?? "#000",
+          width,
+          height,
+          index: index2
+        };
+      };
+      let AnnotationsList = chartData.filter((d) => d.x1 - d.x0 > 1e-4).map(createAnnotation);
+      const visibleFilter = (d) => (d.data.y0 + d.data.y1) / 2 * (d.data.x1 - d.data.x0) > 0.17;
+      AnnotationsList = AnnotationsList.filter(visibleFilter);
+      oldAnnotationList = oldAnnotationList.filter(visibleFilter);
+      oldAnnotationList.forEach((oldA) => {
+        const match = AnnotationsList.find(
+          (a2) => a2.data.x.legend === oldA.data.x.legend
+        );
+        if (match) {
+          match.dx = oldA.dx;
+          match.dy = oldA.dy;
+          match.data.isVisible = oldA.data.isVisible ?? true;
+          match.connector.points = oldA.connector?.points;
+        }
+      });
+      makeAnnotations.editMode(formatOptions.plotArea.annotationDraggable).accessors({
+        x(d) {
+          const r = radius;
+          const a2 = d.midAngle + rotationAngle * Math.PI / 180;
+          return Math.cos(d.midAngle - Math.PI / 2) * (radius * 0.65);
+        },
+        y(d) {
+          const r = radius;
+          const a2 = d.midAngle + rotationAngle * Math.PI / 180;
+          return Math.sin(d.midAngle - Math.PI / 2) * (radius * 0.65);
+        }
+      }).annotations(AnnotationsList);
+      const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
+      annotations.selectAll("rect,.annotation-subject,.handle").remove();
+      annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
+        "stroke-dasharray",
+        connectedStyle2[formatOptions.plotArea.connectorStyle]
+      );
+      annotations.selectAll(".annotation-note-label").filter((d) => !d.data.isVisible).style("display", "none");
+      annotations.selectAll(".annotation-note-label").filter((d) => formatOptions.plotArea.hideInsignificantValue && d.data.x1 - d.data.x0 < 0.09).style("visibility", "hidden");
+      formatOptions.plotArea.dataLabelsCoordinates = AnnotationsList;
+    } catch (error) {
+      throw error;
+    }
+  }
+  const annotationTypeforCharts = (d3Annotation2, type) => {
+    try {
+      let annotationTypeMap = {
+        1: d3Annotation2.annotationLabel,
+        2: d3Annotation2.annotationLabel,
+        3: d3Annotation2.annotationCallout,
+        4: d3Annotation2.annotationCalloutElbow,
+        5: d3Annotation2.annotationCalloutCurve
+      };
+      let annotationType = annotationTypeMap[type];
+      return annotationType;
+    } catch (error) {
+      throw error;
+    }
+  };
   const setnumberOfBubbles = (svg, legendPosition, chartFormatOptions, height, width, margins, innnerHeight, xTitleHeight, XLabelHeight, bubbleCount) => {
     try {
       if (chartFormatOptions.plotArea.numberOfBubbles) {
@@ -21605,17 +21739,19 @@
         yTitle,
         yLabel
       );
-      yAxistitleRight(
-        svg,
-        isSecondaryAxisDrawn,
-        margin,
-        formatOptions,
-        dataTableHeight,
-        innerHeight2,
-        innerWidth2,
-        secondaryYLabel,
-        secondaryAxisTitleWidth
-      );
+      if (isSecondaryAxisDrawn) {
+        yAxistitleRight(
+          svg,
+          isSecondaryAxisDrawn,
+          margin,
+          formatOptions,
+          dataTableHeight,
+          innerHeight2,
+          innerWidth2,
+          secondaryYLabel,
+          secondaryAxisTitleWidth
+        );
+      }
       setChartTitle(svg, formatOptions, width, chartTitleHeight);
       drawLegends(
         height,
@@ -21774,10 +21910,10 @@
       }
       if (isSecondaryAxisDrawn) {
         let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
-          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-          chartJSON.yMinRight,
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : yScaleRight.domain()[1],
+          yScaleRight.domain()[0],
           formatOptions,
-          chartJSON
+          innerHeight2
         );
         yAxisRight = axisRight(yScaleRight).tickFormat(
           (d) => getNumberWithFormat(
@@ -23209,7 +23345,7 @@
         xAxisBottom
       );
       if (isSecondaryAxisDrawn) {
-        initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop);
+        initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop, innerWidth2);
       }
       setXaxistitle$1(
         formatOptions,
@@ -23235,7 +23371,7 @@
         yLabel,
         innerWidth2
       );
-      yAxistitleRight(
+      formatOptions.xAxisLabel.xAxisPosition == "2" && yAxistitleRight(
         svg,
         isSecondaryAxisDrawn,
         margin,
@@ -23384,10 +23520,10 @@
       }
       if (isSecondaryAxisDrawn) {
         let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
-          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-          chartJSON.yMinRight,
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : xScaleTop.domain()[1],
+          xScaleTop.domain()[0],
           formatOptions,
-          chartJSON
+          innerWidth2
         );
         xAxisTop = axisTop(xScaleTop).tickFormat(
           (d) => getNumberWithFormat(
@@ -23399,7 +23535,7 @@
         ).tickValues(
           responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray
         ).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
-          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
     };
@@ -23449,10 +23585,10 @@
           return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(0);
         }).attr("width", 0).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+          (d) => d.properties.stackBorderStyle == 2 ? "5,3" : "0"
+        ).attr("stroke-width", (d) => `${d.properties.stackBorderWidth}px`).attr(
           "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+          (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -23543,7 +23679,8 @@
         width,
         dimensionHeightWidthArray,
         columnWidth,
-        yScale
+        yScale,
+        secondaryYLabel
       );
       getChartType(filteredData);
       commonAnnotations(
@@ -24453,7 +24590,7 @@
         margin,
         yTitle,
         yLabel,
-        void 0
+        innerWidth2
       );
       setChartTitle(svg, formatOptions, width, chartTitleHeight);
       drawLegends(
@@ -25059,6 +25196,7 @@
         lData.data.forEach((cData) => {
           cData.hideZero = lData.properties.hideZeroValues;
           cData.axis = lData.properties.axis;
+          cData["properties"] = lData.properties;
         });
       });
       lineData.forEach((data2, index2) => {
@@ -25962,7 +26100,7 @@
     );
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const isSecondaryAxisDrawn = false;
+    let isSecondaryAxisDrawn = false;
     const isNormalizedChart = false;
     let customYaxisMinValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMinText) : void 0;
     let customYaxisMaxValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMaxText) : void 0;
@@ -25993,11 +26131,13 @@
     let svg;
     let gTag;
     let yScaleLeft;
+    let yScaleRight;
     let xScale;
     let calculatedRange;
     let seriesLabelWidth;
     let yAxisLeft;
     let xAxis;
+    let yAxisRight;
     let filteredDimension;
     let filteredData = [];
     let scrollPosition = 0;
@@ -26105,6 +26245,17 @@
         yAxisLeft,
         innerHeight2
       );
+      if (isSecondaryAxisDrawn) {
+        initYaxisRight(
+          gTag,
+          formatOptions,
+          dataTableHeight,
+          secondaryYLabel,
+          yAxisRight,
+          innerHeight2,
+          innerWidth2
+        );
+      }
       setXaxistitle$1(
         formatOptions,
         barChart,
@@ -26187,7 +26338,11 @@
         );
         series.data.forEach((point2) => {
           allChartData.push(point2);
-          {
+          if (series.properties.axis === "Secondary") {
+            isSecondaryAxisDrawn = true;
+            yMaxRight = Math.max(yMaxRight, point2.value);
+            yMinRight = Math.min(yMinRight, point2.value);
+          } else {
             yMaxLeft = Math.max(yMaxLeft, point2.value);
             yMinLeft = Math.min(yMinLeft, point2.value);
           }
@@ -26237,6 +26392,15 @@
           0
         ]);
       }
+      if (isSecondaryAxisDrawn) {
+        yScaleRight = linear$1().domain([
+          chartJSON.yMinRight >= 0 ? (secondaryCustomYaxisMinValue || secondaryCustomYaxisMinValue == 0) && !Number.isNaN(secondaryCustomYaxisMinValue) ? secondaryCustomYaxisMinValue : 0 : (secondaryCustomYaxisMinValue || secondaryCustomYaxisMinValue == 0) && !Number.isNaN(secondaryCustomYaxisMinValue) ? secondaryCustomYaxisMinValue : chartJSON.yMinRight * 1.1,
+          chartJSON.yMaxRight <= 0 ? secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : 0 : secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight * 1.1
+        ]).range([
+          dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2,
+          0
+        ]);
+      }
       calculatedRange = [0, innerWidth2];
       if (formatOptions.seriesLabel.seriesLabelVisibility) {
         let labelObj = prepareDataForSeriesLabel(
@@ -26282,6 +26446,28 @@
           responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
         ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
+      if (isSecondaryAxisDrawn) {
+        let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : yScaleRight.domain()[1],
+          yScaleRight.domain()[0],
+          formatOptions,
+          innerHeight2
+        );
+        yAxisRight = axisRight(yScaleRight).tickFormat(
+          (d) => getNumberWithFormat(
+            d,
+            formatOptions.secondaryYAxisLabel.secondaryYAxisDisplayUnits,
+            formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
+            formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision
+          )
+        ).tickValues(
+          responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray
+        ).ticks(
+          responsiveSecondaryLablesObj.secondaryCustomTickValue ?? innerHeight2 / 30
+        ).tickSize(
+          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        ).tickSizeOuter(0);
+      }
     };
     const getXAxis = () => {
       xAxis = axisBottom(xScale).tickSize(
@@ -26298,7 +26484,7 @@
       });
       const areaGenerator = area().x(
         (d) => xScale(d.dimension) ? xScale(d.dimension) : null
-      ).y0(() => yScaleLeft(0)).y1((d) => yScaleLeft(d.value)).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+      ).y0((d) => d.axis === axisTypes.primary ? yScaleLeft(0) : yScaleRight(0)).y1((d) => d.axis === axisTypes.primary ? yScaleLeft(d.value) : yScaleRight(d.value)).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
       const areaGeneratorStart = area().x(
         (d) => xScale(d.dimension) ? xScale(d.dimension) : null
       ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
@@ -26362,7 +26548,7 @@
         chartType,
         xScale,
         yScaleLeft,
-        void 0,
+        yScaleRight,
         null,
         formatOptions,
         chartJSON,
@@ -26387,29 +26573,11 @@
     const drawAreaChart = () => {
       getXScale();
       getXAxis();
-      initXaxis$1(
-        gTag,
-        chartJSON,
-        xLabel,
-        formatOptions,
-        dataTableHeight,
-        yScaleLeft,
-        xAxis,
-        dimensionHeightWidthArray,
-        height,
-        barWidth,
-        isDateType,
-        innerWidth2,
-        innerHeight2,
-        filteredDimension,
-        xScale
-      );
       commonAnnotations(
         seriesData,
         xScale,
         yScaleLeft,
-        void 0,
-        // need to pass secondary axis scale if secondary axis is drawn
+        yScaleRight,
         margin,
         d3Annotation,
         [],
@@ -26440,6 +26608,23 @@
         isSecondaryAxisDrawn
       ).labelArray;
       getChartType(filteredData);
+      initXaxis$1(
+        gTag,
+        chartJSON,
+        xLabel,
+        formatOptions,
+        dataTableHeight,
+        yScaleLeft,
+        xAxis,
+        dimensionHeightWidthArray,
+        height,
+        barWidth,
+        isDateType,
+        innerWidth2,
+        innerHeight2,
+        filteredDimension,
+        xScale
+      );
       drawSeriesLabels(formatOptions, gTag, newSeriesLabelArray);
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         if (formatOptions.xAxisLabel.xAxisPosition != "1")
@@ -26938,6 +27123,7 @@
     const drawLineChart = () => {
       getXScale();
       getXAxis();
+      getChartType(filteredData);
       initXaxis$1(
         gTag,
         chartJSON,
@@ -26955,7 +27141,6 @@
         filteredDimension,
         xScale
       );
-      getChartType(filteredData);
       stacklineAnnotations(
         stackChartData,
         xScale,
@@ -27783,7 +27968,22 @@
       );
       initPieChartData();
       drawPieChart();
-      drawPieDataLabels();
+      if (chartFormatOptions.plotArea.annotationDraggable && chartFormatOptions.plotArea.dataLabels) {
+        pieFamilyAnnotation.call(
+          void 0,
+          d3Annotation,
+          pieChartData,
+          chartFormatOptions,
+          getPiePosition(),
+          chartTypes.PieChart,
+          width,
+          height,
+          chartAreaTagG,
+          Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5)
+        );
+      } else {
+        drawPieDataLabels();
+      }
       drawTotalValue(
         chartFormatOptions,
         pieTotalValue,
@@ -27937,7 +28137,7 @@
             (d) => getDataLabelTransformString(d, isSingleDataLabel)
           ).attr(
             "visibility",
-            (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible"
+            (d) => d.endAngle - d.startAngle < 0.09 && formatOptions.plotArea.hideInsignificantValue ? "hidden" : "visible"
           ).attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
             const { plotArea } = chartFormatOptions;
             if (plotArea.dataLabelName) {
@@ -28178,7 +28378,22 @@
       );
       initPieChartData();
       drawDonutChart();
-      drawDonutDataLabels();
+      if (chartFormatOptions.plotArea.annotationDraggable && chartFormatOptions.plotArea.dataLabels) {
+        pieFamilyAnnotation.call(
+          void 0,
+          d3Annotation,
+          pieChartData,
+          chartFormatOptions,
+          getPiePosition(),
+          chartTypes.DonutChart,
+          width,
+          height,
+          chartAreaTagG,
+          Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5)
+        );
+      } else {
+        drawDonutDataLabels();
+      }
       drawTotalValue2();
     };
     const loopOverSeriesData = () => {
@@ -30275,7 +30490,7 @@
           "font-family",
           chartFormatOptions.pointerValue.pointerValueFontFamily
         ).text(
-          (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias || d != 0 ? getNumberWithFormatFunction(
+          (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias && d != 0 ? getNumberWithFormatFunction(
             "None",
             chartFormatOptions.pointerValue.pointerValueNumberFormat,
             chartFormatOptions.pointerValue.pointerValueDecimalPrecision
@@ -54745,7 +54960,8 @@
     };
     const preProcessChartData = () => {
       if (isAdvancedWaterfall) {
-        const tempWaterfallChartData2 = mapAdvancedWaterfallData(data);
+        let tempWaterfallChartData2 = mapAdvancedWaterfallData(data);
+        tempWaterfallChartData2 = tempWaterfallChartData2.filter((d) => d.up + d.down + d.base != 0);
         chartJSON.dimensionList = tempWaterfallChartData2.map((d) => d.xKey);
         chartJSON.legendList = chartJSON.dimensionList;
         waterFallData = stack().keys(["base", "dimensionTotal", "up", "down"])(
@@ -55737,8 +55953,8 @@
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      getChartType();
       initXaxisBar(formatOptions, gTag, xLabel, innerHeight2, innerWidth2, xAxis);
+      getChartType();
       commonAnnotations(
         filteredData,
         yScaleLeft,