pace-chart-lib 1.0.24 → 1.0.26

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

@@ -10854,7 +10854,7 @@
     Custom: "Custom"
   };
   var commonColors = /* @__PURE__ */ ((commonColors2) => {
-    commonColors2["white"] = "#FFFFFF";
+    commonColors2["white"] = "#ffffff";
     commonColors2["black"] = "#000000";
     commonColors2["transparent"] = "#FFFFFF00";
     return commonColors2;
@@ -12832,8 +12832,14 @@
       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) {
@@ -13024,7 +13030,7 @@
               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,
@@ -13055,7 +13061,7 @@
           };
           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;
           }
@@ -13109,7 +13115,7 @@
               );
             } 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,
@@ -13171,7 +13177,7 @@
           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;
@@ -13203,7 +13209,7 @@
         }
         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);
           });
         }
@@ -13311,6 +13317,168 @@
             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;
@@ -13343,7 +13511,7 @@
               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
             },
@@ -13366,7 +13534,7 @@
           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"]) &&
@@ -13394,17 +13562,15 @@
         });
         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) {
@@ -13414,10 +13580,11 @@
             }
           },
           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) {
@@ -13458,7 +13625,7 @@
           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;
@@ -14610,13 +14777,13 @@
           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",
@@ -14637,7 +14804,10 @@
         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;
   };
@@ -15376,7 +15546,7 @@
       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 {
@@ -15390,13 +15560,14 @@
           }
           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,
@@ -15404,7 +15575,7 @@
             },
             { 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);
         }
@@ -15422,9 +15593,10 @@
       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);
     }
@@ -15737,13 +15909,13 @@
           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) => {
@@ -15789,7 +15961,10 @@
           }
           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;
@@ -15830,7 +16005,7 @@
   }
   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":
@@ -16724,10 +16899,7 @@
           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(
             [
               {
@@ -16759,10 +16931,7 @@
             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) {
@@ -17119,9 +17288,13 @@
       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 +17314,7 @@
             primaryStackAreaAxisData.push(series);
           }
         }
-        series.data.forEach((point2) => {
+        series.data = series.data.map((point2) => {
           const newPoint = {
             ...point2,
             type: series.properties.type,
@@ -17149,7 +17322,7 @@
             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 +17330,7 @@
             yMaxLeft = Math.max(yMaxLeft, newPoint.value);
             yMinLeft = Math.min(yMinLeft, newPoint.value);
           }
+          return newPoint;
         });
       });
       filteredData = JSON.parse(JSON.stringify(seriesData));
@@ -17220,7 +17394,8 @@
           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 +17406,8 @@
           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 +17418,8 @@
           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 +17430,8 @@
           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 +17453,6 @@
       }
     };
     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 +17463,6 @@
         ]);
       }
       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 +17474,7 @@
       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 +17649,7 @@
       ).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 +17832,7 @@
       ).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 +17969,7 @@
     };
     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 +17983,9 @@
           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 +18005,7 @@
           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 +18021,15 @@
         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);
@@ -18768,18 +18938,8 @@
           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])));
@@ -19517,18 +19677,8 @@
           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();
@@ -22579,7 +22729,9 @@
         formatOptions,
         chartJSON,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        barChart,
+        innerWidth2
       ).yAxisLabelArray;
       chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
       chartJSON.yMinLeft = yAxisLabelArray[0];
@@ -22619,7 +22771,8 @@
           chartJSON,
           customYaxisMinValue,
           customYaxisMaxValue,
-          barChart
+          barChart,
+          innerWidth2
         );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
@@ -22719,10 +22872,7 @@
           }
         });
         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(
             [
               {
@@ -22754,10 +22904,7 @@
             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();
@@ -23189,7 +23336,6 @@
         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(
           [
             {
@@ -23214,15 +23360,8 @@
           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));
@@ -23890,7 +24029,6 @@
         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(
           [
             {
@@ -23915,14 +24053,10 @@
           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;
@@ -25572,6 +25706,7 @@
       ).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;
@@ -25623,18 +25758,9 @@
           (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,
@@ -26121,6 +26247,7 @@
       ).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;
@@ -26154,7 +26281,7 @@
         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()
@@ -26172,16 +26299,9 @@
           () => 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);
@@ -26195,7 +26315,8 @@
         lineData,
         xScale,
         yScaleLeft,
-        chartType
+        chartType,
+        true
       );
       lineMarkers(
         areas,
@@ -26675,6 +26796,7 @@
       ).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;
@@ -26716,7 +26838,7 @@
         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()
@@ -26734,18 +26856,9 @@
           () => 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, "-")
@@ -26761,7 +26874,8 @@
         lineData,
         xScale,
         yScaleLeft,
-        chartType
+        chartType,
+        true
       );
       gTag.selectAll(".parentGroup").raise();
       gTag.selectAll(".hoverLine").raise();
@@ -28880,6 +28994,8 @@
     let legendListWidth;
     let radius;
     let innerRadius;
+    const arcIndex = 1;
+    const progressIndex = 0;
     require$$0$1.useEffect(() => {
       drawChart();
     }, [formatOptions]);
@@ -28939,23 +29055,22 @@
     };
     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) => {
@@ -28963,7 +29078,7 @@
             showTooltipOnMouseMove(
               [
                 {
-                  key: ChartData[0].properties.alias,
+                  key: ChartData[arcIndex].properties.alias,
                   value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                     chartFormatOptions.toolTip.toolTipDisplayUnits,
                     chartFormatOptions.toolTip.toolTipNumberFormatProgress,
@@ -28973,7 +29088,7 @@
               ],
               chartFormatOptions,
               void 0,
-              ChartData[0].properties
+              ChartData[arcIndex].properties
             );
           } catch (error) {
             logError$2(
@@ -28993,7 +29108,7 @@
             );
           }
         }).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) => {
@@ -29001,7 +29116,7 @@
             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,
@@ -29009,7 +29124,7 @@
                   )(maxValue)
                 },
                 {
-                  key: ChartData[0].properties.alias,
+                  key: ChartData[arcIndex].properties.alias,
                   value: chartFormatOptions.toolTip.toolTipNumberFormatProgress == ",.0%" ? "100 %" : getNumberWithFormatFunction(
                     chartFormatOptions.toolTip.toolTipDisplayUnits,
                     chartFormatOptions.toolTip.toolTipDecimalPrecision,
@@ -29019,7 +29134,7 @@
               ],
               chartFormatOptions,
               void 0,
-              ChartData[1].properties
+              ChartData[progressIndex].properties
             );
           } catch (error) {
             logError$2(
@@ -55051,8 +55166,8 @@
         svg,
         yScaleLeft,
         columnWidth,
-        isAdvanceAnalyticsChart,
         isReportEditable,
+        isAdvanceAnalyticsChart,
         barChart
       );
     };