pace-chart-lib 1.0.24 → 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;
@@ -12829,8 +12829,14 @@ function getCurveType(formatOptions) {
     return stepAfter;
   }
 }
+function getSlicedLegendForTornado(legend) {
+  const index2 = legend.indexOf(" - ");
+  if (index2 == -1) return legend;
+  return legend.slice(index2 + 3);
+}
 function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d3Annotation2, labelExcludeList, individualLabelColor, oldAnnotationList, formatOptions, chartType, height, width, innerWidth2, dimensionList, innerHeight2, widgetId, svg, xScaleForLegends, columnWidth, isReportEditable, isSensitivityChart, barChart) {
   try {
+    const isTornadoChart = chartType === chartTypes.TornadoChart;
     let annotationType = formatOptions.annotation.annotationType ?? "1";
     let annotationPosition = formatOptions.annotation.annotationPosition.toString() != "4" ? formatOptions.annotation.annotationPosition : null;
     if (formatOptions.annotation.annotationVisibility) {
@@ -13021,7 +13027,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             align: barChart && chartType !== chartTypes.TornadoChart ? parseInt(d.LabelPosition) === 2 ? "middle" : "start" : chartType === chartTypes.TornadoChart ? "end" : "middle"
           },
           data: barChart ? {
-            y: d.Dimension,
+            y: isTornadoChart ? getSlicedLegendForTornado(d.Legend) : d.Dimension,
             x: { measure: d.Measure, axis: d.Axis },
             position: parseInt(d.LabelPosition),
             currentLegend: d.Legend,
@@ -13052,7 +13058,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         };
         if (barChart) {
           let requiredXScale = d.Axis === axisTypes.primary ? yScaleLeft : yScaleRight;
-          responsiveXaxisLabel(dimensionList, innerWidth2).includes(d.Dimension) && !labelExcludeList.includes(d.Legend) && requiredXScale(d.Measure) <= innerWidth2 && requiredXScale(d.Measure) >= 0 ? annotationsList.push(singleAnnotation) : null;
+          (responsiveXaxisLabel(dimensionList, innerWidth2).includes(d.Dimension) || chartType === chartTypes.TornadoChart) && !labelExcludeList.includes(d.Legend) && requiredXScale(d.Measure) <= innerWidth2 && requiredXScale(d.Measure) >= 0 ? annotationsList.push(singleAnnotation) : null;
         } else {
           responsiveXaxisLabel(dimensionList, innerWidth2).includes(d.Dimension) && !labelExcludeList.includes(d.Legend) && (d.Axis == axisTypes.primary ? yScaleLeft(d.Measure) <= innerHeight2 && yScaleLeft(d.Measure) >= 0 : yScaleRight(d.Measure) <= innerHeight2 && yScaleRight(d.Measure) >= 0) ? annotationsList.push(singleAnnotation) : null;
         }
@@ -13106,7 +13112,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             );
           } else {
             if (barChart) {
-              return xScaleForLegends ? xScale(d.y) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2 - 5 : xScale(d.y) - 5;
+              return isTornadoChart ? xScaleForLegends(d.y) + xScaleForLegends.bandwidth() / 2 : xScaleForLegends ? xScale(d.y) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2 - 5 : xScale(d.y) - 5;
             } else
               return dataLabelsPosition(
                 d.y.measure,
@@ -13168,7 +13174,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
         y: (d) => yScaleLeft.invert(d.y)
       }).notePadding(0).annotations(finalAnnotationList);
       if (formatOptions.plotArea.fitChart) svg.selectAll(".annotation-group").remove();
-      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType);
+      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType, barChart);
     }
   } catch (error) {
     throw error;
@@ -13200,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);
         });
       }
@@ -13308,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;
@@ -13340,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
           },
@@ -13363,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"]) &&
@@ -13391,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) {
@@ -13411,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) {
@@ -13455,7 +13622,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
         y: (d) => d.x.axis == axisTypes.primary ? yScaleLeft.invert(d.y) : yScaleRight.invert(d.y)
       }).notePadding(0).annotations(finalAnnotationList);
       if (!formatOptions.plotArea.fitChart) svg.selectAll(".annotation-group").remove();
