pace-chart-lib 1.0.25 → 1.0.26

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

@@ -10851,7 +10851,7 @@ const referenceLineTypes = {
   Custom: "Custom"
 };
 var commonColors = /* @__PURE__ */ ((commonColors2) => {
-  commonColors2["white"] = "#FFFFFF";
+  commonColors2["white"] = "#ffffff";
   commonColors2["black"] = "#000000";
   commonColors2["transparent"] = "#FFFFFF00";
   return commonColors2;
@@ -13206,7 +13206,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       }
       for (let i = 0; i < chartData.length; i++) {
         chartData.forEach((d) => {
-          if (d.properties.type && d.properties.type != "Column" && !getChartType.includes(d.properties.type))
+          if (d.properties.type && d.properties.type != chartTypes.ColumnChart && !getChartType.includes(d.properties.type))
             getChartType.push(d.properties.type);
         });
       }
@@ -13314,6 +13314,168 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           labelData;
           break;
         case "6":
+          chartData.forEach((d, k2) => {
+            let annotationVisibility = d.properties.annotation.toString();
+            switch (d.properties.type) {
+              case chartTypes.ColumnChart:
+                switch (annotationVisibility) {
+                  case "1":
+                    for (let i = 0; i < chartData[k2].data.length; i++) {
+                      labelData.push(d.data[i]);
+                    }
+                    break;
+                  case "2":
+                    labelData;
+                    break;
+                  case "3":
+                    labelData.push(d.data[0]);
+                    break;
+                  case "4":
+                    labelData.push(d.data[d.data.length - 1]);
+                    break;
+                  case "5":
+                    labelData.push(d.data[0]);
+                    labelData.push(d.data[d.data.length - 1]);
+                    break;
+                }
+                break;
+              case chartTypes.AreaChart:
+              case chartTypes.LineChart:
+                switch (annotationVisibility) {
+                  case "1":
+                    for (let i = 0; i < chartData[k2].data.length; i++) {
+                      labelData.push(
+                        {
+                          dimension: d.data[i].dimension,
+                          value: d.data[i].value,
+                          legend: d.data[i].legend,
+                          labelPosition: d.data[i].labelPosition,
+                          labelColor: d.data[i].labelColor,
+                          axis: d.data[i].axis,
+                          type: chartTypes.LineChart
+                        }
+                      );
+                    }
+                    break;
+                  case "2":
+                    labelData;
+                    break;
+                  case "3":
+                    labelData.push(
+                      {
+                        dimension: d.data[0].dimension,
+                        value: d.data[0].value,
+                        legend: d.data[0].legend,
+                        labelPosition: d.data[0].labelPosition,
+                        labelcolor: d.data[0].labelColor,
+                        axis: d.data[0].axis,
+                        type: chartTypes.LineChart
+                      }
+                    );
+                    break;
+                  case "4":
+                    labelData.push(
+                      {
+                        dimension: d.data[d.data.length - 1].dimension,
+                        value: d.data[d.data.length - 1].value,
+                        legend: d.data[d.data.length - 1].legend,
+                        labelPosition: d.data[d.data.length - 1].labelPosition,
+                        labelcolor: d.data[d.data.length - 1].labelColor,
+                        axis: d.data[d.data.length - 1].axis,
+                        type: chartTypes.LineChart
+                      }
+                    );
+                    break;
+                  case "5":
+                    labelData.push(
+                      {
+                        dimension: d.data[0].dimension,
+                        value: d.data[0].value,
+                        legend: d.data[0].legend,
+                        labelPosition: d.data[0].labelPosition,
+                        labelcolor: d.data[0].labelColor,
+                        axis: d.data[0].axis,
+                        type: chartTypes.LineChart
+                      }
+                    );
+                    labelData.push(
+                      {
+                        dimension: d.data[d.data.length - 1].dimension,
+                        value: d.data[d.data.length - 1].value,
+                        legend: d.data[d.data.length - 1].legend,
+                        labelPosition: d.data[d.data.length - 1].labelPosition,
+                        labelcolor: d.data[d.data.length - 1].labelColor,
+                        axis: d.data[d.data.length - 1].axis,
+                        type: chartTypes.LineChart
+                      }
+                    );
+                    break;
+                }
+                break;
+              case chartTypes.StackColumnChart:
+                const stackColumnIndex = stackColumnData.findIndex((id2) => id2.key === d.properties.legend);
+                stackColumnIndex !== -1 && stackColumnData[stackColumnIndex].forEach((dta, j) => {
+                  switch (String(stackColumnData[stackColumnIndex].individualAnnotationVisibility)) {
+                    case "1":
+                      labelData.push(stackColumnData[stackColumnIndex][j]);
+                      break;
+                    case "2":
+                      labelData;
+                      break;
+                    case "3":
+                      let label3 = stackColumnData[stackColumnIndex][0];
+                      if (!labelData.find((data) => data.key == label3.key))
+                        labelData.push(label3);
+                      break;
+                    case "4":
+                      let label4 = stackColumnData[stackColumnIndex][stackColumnData[0].length - 1];
+                      if (!labelData.find((data) => data.key == label4.key))
+                        labelData.push(label4);
+                      break;
+                    case "5":
+                      let label5 = stackColumnData[stackColumnIndex][0];
+                      let label6 = stackColumnData[stackColumnIndex][stackColumnData[0].length - 1];
+                      if (!labelData.find((data) => data.key == label5.key || data.key == label6.key)) {
+                        labelData.push(stackColumnData[stackColumnIndex][0]);
+                        labelData.push(stackColumnData[stackColumnIndex][stackColumnData[0].length - 1]);
+                        break;
+                      }
+                  }
+                });
+                break;
+              case chartTypes.StackAreaChart:
+                const stackIndex = stackAreaData.findIndex((id2) => id2.key === d.properties.legend);
+                stackIndex != -1 && stackAreaData[stackIndex].forEach((dta, j) => {
+                  switch (String(stackAreaData[stackIndex].individualAnnotationVisibility)) {
+                    case "1":
+                      labelData.push(stackAreaData[stackIndex][j]);
+                      break;
+                    case "2":
+                      labelData;
+                      break;
+                    case "3":
+                      let label3 = stackAreaData[stackIndex][0];
+                      if (!labelData.find((data) => data.key == label3.key))
+                        labelData.push(label3);
+                      break;
+                    case "4":
+                      let label4 = stackAreaData[stackIndex][stackAreaData[0].length - 1];
+                      if (!labelData.find((data) => data.key == label4.key))
+                        labelData.push(label4);
+                      break;
+                    case "5":
+                      let label5 = stackAreaData[stackIndex][0];
+                      let label6 = stackAreaData[stackIndex][stackAreaData[0].length - 1];
+                      if (!labelData.find((data) => data.key == label5.key || data.key == label6.key)) {
+                        labelData.push(label5);
+                        labelData.push(label6);
+                        break;
+                      }
+                  }
+                });
+                break;
+            }
+          });
           break;
       }
       let maxValue = 0;
