pace-chart-lib 1.0.38 → 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;
         }
@@ -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) => barChart ? d.data.x.measure != 0 : 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
           };
@@ -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
           };
@@ -17349,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,
@@ -17357,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);
@@ -18012,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];
@@ -20894,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) {
@@ -21612,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,
@@ -21781,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(
@@ -23216,7 +23345,7 @@
         xAxisBottom
       );
       if (isSecondaryAxisDrawn) {
-        initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop);
+        initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop, innerWidth2);
       }
       setXaxistitle$1(
         formatOptions,
@@ -23242,7 +23371,7 @@
         yLabel,
         innerWidth2
       );
-      yAxistitleRight(
+      formatOptions.xAxisLabel.xAxisPosition == "2" && yAxistitleRight(
         svg,
         isSecondaryAxisDrawn,
         margin,
@@ -23391,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(
@@ -23406,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);
       }
     };
@@ -23456,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"
@@ -23550,7 +23679,8 @@
         width,
         dimensionHeightWidthArray,
         columnWidth,
-        yScale
+        yScale,
+        secondaryYLabel
       );
       getChartType(filteredData);
       commonAnnotations(
@@ -24460,7 +24590,7 @@
         margin,
         yTitle,
         yLabel,
-        void 0
+        innerWidth2
       );
       setChartTitle(svg, formatOptions, width, chartTitleHeight);
       drawLegends(
@@ -25970,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;
@@ -26001,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;
@@ -26113,6 +26245,17 @@
         yAxisLeft,
         innerHeight2
       );
+      if (isSecondaryAxisDrawn) {
+        initYaxisRight(
+          gTag,
+          formatOptions,
+          dataTableHeight,
+          secondaryYLabel,
+          yAxisRight,
+          innerHeight2,
+          innerWidth2
+        );
+      }
       setXaxistitle$1(
         formatOptions,
         barChart,
@@ -26195,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);
           }
@@ -26245,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(
@@ -26290,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(
@@ -26306,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));
@@ -26370,7 +26548,7 @@
         chartType,
         xScale,
         yScaleLeft,
-        void 0,
+        yScaleRight,
         null,
         formatOptions,
         chartJSON,
@@ -26399,8 +26577,7 @@
         seriesData,
         xScale,
         yScaleLeft,
-        void 0,
-        // need to pass secondary axis scale if secondary axis is drawn
+        yScaleRight,
         margin,
         d3Annotation,
         [],
@@ -27791,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,
@@ -27945,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) {
@@ -28186,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 = () => {
@@ -30283,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
@@ -55746,8 +55953,8 @@
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      getChartType();
       initXaxisBar(formatOptions, gTag, xLabel, innerHeight2, innerWidth2, xAxis);
+      getChartType();
       commonAnnotations(
         filteredData,
         yScaleLeft,

package/package.json

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