pace-chart-lib 1.0.38 → 1.0.39

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

@@ -12235,9 +12235,9 @@ function responsiveYaxisMargin(maxNumber, yMax, formatOptions, isSecondaryAxis,
     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);
@@ -12254,6 +12254,7 @@ function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptio
       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) {
@@ -12279,17 +12280,16 @@ function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptio
         }
       }
     } 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]
       );
     }
@@ -12344,7 +12344,7 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
     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)));
@@ -12353,10 +12353,11 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
       } 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;
       }
@@ -12843,9 +12844,6 @@ function getTransformStringForXaxisLabelPosition(barChart, margin, formatOptions
 }
 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"
@@ -13214,7 +13212,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             width: 15
           },
           color: d.Labelcolor,
-          type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+          type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
           height,
           width
         };
@@ -13226,7 +13224,9 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         }
       });
       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;
@@ -13742,7 +13742,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
             width: 15
           },
           color: d.labelColor || d.data.labelColor,
-          type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+          type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
           height,
           width
         };
@@ -13898,7 +13898,7 @@ const conditionallyResetOldAnnotations = (oldAnnotationList, formatOptions, char
     throw error;
   }
 };
-const annotationTypeforCharts = (d3Annotation2, type) => {
+const annotationTypeforCharts$1 = (d3Annotation2, type) => {
   try {
     let annotationTypeMap = {
       1: d3Annotation2.annotationLabel,
@@ -15124,7 +15124,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             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
         };
@@ -15318,7 +15318,7 @@ function getTransformStringForYaxisLabels(isTornadoChart, xaxisLabelPosition, fo
           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;
@@ -15356,7 +15356,7 @@ const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yA
     );
     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",
@@ -15473,14 +15473,14 @@ const dataLabelsPositionForBarChartFamily = (formatOptions, xCordinate, position
     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",
@@ -15678,7 +15678,7 @@ function addTotalValue(totalValueMap, xScale, yScale, margin, d3Annotation2, old
             width: 15
           },
           color: formatOptions.total.totalColor,
-          type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+          type: annotationTypeforCharts$1(d3Annotation2, parseFloat(annotationType)),
           height,
           width
         };
@@ -17346,6 +17346,12 @@ const ColumnChart = ({
       ).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,
@@ -17354,19 +17360,9 @@ const ColumnChart = ({
           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);
@@ -18009,7 +18005,7 @@ const CustomColumnChart = ({
         secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
         secondaryCustomYaxisMinValue ? secondaryCustomYaxisMinValue : chartJSON.yMinRight,
         formatOptions,
-        chartJSON
+        innerHeight2
       ).secondaryYAxisLabelArray;
       chartJSON.yMaxRight = secondaryYAxisLabelArray[secondaryYAxisLabelArray.length - 1];
       chartJSON.yMinRight = secondaryYAxisLabelArray[0];
@@ -20891,6 +20887,137 @@ function initXaxis(gTag, formatOptions, dataTableHeight, xLabel, xAxis, innerHei
     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) {
@@ -21609,17 +21736,19 @@ const LineChart = ({
       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,
@@ -21778,10 +21907,10 @@ const LineChart = ({
     }
     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(
@@ -23213,7 +23342,7 @@ const HorizontalBarChart = ({
       xAxisBottom
     );
     if (isSecondaryAxisDrawn) {
-      initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop);
+      initXaxisTop(formatOptions, gTag, secondaryYLabel, xAxisTop, innerWidth2);
     }
     setXaxistitle$1(
       formatOptions,
@@ -23239,7 +23368,7 @@ const HorizontalBarChart = ({
       yLabel,
       innerWidth2
     );
-    yAxistitleRight(
+    formatOptions.xAxisLabel.xAxisPosition == "2" && yAxistitleRight(
       svg,
       isSecondaryAxisDrawn,
       margin,
@@ -23388,10 +23517,10 @@ const HorizontalBarChart = ({
     }
     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(
@@ -23403,7 +23532,7 @@ const HorizontalBarChart = ({
       ).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);
     }
   };
@@ -23453,10 +23582,10 @@ const HorizontalBarChart = ({
         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"
@@ -23547,7 +23676,8 @@ const HorizontalBarChart = ({
       width,
       dimensionHeightWidthArray,
       columnWidth,
-      yScale
+      yScale,
+      secondaryYLabel
     );
     getChartType(filteredData);
     commonAnnotations(
@@ -24457,7 +24587,7 @@ const NormalizedStackHorizontalBarChart = ({
       margin,
       yTitle,
       yLabel,
-      void 0
+      innerWidth2
     );
     setChartTitle(svg, formatOptions, width, chartTitleHeight);
     drawLegends(
@@ -25967,7 +26097,7 @@ const AreaChart = ({
   );
   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;
@@ -25998,11 +26128,13 @@ const AreaChart = ({
   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;
@@ -26110,6 +26242,17 @@ const AreaChart = ({
       yAxisLeft,
       innerHeight2
     );
+    if (isSecondaryAxisDrawn) {
+      initYaxisRight(
+        gTag,
+        formatOptions,
+        dataTableHeight,
+        secondaryYLabel,
+        yAxisRight,
+        innerHeight2,
+        innerWidth2
+      );
+    }
     setXaxistitle$1(
       formatOptions,
       barChart,
@@ -26192,7 +26335,11 @@ const AreaChart = ({
       );
       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);
         }
@@ -26242,6 +26389,15 @@ const AreaChart = ({
         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(
@@ -26287,6 +26443,28 @@ const AreaChart = ({
         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(
@@ -26303,7 +26481,7 @@ const AreaChart = ({
     });
     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));
@@ -26367,7 +26545,7 @@ const AreaChart = ({
       chartType,
       xScale,
       yScaleLeft,
-      void 0,
+      yScaleRight,
       null,
       formatOptions,
       chartJSON,
@@ -26396,8 +26574,7 @@ const AreaChart = ({
       seriesData,
       xScale,
       yScaleLeft,
-      void 0,
-      // need to pass secondary axis scale if secondary axis is drawn
+      yScaleRight,
       margin,
       d3Annotation,
       [],
@@ -27788,7 +27965,22 @@ const PieChart = ({ data, formatOptions, chartId }) => {
     );
     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,
@@ -27942,7 +28134,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           (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) {
@@ -28183,7 +28375,22 @@ const DonutChart = ({
     );
     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 = () => {
@@ -30280,7 +30487,7 @@ const Speedometer = ({
         "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
@@ -55743,8 +55950,8 @@ const TornadoChart = ({
     drawColumnChart();
   };
   const drawColumnChart = () => {
-    getChartType();
     initXaxisBar(formatOptions, gTag, xLabel, innerHeight2, innerWidth2, xAxis);
+    getChartType();
     commonAnnotations(
       filteredData,
       yScaleLeft,