@@ -13346,7 +13508,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
             y: d.value || d.value == 0 ? d.value : d.data.type != chartTypes.StackColumnChart ? d[1] ? d[1] : 0 : d[1] > 0 ? d[1] : d[0],
             prevValue: d[0] >= 0 ? d[0] : d[1],
             position: parseInt(d.labelPosition) ? parseInt(d.labelPosition) : parseInt(d.data.labelPosition),
-            type: d.dimension && d.legend ? d.type : d.data.type,
+            type: d.type,
             currentLegend: d.legend?.includes("~$~") ? d.legend.split("~$~")[1] : d.key?.includes("~$~") ? d.key.split("~$~")[1] : d.legend ?? d.key,
             isVisible: true
           },
@@ -13369,7 +13531,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
         d["legend"] && d.dimension ? (
           // ? finalLegendseries.includes(d.Legend.includes("~$~") ? d.Legend.split("~$~")[1] : d.Legend) &&
           //     filteredDimensionList.includes(d.Dimension) &&
-          !labelExcludeList.includes(d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend) && (d.Axis == axisTypes.primary ? yScaleLeft(d.value) <= innerHeight2 && yScaleLeft(d.value) >= 0 : yScaleRight(d.value) <= innerHeight2 && yScaleRight(d.value) >= 0) ? annotationsList.push(singleAnnotation) : null
+          !labelExcludeList.includes(d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend) && (d.axis == axisTypes.primary ? yScaleLeft(d.value) <= innerHeight2 && yScaleLeft(d.value) >= 0 : yScaleRight(d.value) <= innerHeight2 && yScaleRight(d.value) >= 0) ? annotationsList.push(singleAnnotation) : null
         ) : (
           // finalLegendseries.includes(d["key"].includes("~$~") ? d["key"].split("~$~")[1] : d["key"]) &&
           //     this.filteredDimensionList.includes(d.data["Dimension"]) &&
@@ -13397,17 +13559,15 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       });
       makeAnnotations.editMode(formatOptions.annotation.annotationDraggable && isReportEditable).accessors({
         x: function(d) {
-          if (getChartType.includes(d.x.type) || getChartType.includes(d.type)) {
-            let chartType = d.x.type || d.type;
+          const chartType = d.x.type || d.type;
+          if (getChartType.includes(chartType)) {
             switch (chartType) {
-              case "StackColumn":
+              case chartTypes.StackColumnChart:
                 return xScale(d.x.dimension) + xScaleForLegends(d.x.stacklegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2;
-                break;
-              case "StackArea":
-              case "Line":
-              case "Area":
+              case chartTypes.StackAreaChart:
+              case chartTypes.LineChart:
+              case chartTypes.AreaChart:
                 return xScale(d.x.dimension);
-                break;
             }
           } else {
             if (d.x.legend) {
@@ -13417,10 +13577,11 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           }
         },
         y: function(d) {
+          const chartType = d.type ?? d.x.type;
           if (d.x.axis == axisTypes.primary) {
-            return dataLabelsPosition(d.y, parseFloat(d.position), yScaleLeft, minValue, d.prevValue, d.type);
+            return dataLabelsPosition(d.y, parseFloat(d.position), yScaleLeft, minValue, d.prevValue, chartType);
           } else {
-            return dataLabelsPosition(d.y, parseFloat(d.position), yScaleRight, minValue, d.prevValue, d.type);
+            return dataLabelsPosition(d.y, parseFloat(d.position), yScaleRight, minValue, d.prevValue, chartType);
           }
         }
       }).on("dragend", function(annotation2) {
@@ -15382,7 +15543,7 @@ const checkVisibleConditions = (chartData, d, type, hideZeroValues, secondaryCus
     logError$2(fileName$b, "checkVisibleConditions", error);
   }
 };
-function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType) {
+function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType, isStackChart) {
   try {
     let mousemove = function(event2) {
       try {
@@ -15396,13 +15557,14 @@ function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDi
         }
         let mindiff = 1e99;
         for (let k2 = 0; k2 < lineData.length; k2++) {
-          let diff1 = Math.abs(m[1] - yScaleLeft(lineData[k2].data[dimensionIndex].value));
+          const requiredValue = isStackChart ? lineData[k2].data[dimensionIndex].value > 0 ? lineData[k2].data[dimensionIndex][1] : lineData[k2].data[dimensionIndex][0] : lineData[k2].data[dimensionIndex].value;
+          let diff1 = Math.abs(m[1] - yScaleLeft(requiredValue));
           if (diff1 < mindiff) {
             mindiff = diff1;
             legendIndex = k2;
           }
         }
-        focus.attr("transform", getCoordinates(lineData[legendIndex], dimensionIndex, xScale, yScaleLeft)).append("circle").attr("r", lineData[legendIndex].properties.markerSize * 2.5).attr("id", "tooltip").attr("fill", lineData[legendIndex].properties.markerColor).text(showTooltipOnMouseMove([
+        focus.attr("transform", getCoordinates(lineData[legendIndex], dimensionIndex, xScale, yScaleLeft, isStackChart)).append("circle").attr("r", lineData[legendIndex].properties.markerSize * 2.5).attr("id", "tooltip").attr("fill", lineData[legendIndex].properties.markerColor).text(showTooltipOnMouseMove([
           { key: formatOptions.xAxisTitle.xAxisTitleText, value: lineData[legendIndex].data[dimensionIndex].dimension },
           {
             key: lineData[legendIndex].properties.currentMeasure ? lineData[legendIndex].properties.currentMeasure : this.basestyle.YAxisTitle.YAxisTitleText,
@@ -15410,7 +15572,7 @@ function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDi
           },
           { key: "Legend", value: lineData[legendIndex].data[dimensionIndex].legend.includes("~$~") ? lineData[legendIndex].data[dimensionIndex].legend.split("~$~")[1] : lineData[legendIndex].data[dimensionIndex].legend }
           // { key: "Calculated Tooltip", value: lineData[legendIndex].data[dimensionIndex]. },
-        ], formatOptions));
+        ], formatOptions, void 0, lineData[legendIndex].properties));
       } catch (error) {
         logError$2(fileName$b, "onHoverMarkerForAreaChartFamily.mousemove", error);
       }
@@ -15428,9 +15590,10 @@ function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDi
     logError$2(fileName$b, "onHoverMarkerForAreaChartFamily", error);
   }
 }
-const getCoordinates = (chartData, pos, xScale, yScaleLeft) => {
+const getCoordinates = (chartData, pos, xScale, yScaleLeft, isStackChart) => {
   try {
-    return `translate(${xScale(chartData.data[pos].dimension)},${yScaleLeft(chartData.data[pos].value)})`;
+    const requiredValue = isStackChart ? chartData.data[pos].value > 0 ? chartData.data[pos][1] : chartData.data[pos][0] : chartData.data[pos].value;
+    return `translate(${xScale(chartData.data[pos].dimension)},${yScaleLeft(requiredValue)})`;
   } catch (error) {
     logError$2(fileName$b, "getCoordinates", error);
   }
@@ -15795,7 +15958,10 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
         }
         let vennSaparator = isVennChart && (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top) ? i != seriesData.length - 1 ? " |" : "" : "";
         let legendColor = isVennChart ? chartFormatOptions.legends.legendSelectedUnicolor : chartFormatOptions.legends.legendColorMode == legendColorMode.multiColor ? d.properties.color ? d.properties.color : commonColors.black : chartFormatOptions.legends.legendSelectedUnicolor;
-        innerdiv.append("div").style("margin-left", "5px").style("color", legendColor).style("font-size", (!isVennChart ? d.properties.fontSize : chartFormatOptions.legends.legendFontSize) + "px").style("font-family", !isVennChart ? d.properties.fontFamily : chartFormatOptions.legends.legendFontFamily).style(
+        innerdiv.append("div").style("margin-left", "5px").style("color", legendColor).style(
+          "background",
+          d.properties.axis == axisTypes.secondary && chartFormatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor
+        ).style("font-size", (!isVennChart ? d.properties.fontSize : chartFormatOptions.legends.legendFontSize) + "px").style("font-family", !isVennChart ? d.properties.fontFamily : chartFormatOptions.legends.legendFontFamily).style(
           "font-style",
           () => {
             let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
@@ -17119,9 +17285,13 @@ const CustomColumnChart = ({
     seriesData.forEach((series, i) => {
       if (![chartTypes.StackColumnChart, chartTypes.StackAreaChart].includes(series.properties.type)) {
         tempChartData.push(series);
-        series.properties.type !== chartTypes.LineChart && legendList.push(series.legend);
-      } else if (!legendList.includes("stackLegend")) {
-        legendList.push(`stackLegend`);
+        series.properties.type !== chartTypes.LineChart && series.properties.type !== chartTypes.AreaChart && legendList.push(series.legend);
+      } else {
+        if (chartTypes.StackColumnChart === series.properties.type) {
+          if (!legendList.includes(chartTypes.StackColumnChart)) {
+            legendList.push(chartTypes.StackColumnChart);
+          }
+        }
       }
       if (series.properties.axis === "Secondary") {
         secondaryStackAxisData.push(series);
@@ -17141,7 +17311,7 @@ const CustomColumnChart = ({
           primaryStackAreaAxisData.push(series);
         }
       }
-      series.data.forEach((point2) => {
+      series.data = series.data.map((point2) => {
         const newPoint = {
           ...point2,
           type: series.properties.type,
@@ -17149,7 +17319,7 @@ const CustomColumnChart = ({
           labelPosition: series.properties.dataLabelPosition,
           labelColor: series.properties.labelColor
         };
-        if (series.properties.axis === "Secondary") {
+        if (newPoint.axis === "Secondary") {
           isSecondaryAxisDrawn = true;
           yMaxRight = Math.max(yMaxRight, newPoint.value);
           yMinRight = Math.min(yMinRight, newPoint.value);
@@ -17157,6 +17327,7 @@ const CustomColumnChart = ({
           yMaxLeft = Math.max(yMaxLeft, newPoint.value);
           yMinLeft = Math.min(yMinLeft, newPoint.value);
         }
+        return newPoint;
       });
     });
     filteredData = JSON.parse(JSON.stringify(seriesData));
@@ -17220,7 +17391,8 @@ const CustomColumnChart = ({
         properties: {
           axis: d.properties.axis,
           type: d.properties.type,
-          legend: d.properties.legend
+          legend: d.properties.legend,
+          annotation: d.properties.annotation
         },
         stackData: tempStackAreaChartDataForPrimaryAxis,
         data: primaryStackAreaAxisData2
@@ -17231,7 +17403,8 @@ const CustomColumnChart = ({
         properties: {
           axis: d.properties.axis,
           type: d.properties.type,
-          legend: d.properties.legend
+          legend: d.properties.legend,
+          annotation: d.properties.annotation
         },
         stackData: tempStackAreaChartDataForSecondaryAxis,
         data: secondaryStackAreaAxisData2
@@ -17242,7 +17415,8 @@ const CustomColumnChart = ({
         properties: {
           axis: d.properties.axis,
           type: d.properties.type,
-          legend: d.properties.legend
+          legend: d.properties.legend,
+          annotation: d.properties.annotation
         },
         stackData: tempStackColumnChartDataForPrimaryAxis,
         data: primaryStackColumnAxisData2
@@ -17253,7 +17427,8 @@ const CustomColumnChart = ({
         properties: {
           axis: d.properties.axis,
           type: d.properties.type,
-          legend: d.properties.legend
+          legend: d.properties.legend,
+          annotation: d.properties.annotation
         },
         stackData: tempStackColumnChartDataForSecondaryAxis,
         data: secondaryStackColumnAxisData2
@@ -17275,17 +17450,6 @@ const CustomColumnChart = ({
     }
   };
   const initScale = () => {
-    let yAxisLabelArray = responsiveYaxisLabel$1(
-      customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-      chartJSON.yMinLeft,
-      innerHeight2,
-      formatOptions,
-      chartJSON,
-      customYaxisMinValue,
-      customYaxisMaxValue
-    ).yAxisLabelArray;
-    chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
-    chartJSON.yMinLeft = yAxisLabelArray[0];
     {
       yScaleLeft = linear$1().domain([
         chartJSON.yMinLeft >= 0 ? customYaxisMinValue !== void 0 && !Number.isNaN(customYaxisMinValue) ? customYaxisMinValue : 0 : chartJSON.yMinLeft < 0 ? chartJSON.yMinLeft * 1.1 : chartJSON.yMinLeft * 0.9,
@@ -17296,14 +17460,6 @@ const CustomColumnChart = ({
       ]);
     }
     if (isSecondaryAxisDrawn) {
-      let secondaryYAxisLabelArray = responsiveSecondaryYaxisLabel(
-        secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-        secondaryCustomYaxisMinValue ? secondaryCustomYaxisMinValue : chartJSON.yMinRight,
-        formatOptions,
-        chartJSON
-      ).secondaryYAxisLabelArray;
-      chartJSON.yMaxRight = secondaryYAxisLabelArray[secondaryYAxisLabelArray.length - 1];
-      chartJSON.yMinRight = secondaryYAxisLabelArray[0];
       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) && !Number.isNaN(secondaryCustomYaxisMaxValue) ? secondaryCustomYaxisMaxValue : 0 : (secondaryCustomYaxisMaxValue || secondaryCustomYaxisMaxValue == 0) && !Number.isNaN(secondaryCustomYaxisMaxValue) ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight * 1.1
@@ -17315,7 +17471,7 @@ const CustomColumnChart = ({
     calculatedRange = [0, innerWidth2];
   };
   const getXScale = () => {
-    xScaleForLegends = band().domain(chartJSON.legendList.reverse()).range([0, columnWidth]).paddingInner(
+    xScaleForLegends = band().domain(chartJSON.legendList).range([0, columnWidth]).paddingInner(
       chartJSON.legendList.length > 1 ? 0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth) / 100 : 0
     );
     xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
@@ -17490,7 +17646,7 @@ const CustomColumnChart = ({
     ).append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).select("path").attr("d", (d) => lineGenerator(d.data)).attr(
       "stroke",
-      (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
+      (d) => d.properties !== commonColors.white ? d.properties.color : "none"
     ).attr("stroke-dasharray", (d) => {
       switch (d.properties.lineStyle) {
         case staticLineStyle.dotted:
@@ -17673,7 +17829,7 @@ const CustomColumnChart = ({
     ).merge(rects).attr(
       "hoverId",
       (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    ).attr("x", (d) => xScaleForLegends("stackLegend")).attr(
+    ).attr("x", (d) => xScaleForLegends(chartTypes.StackColumnChart)).attr(
       "y",
       (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
     ).attr(
@@ -17810,7 +17966,7 @@ const CustomColumnChart = ({
   };
   const createStackData = (requiredStackChatData) => {
     let legendList = requiredStackChatData.data.map((d) => d.legend);
-    stackChartData = stack().keys(legendList).offset(diverging)(requiredStackChatData.stackData);
+    stackChartData = stack().keys(legendList).offset(none$3)(requiredStackChatData.stackData);
     requiredStackChatData.data.forEach(
       (data2, index2) => data2.data.forEach((axisData, position) => {
         axisData["0"] = stackChartData[index2][position][0];
@@ -17824,6 +17980,9 @@ const CustomColumnChart = ({
         stackData["color"] = JSON.parse(
           JSON.stringify(requiredStackChatData.data[j].properties.color)
         );
+        stackData["individualAnnotationVisibility"] = JSON.parse(
+          JSON.stringify(requiredStackChatData.data[j].properties.annotation)
+        );
         d.data.labelPosition = requiredStackChatData.data[j].properties.dataLabelPosition;
         d.data["labelColor"] = seriesColor == "2" ? JSON.parse(
           JSON.stringify(requiredStackChatData.data[j].properties.color)
@@ -17843,7 +18002,7 @@ const CustomColumnChart = ({
         d.data["color"] = JSON.parse(
           JSON.stringify(requiredStackChatData.data[j].properties.color)
         );
-        d.data["legend"] = `stackLegend`;
+        d.data["legend"] = requiredStackChatData.properties.type;
         d.data["type"] = JSON.parse(
           JSON.stringify(requiredStackChatData.data[j].properties.type)
         );
@@ -17859,7 +18018,15 @@ const CustomColumnChart = ({
       chartJSON.yMinLeft = Math.min(chartJSON.yMinLeft, ...totals);
     }
     if (secondaryStackAxisData.length > 0) {
-      const stackData = secondaryStackColumnAxisData.length > 0 ? getStackedData(filteredDimension, secondaryStackColumnAxisData, false) : getStackedData(filteredDimension, secondaryStackAreaAxisData, false);
+      const stackData = secondaryStackColumnAxisData.length > 0 ? getStackedData(
+        filteredDimension,
+        secondaryStackColumnAxisData,
+        false
+      ) : getStackedData(
+        filteredDimension,
+        secondaryStackAreaAxisData,
+        false
+      );
       const totals = stackData.map((d) => d.total);
       chartJSON.yMaxRight = Math.max(chartJSON.yMaxRight, ...totals);
       chartJSON.yMinRight = Math.min(chartJSON.yMinRight, ...totals);
@@ -22559,7 +22726,9 @@ const HorizontalBarChart = ({
       formatOptions,
       chartJSON,
       customYaxisMinValue,
-      customYaxisMaxValue
+      customYaxisMaxValue,
+      barChart,
+      innerWidth2
     ).yAxisLabelArray;
     chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
     chartJSON.yMinLeft = yAxisLabelArray[0];
@@ -25534,6 +25703,7 @@ const AreaChart = ({
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
+    const isLinesAndMarkersVisible = formatOptions.plotArea.plotAreaHideLineAndMarkers;
     lineData.forEach((lData) => {
       lData.data.forEach((cData) => {
         cData.hideZero = lData.properties.hideZeroValues;
@@ -25585,7 +25755,7 @@ const AreaChart = ({
         (d2) => d2.properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : strokeLineCap.butt
       ).attr(
         "stroke-width",
-        (d2) => d2.properties.lineStyle !== staticLineStyle.none && formatOptions.plotArea.plotAreaHideLineAndMarkers ? d2.properties.lineWidth : "0"
+        (d2) => !isLinesAndMarkersVisible ? 0 : d2.properties.lineStyle !== staticLineStyle.none && formatOptions.plotArea.plotAreaHideLineAndMarkers ? d2.properties.lineWidth : "0"
       ).attr("fill", "none");
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2.data)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       onHoverMarkerForAreaChartFamily(
@@ -26074,6 +26244,7 @@ const StackAreaChart = ({
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
+    const isLinesAndMarkersVisible = formatOptions.plotArea.plotAreaHideLineAndMarkers;
     lineData.forEach((lData) => {
       lData.data.forEach((cData) => {
         cData.hideZero = lData.properties.hideZeroValues;
@@ -26107,7 +26278,7 @@ const StackAreaChart = ({
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2)).attr(
         "stroke",
-        (d2) => d2.color !== commonColors.white ? d2.color : "none"
+        (d2) => d2.color !== commonColors.white ? seriesData[i].properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d2) => {
         const lineWidth = parseInt(
           seriesData[i].properties.lineWidth.toString()
@@ -26125,7 +26296,7 @@ const StackAreaChart = ({
         () => seriesData[i]?.properties?.lineStyle.toLowerCase() === staticLineStyle.dotted ? strokeLineCap.round : ""
       ).attr(
         "stroke-width",
-        (d2, i2) => seriesData[i2].properties.lineStyle !== staticLineStyle.none ? seriesData[i2].properties.lineWidth : "0"
+        () => !isLinesAndMarkersVisible ? 0 : seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : "0"
       ).attr("fill", "none").style("pointer-events", "none");
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       svg.selectAll(
@@ -26141,7 +26312,8 @@ const StackAreaChart = ({
       lineData,
       xScale,
       yScaleLeft,
-      chartType
+      chartType,
+      true
     );
     lineMarkers(
       areas,
@@ -26621,6 +26793,7 @@ const NormalizedStackAreaChart = ({
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
+    const isLinesAndMarkersVisible = formatOptions.plotArea.plotAreaHideLineAndMarkers;
     stackChartData.forEach(
       (data2, i) => data2.forEach((item, position) => {
         const total = item.data.total;
@@ -26662,7 +26835,7 @@ const NormalizedStackAreaChart = ({
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => columnGenerator(d2)).attr(
         "stroke",
-        (d2) => d2.color !== commonColors.white ? d2.color : "none"
+        (d2) => d2.color !== commonColors.white ? seriesData[i].properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d2) => {
         const lineWidth = parseInt(
           seriesData[i].properties.lineWidth.toString()
@@ -26680,7 +26853,7 @@ const NormalizedStackAreaChart = ({
         () => seriesData[i]?.properties?.lineStyle.toLowerCase() === staticLineStyle.dotted ? strokeLineCap.round : ""
       ).attr(
         "stroke-width",
-        (d2, i2) => seriesData[i2].properties.lineStyle !== staticLineStyle.none ? seriesData[i2].properties.lineWidth : "0"
+        () => !isLinesAndMarkersVisible ? 0 : seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : "0"
       ).attr("fill", "none").style("pointer-events", "none");
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => columnGenerator(d2)).attr("fill", commonColors.transparent).style("pointer-events", "all").raise();
       svg.selectAll(
@@ -26698,7 +26871,8 @@ const NormalizedStackAreaChart = ({
       lineData,
       xScale,
       yScaleLeft,
-      chartType
+      chartType,
+      true
     );
     gTag.selectAll(".parentGroup").raise();
     gTag.selectAll(".hoverLine").raise();
@@ -28817,6 +28991,8 @@ const ProgressChart = ({
   let legendListWidth;
   let radius;
   let innerRadius;
+  const arcIndex = 1;
+  const progressIndex = 0;
   useEffect(() => {
     drawChart();
   }, [formatOptions]);
@@ -28876,23 +29052,22 @@ const ProgressChart = ({
   };
   const initProgressChartData = () => {
     try {
-      seriesData = seriesData.sort((a2, b) => b.data[0].value - a2.data[0].value);
-      totalValue = ChartData[0].data[0].value + ChartData[1].data[0].value;
+      totalValue = ChartData[arcIndex].data[0].value + ChartData[progressIndex].data[0].value;
     } catch (error) {
       logError$2(fileName$3, "initProgressChartData", error);
     }
   };
   const drawProgressChart = () => {
     try {
-      let maxValue = ChartData[0].data[0].value;
-      let progressValue = ChartData[1].data[0].value;
+      let maxValue = ChartData[arcIndex].data[0].value;
+      let progressValue = ChartData[progressIndex].data[0].value;
       let completeAngle = Math.PI * 2;
       let progressAngle = progressValue / maxValue * Math.PI * 2;
       let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius).startAngle(0).cornerRadius(
         convertStringToNumber(chartFormatOptions.plotArea.cornerRadius)
       );
-      chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", ChartData[0].properties.color).attr(
+      chartAreaTagG.append("path").attr("class", "secondary-circle").attr("fill", ChartData[arcIndex].properties.color).attr(
         "fill-opacity",
         chartFormatOptions.plotArea.opacityforProgressScale
       ).attr("d", arc2({ endAngle: completeAngle })).on("mousemove", (d) => {
@@ -28900,7 +29075,7 @@ const ProgressChart = ({
           showTooltipOnMouseMove(
             [
               {
-                key: ChartData[0].properties.alias,
+                key: ChartData[arcIndex].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                   chartFormatOptions.toolTip.toolTipDisplayUnits,
                   chartFormatOptions.toolTip.toolTipNumberFormatProgress,
@@ -28910,7 +29085,7 @@ const ProgressChart = ({
             ],
             chartFormatOptions,
             void 0,
-            ChartData[0].properties
+            ChartData[arcIndex].properties
           );
         } catch (error) {
           logError$2(
@@ -28930,7 +29105,7 @@ const ProgressChart = ({
           );
         }
       }).attr("transform", getTransformString());
-      chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", ChartData[1].properties.color).attr(
+      chartAreaTagG.append("path").attr("class", "progress-circle").attr("fill", ChartData[progressIndex].properties.color).attr(
         "fill-opacity",
         chartFormatOptions.plotArea.opacityforProgressGoal
       ).attr("d", arc2({ endAngle: progressAngle })).on("mousemove", (d) => {
@@ -28938,7 +29113,7 @@ const ProgressChart = ({
           showTooltipOnMouseMove(
             [
               {
-                key: ChartData[1].properties.alias,
+                key: ChartData[progressIndex].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? Math.round(progressValue / maxValue * 100) + "%" : getNumberWithFormatFunction(
                   chartFormatOptions.toolTip.toolTipDisplayUnits,
                   chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28946,7 +29121,7 @@ const ProgressChart = ({
                 )(maxValue)
               },
               {
-                key: ChartData[0].properties.alias,
+                key: ChartData[arcIndex].properties.alias,
                 value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                   chartFormatOptions.toolTip.toolTipDisplayUnits,
                   chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -28956,7 +29131,7 @@ const ProgressChart = ({
             ],
             chartFormatOptions,
             void 0,
-            ChartData[1].properties
+            ChartData[progressIndex].properties
           );
         } catch (error) {
           logError$2(
@@ -54988,8 +55163,8 @@ const TornadoChart = ({
       svg,
       yScaleLeft,
       columnWidth,
-      isAdvanceAnalyticsChart,
       isReportEditable,
+      isAdvanceAnalyticsChart,
       barChart
     );
   };