-      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType);
+      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType, false);
     }
   } catch (error) {
     throw error;
@@ -14607,13 +14774,13 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
         y: (d) => yScaleLeft.invert(d.y)
       }).notePadding(0).annotations(finalAnnotationList);
       if (true) svg.selectAll(".annotation-group").remove();
-      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType);
+      let annotations = appendAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType, false);
     }
   } catch (error) {
     throw error;
   }
 }
-const appendAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotations, ConnectorType) => {
+const appendAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotations, ConnectorType, isBarChart) => {
   svg.selectAll(".annotation-group").remove();
   let annotations = svg.append("g").attr("id", "annotationGroup").attr("class", "annotation-group parentGroup").attr("transform", `translate(${margin.left},${margin.top})`).style("fill", formatOptions.annotation.annotationColor).style("font-family", formatOptions.annotation.annotationFontFamily).style("font-size", formatOptions.annotation.annotationFontSize).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
     "text-decoration",
@@ -14634,7 +14801,10 @@ const appendAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotation
       return `translate(${currentX}, 0)`;
     }
   });
-  annotations.selectAll("text").append("text").style("fill", formatOptions.annotation.annotationColor !== commonColors.white ? formatOptions.annotation.annotationColor : "none");
+  annotations.selectAll("text").style(
+    "text-anchor",
+    (d) => isBarChart ? d.data.position == "2" ? "middle" : "start" : "start"
+  ).append("text").style("fill", formatOptions.annotation.annotationColor !== commonColors.white ? formatOptions.annotation.annotationColor : "none");
   annotations.selectAll("tspan").attr("hoverId", (d) => d.data.hoverId ? d.data.hoverId : d.data.currentLegend.replaceAll(" ", "-")).style("visibility", (d) => parseFloat(d.data.y) == 0 && formatOptions.annotation.annotationHideZeroValues ? "hidden" : "visible");
   return annotations;
 };
@@ -15373,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 {
@@ -15387,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,
@@ -15401,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);
       }
@@ -15419,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);
   }
@@ -15734,13 +15906,13 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
         justifyContent = alignment == horizontalLegendAllignment.start ? "start" : alignment == horizontalLegendAllignment.middle ? "center" : "end";
       }
       let object2 = svg.append("foreignObject").attr("x", x2).attr("y", y2).style("pointer-events", "auto").attr("width", width + "px").attr("height", height + "px").style("user-select", "none");
-      var div = object2.append("xhtml:div").attr("id", "legendObject" + chartId).attr("class", "legendsBoxWrapper").style("width", width + "px").style("display", "flex").style("height", height - 1 + "px").style("overflow", "auto").style("pointer-events", "auto").style("justify-content", justifyContent).style("flex-direction", flexDirection).style(
+      var div = object2.append("xhtml:div").attr("id", "legendObject" + chartId).attr("class", "legendsBoxWrapper").style("width", width + "px").style("display", "flex").style("height", height - 1 + "px").style("overflow", "auto").style("pointer-events", "auto").style("justify-content", "safe " + justifyContent).style("flex-direction", flexDirection).style(
         "outline-offset",
         "-" + chartFormatOptions.legends.legendBorderThickness + "px"
       ).style(
         "outline",
         chartFormatOptions.legends.legendBorder ? `${chartFormatOptions.legends.legendBorderThickness + "px solid" + chartFormatOptions.legends.legendBorderColor}` : "none"
-      ).append("div").attr("class", "scrollbar").style("display", "flex").style("justify-content", justifyContent).style("flex-direction", flexDirection).style("flex-wrap", "nowrap").style("padding-left", "3px");
+      ).append("div").attr("class", "scrollbar").style("display", "flex").style("flex-direction", flexDirection).style("flex-wrap", "nowrap").style("padding-left", "3px");
       if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
         div.style("flex-direction", "row");
       seriesData.forEach((d, i) => {
@@ -15786,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;
@@ -15827,7 +16002,7 @@ function getHollowCircleShape(d, innerDiv) {
 }
 function getLineShape(d, innerDiv, formatOptions) {
   try {
-    let shape = innerDiv.append("div").style("height", "2px").style("width", "20px").style("background", d.properties.lineStyle == "solid" ? d.properties.color : commonColors.transparent).style("position", "relative").style("border-top", d.properties.lineStyle == "None" ? "unset" : d.properties.lineStyle == "dotted" ? "2px dotted " + d.properties.color : "2px dashed " + d.properties.color);
+    let shape = innerDiv.append("div").style("height", "2px").style("width", "20px").style("background", d.properties?.lineStyle?.toLowerCase() == "solid" ? d.properties.color : commonColors.transparent).style("position", "relative").style("border-top", d.properties.lineStyle == "None" ? "unset" : d.properties.lineStyle == "dotted" ? "2px dotted " + d.properties.color : "2px dashed " + d.properties.color);
     if (formatOptions.marker.markerVisibility) {
       switch (d.properties.markerShape.toLowerCase()) {
         case "circle":
@@ -16721,10 +16896,7 @@ const ColumnChart = ({
         return Math.abs(yScale(d.value) - yScale(0));
       });
       columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "visible");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         showTooltipOnMouseMove(
           [
             {
@@ -16756,10 +16928,7 @@ const ColumnChart = ({
           data2.properties
         );
       }).on("mouseout", (event2, d) => {
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "hidden");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         hideTooltipOnMouseOut();
       });
       columnGroups.exit().remove().each(function(d) {
@@ -17116,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);
@@ -17138,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,
@@ -17146,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);
@@ -17154,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));
@@ -17217,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
@@ -17228,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
@@ -17239,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
@@ -17250,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
@@ -17272,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,
@@ -17293,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
@@ -17312,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);
@@ -17487,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:
@@ -17670,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(
@@ -17807,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];
@@ -17821,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)
@@ -17840,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)
         );
@@ -17856,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);
@@ -18765,18 +18935,8 @@ const StackColumnChart = ({
         event2,
         d.properties
       );
-      const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
-      let legend = d?.properties.alias ? getHoverId(d?.properties.alias) : getHoverId(d.key);
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
       hideTooltipOnMouseOut();
-      const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-      let legend = d?.properties.alias ? getHoverId(d?.properties.alias) : getHoverId(d.key);
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
     });
     const finalRects = baseRects;
     finalRects.attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
@@ -19514,18 +19674,8 @@ const NormalizedStackColumnChart = ({
         event2,
         d.properties
       );
-      const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
-      const legend = (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-");
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
       hideTooltipOnMouseOut();
-      const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-      const legend = (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-");
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
     });
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
@@ -22576,7 +22726,9 @@ const HorizontalBarChart = ({
       formatOptions,
       chartJSON,
       customYaxisMinValue,
-      customYaxisMaxValue
+      customYaxisMaxValue,
+      barChart,
+      innerWidth2
     ).yAxisLabelArray;
     chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
     chartJSON.yMinLeft = yAxisLabelArray[0];
@@ -22616,7 +22768,8 @@ const HorizontalBarChart = ({
         chartJSON,
         customYaxisMinValue,
         customYaxisMaxValue,
-        barChart
+        barChart,
+        innerWidth2
       );
       xAxisBottom = axisBottom(xScaleBottom).tickFormat(
         (d) => getNumberWithFormat(
@@ -22716,10 +22869,7 @@ const HorizontalBarChart = ({
         }
       });
       columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "visible");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         showTooltipOnMouseMove(
           [
             {
@@ -22751,10 +22901,7 @@ const HorizontalBarChart = ({
           data2.properties
         );
       }).on("mouseout", (event2, d) => {
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "hidden");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
+        (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         hideTooltipOnMouseOut();
       });
       columnGroups.exit().remove();
@@ -23186,7 +23333,6 @@ const StackHorizontalChart = ({
       return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
     }).on("mousemove", (event2, d) => {
       const dim = d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
       showTooltipOnMouseMove(
         [
           {
@@ -23211,15 +23357,8 @@ const StackHorizontalChart = ({
         event2,
         d.properties
       );
-      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
-      const dim = d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
+      d.data.dimension;
       hideTooltipOnMouseOut();
     });
     baseRects.attr("x", (d) => xScaleBottom(0));
@@ -23887,7 +24026,6 @@ const NormalizedStackHorizontalBarChart = ({
       return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
     }).on("mousemove", (event2, d) => {
       const dim = d.data.dimension;
-      gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
       showTooltipOnMouseMove(
         [
           {
@@ -23912,14 +24050,10 @@ const NormalizedStackHorizontalBarChart = ({
         event2,
         d.properties
       );
-      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
-      selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-      selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
       let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
-      gTag.select(`#dim-background-${d.data.dimension}`).attr("visibility", "hidden");
       hideTooltipOnMouseOut();
     });
     const finalRects = baseRects;
@@ -25569,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;
@@ -25620,18 +25755,9 @@ 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().on("mouseenter", function(event2, d2) {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true).attr("stroke-width", "2.5");
-        svg.selectAll(
-          '[hoverId="' + getJQuerySelector(
-            d2.properties?.alias || d2.properties?.name || "Legend"
-          ).replace(/\s+/g, "-") + '"]'
-        ).classed("highlight", true).classed("unhighlight", false).attr("stroke-width", "3.5");
-      }).on("mouseleave", function(event2, d2) {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false).attr("stroke-width", "2.5");
-      });
+      g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2.data)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       onHoverMarkerForAreaChartFamily(
         formatOptions,
         areas,
@@ -26118,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;
@@ -26151,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()
@@ -26169,16 +26296,9 @@ 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().on("mouseenter", function(event2, d2) {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        svg.selectAll(
-          '[hoverId="' + (seriesData[d2.index]?.properties?.alias || seriesData[d2.index]?.properties?.name || "Legend").replace(/ /g, "-") + '"]'
-        ).classed("highlight", true).classed("unhighlight", false);
-      }).on("mouseleave", function() {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-      });
+      g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2)).attr("fill", commonColors.transparent).attr("stroke", "none").style("pointer-events", "all").raise();
       svg.selectAll(
         '[hoverId="' + (seriesData[d.index].properties.alias || seriesData[d.index].properties.name || "Legend").replace(/ /g, "-") + '"]'
       ).classed("highlight", false).classed("unhighlight", false);
@@ -26192,7 +26312,8 @@ const StackAreaChart = ({
       lineData,
       xScale,
       yScaleLeft,
-      chartType
+      chartType,
+      true
     );
     lineMarkers(
       areas,
@@ -26672,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;
@@ -26713,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()
@@ -26731,18 +26853,9 @@ 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().on("mouseenter", function(event2, d2) {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        svg.selectAll(
-          '[hoverId="' + getJQuerySelector(
-            (lineData[d2.index]?.properties?.alias || lineData[d2.index]?.properties?.name || "Legend").replace(/ /g, "-")
-          ) + '"]'
-        ).classed("highlight", true).classed("unhighlight", false);
-      }).on("mouseleave", function() {
-        svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-      });
+      g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => columnGenerator(d2)).attr("fill", commonColors.transparent).style("pointer-events", "all").raise();
       svg.selectAll(
         '[hoverId="' + getJQuerySelector(
           (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/ /g, "-")
@@ -26758,7 +26871,8 @@ const NormalizedStackAreaChart = ({
       lineData,
       xScale,
       yScaleLeft,
-      chartType
+      chartType,
+      true
     );
     gTag.selectAll(".parentGroup").raise();
     gTag.selectAll(".hoverLine").raise();
@@ -28877,6 +28991,8 @@ const ProgressChart = ({
   let legendListWidth;
   let radius;
   let innerRadius;
+  const arcIndex = 1;
+  const progressIndex = 0;
   useEffect(() => {
     drawChart();
   }, [formatOptions]);
@@ -28936,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) => {
@@ -28960,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,
@@ -28970,7 +29085,7 @@ const ProgressChart = ({
             ],
             chartFormatOptions,
             void 0,
-            ChartData[0].properties
+            ChartData[arcIndex].properties
           );
         } catch (error) {
           logError$2(
@@ -28990,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) => {
@@ -28998,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,
@@ -29006,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,
@@ -29016,7 +29131,7 @@ const ProgressChart = ({
             ],
             chartFormatOptions,
             void 0,
-            ChartData[1].properties
+            ChartData[progressIndex].properties
           );
         } catch (error) {
           logError$2(
@@ -55048,8 +55163,8 @@ const TornadoChart = ({
       svg,
       yScaleLeft,
       columnWidth,
-      isAdvanceAnalyticsChart,
       isReportEditable,
+      isAdvanceAnalyticsChart,
       barChart
     );
   };