pace-chart-lib 1.0.22 → 1.0.24

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

@@ -10721,11 +10721,29 @@
     return connectedStyle2;
   })(connectedStyle || {});
   var staticLineStyle = /* @__PURE__ */ ((staticLineStyle2) => {
-    staticLineStyle2["solid"] = "solid";
-    staticLineStyle2["dotted"] = "dotted";
-    staticLineStyle2["dashed"] = "dashed";
+    staticLineStyle2["none"] = "None";
+    staticLineStyle2["solid"] = "Solid";
+    staticLineStyle2["dotted"] = "Dotted";
+    staticLineStyle2["dashed"] = "Dashed";
     return staticLineStyle2;
   })(staticLineStyle || {});
+  var strokeLineCap = /* @__PURE__ */ ((strokeLineCap2) => {
+    strokeLineCap2["butt"] = "butt";
+    strokeLineCap2["round"] = "round";
+    strokeLineCap2["square"] = "square";
+    return strokeLineCap2;
+  })(strokeLineCap || {});
+  var axisTypes = /* @__PURE__ */ ((axisTypes2) => {
+    axisTypes2["primary"] = "Primary";
+    axisTypes2["secondary"] = "Secondary";
+    return axisTypes2;
+  })(axisTypes || {});
+  var visibilityCondition = /* @__PURE__ */ ((visibilityCondition2) => {
+    visibilityCondition2["visible"] = "visible";
+    visibilityCondition2["hidden"] = "hidden";
+    return visibilityCondition2;
+  })(visibilityCondition || {});
+  const strokeDashValues = "20,10,5,5,5,10";
   const ConnecterCurve = {
     "1": "",
     "2": curveLinear$1,
@@ -10835,6 +10853,18 @@
     Median: "Median",
     Custom: "Custom"
   };
+  var commonColors = /* @__PURE__ */ ((commonColors2) => {
+    commonColors2["white"] = "#FFFFFF";
+    commonColors2["black"] = "#000000";
+    commonColors2["transparent"] = "#FFFFFF00";
+    return commonColors2;
+  })(commonColors || {});
+  var tornadoEntryName = /* @__PURE__ */ ((tornadoEntryName2) => {
+    tornadoEntryName2["positive"] = "Positive";
+    tornadoEntryName2["negative"] = "Negative";
+    tornadoEntryName2["default"] = "defaultEntry";
+    return tornadoEntryName2;
+  })(tornadoEntryName || {});
   const defaultChartFormatOptions = {
     chartDescription: {
       chartDescriptionVisibility: false,
@@ -10842,10 +10872,10 @@
       chartDescriptionId: ""
     },
     chartArea: {
-      chartAreaColor: "#ffffff",
+      chartAreaColor: commonColors.white,
       chartAreaBorder: false,
       chartAreaBorderThickness: "1",
-      chartAreaBorderColor: "#000000",
+      chartAreaBorderColor: commonColors.black,
       chartAreaBorderStyle: "1"
     },
     chartTitle: {
@@ -10853,20 +10883,20 @@
       chartTitleFontSize: "15",
       chartTitleFontFamily: "Helvetica",
       chartTitleFontStyle: [],
-      chartTitleColor: "#000000",
+      chartTitleColor: commonColors.black,
       chartTitleText: "Chart Title Here",
       dynamicTitleText: "",
       chartTitleHTML: ""
     },
     xAxisLabel: {
       xAxisLabelVisibility: true,
-      xAxisColor: "#000000",
-      xAxisColorInverted: "transparent",
+      xAxisColor: commonColors.black,
+      xAxisColorInverted: commonColors.transparent,
       xAxisWidth: "0.5",
       xAxisLabelFontSize: "11",
       xAxisLabelFontFamily: "Helvetica",
       xAxisLabelFontStyle: [],
-      xAxisLabelColor: "#000000",
+      xAxisLabelColor: commonColors.black,
       xAxisNumberFormat: "MMM-YY",
       // "DD-MM-YYYY",
       xAxisQuarterFormat: "Long",
@@ -10898,7 +10928,7 @@
       xAxisTitleFontSize: "11",
       xAxisTitleFontFamily: "Helvetica",
       xAxisTitleFontStyle: [],
-      xAxisTitleColor: "#000000",
+      xAxisTitleColor: commonColors.black,
       xAxisTitleText: "Dimension",
       xAxisDynamicTitleText: "",
       xAxisTitleHTML: ""
@@ -10909,14 +10939,14 @@
     },
     yAxisLabel: {
       yAxisLabelVisibility: true,
-      yAxisColor: "transparent",
-      //"#000000",
-      yAxisColorInverted: "#000000",
+      yAxisColor: commonColors.transparent,
+      //commonColors.black,
+      yAxisColorInverted: commonColors.black,
       yAxisWidth: "0.5",
       yAxisLabelFontSize: "11",
       yAxisLabelFontFamily: "Helvetica",
       yAxisLabelFontStyle: [],
-      yAxisLabelColor: "#000000",
+      yAxisLabelColor: commonColors.black,
       yAxisNumberFormat: ",",
       yAxisDisplayUnits: "Auto",
       //"None",
@@ -10942,19 +10972,19 @@
       yAxisTitleFontSize: "11",
       yAxisTitleFontFamily: "Helvetica",
       yAxisTitleFontStyle: [],
-      yAxisTitleColor: "#000000",
+      yAxisTitleColor: commonColors.black,
       yAxisTitleText: "Measure",
       yAxisDynamicTitleText: "",
       yAxisTitleHTML: ""
     },
     secondaryYAxisLabel: {
       secondaryYAxisLabelVisibility: true,
-      secondaryYAxisColor: "#000000",
+      secondaryYAxisColor: commonColors.black,
       secondaryYAxisWidth: "0.5",
       secondaryYAxisLabelFontSize: "11",
       secondaryYAxisLabelFontFamily: "Helvetica",
       secondaryYAxisLabelFontStyle: [],
-      secondaryYAxisLabelColor: "#000000",
+      secondaryYAxisLabelColor: commonColors.black,
       secondaryYAxisNumberFormat: ",",
       secondaryYAxisDisplayUnits: "None",
       secondaryYAxisDisplayUnitsLabel: false,
@@ -10972,7 +11002,7 @@
       secondaryYAxisTitleFontSize: "11",
       secondaryYAxisTitleFontFamily: "Helvetica",
       secondaryYAxisTitleFontStyle: [],
-      secondaryYAxisTitleColor: "#000000",
+      secondaryYAxisTitleColor: commonColors.black,
       secondaryYAxisTitleText: "Measure",
       secondaryYAxisDynamicTitleText: "",
       secondaryYAxisTitleHTML: ""
@@ -10997,17 +11027,17 @@
       legendFontStyle: [],
       legendBorder: false,
       legendBorderThickness: "1",
-      legendBorderColor: "#000000",
-      vennLabelColor: "#000000",
+      legendBorderColor: commonColors.black,
+      vennLabelColor: commonColors.black,
       onHoverEffect: true,
       legendColorMode: "1",
-      legendSelectedUnicolor: "#000000"
+      legendSelectedUnicolor: commonColors.black
     },
     plotArea: {
-      plotAreaColor: "#ffffff",
+      plotAreaColor: commonColors.white,
       plotAreaBorder: false,
       plotAreaBorderThickness: "1",
-      plotAreaBorderColor: "#000000",
+      plotAreaBorderColor: commonColors.black,
       plotAreaGapWidth: "50",
       plotAreaSeriesWidth: "50",
       plotAreaBarWidth: "50",
@@ -11028,21 +11058,21 @@
       dataLabelsforMaps: false,
       dataLabelPosition: "1",
       dataLabelSize: "12",
-      dataLabelValueColor: "#000000",
+      dataLabelValueColor: commonColors.black,
       dataLabelValueFontSize: "11",
       dataLabelValueFontFamily: "Helvetica",
       dataLabelValueFontStyle: [],
       dataLabelNumberFormat: ",",
       dataLabelNumberFormatProgress: ",.0%",
       axialAxis: true,
-      axialAxisDataLabelColor: "#000000",
+      axialAxisDataLabelColor: commonColors.black,
       axialAxisDataLabelFontSize: "11",
       axialAxisDataLabelFontFamily: "Helvetica",
       axialAxisDataLabelFontStyle: [],
       axialAxisDataLabelNumberFormat: ",",
       axialAxisDataLabelDecimalPrecision: "2",
       dataLabelDecimalPrecision: "2",
-      dataLabelNameColor: "#000000",
+      dataLabelNameColor: commonColors.black,
       dataLabelNameFontSize: "11",
       dataLabelNameFontFamily: "Helvetica",
       dataLabelNameFontStyle: [],
@@ -11056,7 +11086,7 @@
       arcTransition: true,
       innerRadiusForSpeedometer: "30",
       ticks: "3",
-      pointerColor: "#000000",
+      pointerColor: commonColors.black,
       pointerHeadLength: "8",
       totalColor: "#41a5b4",
       positiveColor: "#9fb700",
@@ -11067,14 +11097,14 @@
       bubbleSizeIndex: "1",
       scatterSizeIndex: "4",
       hideZeroValues: false,
-      boxLineColor: "#000000",
+      boxLineColor: commonColors.black,
       boxLineWidth: "1",
       boxOutlier: false,
       boxOutlierRadius: "3",
       plotAreaShowTrendLine: false,
       plotAreaTrendLine: "Linear",
       plotAreaTrendLineWidth: "1",
-      plotAreaTrendLineColor: "#000000",
+      plotAreaTrendLineColor: commonColors.black,
       opacity: "0.5",
       plotAreaCalculatedHigh: "#00FF00",
       plotAreaCalculatedLow: "#FF0000",
@@ -11088,7 +11118,7 @@
       totalAlias: false,
       totalAliasText: "",
       refLineBorderThickness: "1",
-      refLineBorderColor: "#000000",
+      refLineBorderColor: commonColors.black,
       flipPyramid: false,
       opacityforProgressScale: "0.2",
       opacityforProgressGoal: "1",
@@ -11115,7 +11145,7 @@
       markerSize: "1",
       markerShape: "Circle",
       lineWidth: "1.5",
-      markerColor: "#000000"
+      markerColor: commonColors.black
     },
     annotation: {
       annotationDraggable: false,
@@ -11127,7 +11157,7 @@
       annotationVisibility: "5",
       annotationPosition: "1",
       annotationNumberFormat: ",",
-      annotationColor: "#000000",
+      annotationColor: commonColors.black,
       annotationFontSize: "9",
       annotationFontFamily: "Helvetica",
       annotationFontStyle: [],
@@ -11148,7 +11178,7 @@
       connectorStyle: "solid",
       dataLabelsCoordinates: [],
       totalNumberFormat: ",",
-      totalColor: "#000000",
+      totalColor: commonColors.black,
       totalFontSize: "9",
       totalFontFamily: "Helvetica",
       totalFontStyle: [],
@@ -11182,7 +11212,7 @@
       curviness: "0.5",
       nodesBorderVisibility: true,
       nodesBorderThickness: "1",
-      nodesBorderColor: "#000000",
+      nodesBorderColor: commonColors.black,
       nodeBorderStyle: "solid",
       nodesLabelVisibility: true,
       nodesLabelFontSize: "11",
@@ -11190,7 +11220,7 @@
       nodesLabelFontStyle: [],
       nodeLabelNumberFormat: ",",
       nodeLabelDecimalPrecision: "2",
-      nodesLabelColor: "#000000",
+      nodesLabelColor: commonColors.black,
       nodesLabelDisplayUnits: "None",
       nodesLabelOverlap: false,
       nodesLabelWrap: true,
@@ -11198,13 +11228,13 @@
       nodeWidth: "12",
       nodeType: "rectangle",
       nodesBorderRadius: "1",
-      dataLabelValueColor: "#000000",
+      dataLabelValueColor: commonColors.black,
       dataLabelValueFontSize: "11",
       dataLabelValueFontFamily: "Arial",
       dataLabelNumberFormat: ",",
       dataLabelDecimalPrecision: "2",
       dataLabelValueStyle: [],
-      nodesLabelFontColor: "#000000",
+      nodesLabelFontColor: commonColors.black,
       nodesDisplayUnits: "None",
       percentageVisibility: false,
       nodesLabelOverflow: true
@@ -11220,7 +11250,7 @@
       binsCalculationValue: "3",
       binsBorderVisibility: false,
       binsBorderThickness: "1",
-      binsBorderColor: "#000000",
+      binsBorderColor: commonColors.black,
       binsBorderOpacity: "0.5"
     },
     connector: {
@@ -11236,15 +11266,15 @@
       connectorNumberFormat: ",",
       connectorLineThickness: "1",
       connectorLineColor: "#080808",
-      connectorMarkerColor: "#000000",
-      connectorFontColor: "#000000",
+      connectorMarkerColor: commonColors.black,
+      connectorFontColor: commonColors.black,
       connectorDecimalPrecision: "2",
       connectorDisplayUnits: "None",
       connectorStyle: "solid",
       lineType: "straight",
       connectorType: "straight",
       connectorColorOption: "Discrete",
-      connectorUniformLineColor: "#000000"
+      connectorUniformLineColor: commonColors.black
     },
     footerNote: {
       footerNoteVisibility: false,
@@ -11252,28 +11282,28 @@
       footerNoteFontSize: "11",
       footerNoteFontFamily: "Helvetica",
       footerNoteFontStyle: [],
-      footerNoteFontColor: "#000000",
+      footerNoteFontColor: commonColors.black,
       footerNoteBorder: false,
       footerNoteBorderThickness: "1",
-      footerNoteBorderColor: "#000000"
+      footerNoteBorderColor: commonColors.black
     },
     pieofPie: {
       pieOfPieDataLabels: true,
       pieOfPieDataLabelValue: true,
       pieOfPieAbsoluteValue: false,
-      pieOfPieValueColor: "#000000",
+      pieOfPieValueColor: commonColors.black,
       pieOfPieValueFontSize: "11",
       pieOfPieValueFontFamily: "Helvetica",
       pieOfPieValueFontStyle: [],
       pieOfPieNumberFormat: ",",
       pieOfPieName: true,
-      pieOfPieNameColor: "#000000",
+      pieOfPieNameColor: commonColors.black,
       pieOfPieNameFontSize: "11",
       pieOfPieNameFontFamily: "Helvetica",
       pieOfPieNameFontStyle: [],
       pieOfPieRadius: 90,
       pieOfPieLineWidth: "1",
-      pieOfPieLineColor: "#000000",
+      pieOfPieLineColor: commonColors.black,
       pointerValueDecimalPrecision: "2",
       displayUnits: "None"
     },
@@ -11338,7 +11368,7 @@
       pointerValueFontSize: "11",
       pointerValueFontFamily: "Helvetica",
       pointerValueFontStyle: [],
-      pointerValueColor: "#000000",
+      pointerValueColor: commonColors.black,
       pointerValueAlias: false,
       pointerValueAliasText: ""
     },
@@ -11356,8 +11386,8 @@
     },
     bubbleformatting: {
       showBubble: true,
-      bubbleColor: "#000000",
-      bubbleBorderColor: "#000000",
+      bubbleColor: commonColors.black,
+      bubbleBorderColor: commonColors.black,
       bubbleBorderWidth: "1",
       bubbleOpacity: "4"
     },
@@ -11368,7 +11398,7 @@
     },
     columnBreakLine: {
       breakLineVisibility: true,
-      breakLineColor: "#000000",
+      breakLineColor: commonColors.black,
       breakLineWidth: "1",
       breakLineStyle: "Double"
     },
@@ -11382,7 +11412,7 @@
     column: {
       stackBorderVisibility: false,
       stackBorderWidth: "1",
-      stackBorderColor: "#000000",
+      stackBorderColor: commonColors.black,
       stackBorderStyle: "0"
     },
     line: {
@@ -11397,7 +11427,7 @@
       seriesLabelFontFamily: "Helvetica",
       seriesLabelFontSize: "11",
       seriesLabelFontStyle: [],
-      seriesLabelBackgroundColor: "transparent",
+      seriesLabelBackgroundColor: commonColors.transparent,
       seriesLabelPosition: "Right"
     },
     dataTableProperties: {
@@ -11408,7 +11438,7 @@
       dataTableNumberFormat: ",",
       dataTableDecimalPrecision: "2",
       dataTableDisplayUnits: "None",
-      dataTableLabelColor: "#000000"
+      dataTableLabelColor: commonColors.black
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11473,6 +11503,10 @@
     chartTypes2["PyramidChart"] = "PyramidChart";
     chartTypes2["ProgressChart"] = "ProgressChart";
     chartTypes2["RadialBarChart"] = "RadialBarChart";
+    chartTypes2["CombinationLine"] = "CombinationLine";
+    chartTypes2["CombinationArea"] = "CombinationArea";
+    chartTypes2["CombinationStackArea"] = "CombinationStackArea";
+    chartTypes2["TornadoDefaultEntry"] = "defaultEntry";
     return chartTypes2;
   })(chartTypes || {});
   const connecterCurve = {
@@ -11527,7 +11561,7 @@
     var boundingRect = div.getBoundingClientRect();
     var width = boundingRect.width;
     var height = boundingRect.height;
-    if (rotationDegree) {
+    if (rotationDegree != null) {
       div.style.transform = `rotate(${rotationDegree}deg)`;
       boundingRect = div.getBoundingClientRect();
       div.remove();
@@ -11597,8 +11631,7 @@
       "Helvetica"
     )[1] : 0;
     yTitle = yTitle > width * 0.1 ? width * 0.1 : yTitle;
-    let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility ? responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions, false, isNormalizedChart) + 10 : getYAxisLabel(formatOptions, max$2(legendList, (d) => d?.length || 0) || 0) + 10;
-    yLabel += 8;
+    let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility ? responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions, false, isNormalizedChart) + 5 : getYAxisLabel(formatOptions, max$2(legendList, (d) => d?.length || 0) || 0) + 10;
     let secondaryYLabel = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? responsiveYaxisMargin(
       maxNumberForSecondaryAxis,
       yMaxRight,
@@ -11665,7 +11698,7 @@
           left2 = yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.top:
-          right2 = 5 + secondaryExtra;
+          right2 = 15 + secondaryExtra;
           left2 = yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.right:
@@ -12241,7 +12274,7 @@
         formatOptions.plotArea.plotAreaBorder && !chartsWithoutPlotArea.includes(chartType) ? formatOptions.plotArea.plotAreaBorderColor : "none"
       ).attr("stroke-width", formatOptions.plotArea.plotAreaBorderThickness).attr(
         "fill",
-        formatOptions.plotArea.plotAreaColor !== "#ffffff" && !chartsWithoutPlotArea.includes(chartType) ? formatOptions.plotArea.plotAreaColor : "none"
+        formatOptions.plotArea.plotAreaColor !== commonColors.white && !chartsWithoutPlotArea.includes(chartType) ? formatOptions.plotArea.plotAreaColor : "none"
       );
     } catch (error) {
       throw error;
@@ -12263,7 +12296,7 @@
       );
       let yAxisLabelArray = [];
       let customTickValue;
-      const isTornadoChart = Ymin < 0 && Ymax > 0;
+      const isTornadoChart = chartJSON.chartType === chartTypes.TornadoChart;
       if (isTornadoChart) {
         const maxAbs = Math.max(Math.abs(Ymin), Math.abs(Ymax));
         const finalMax = customYaxisMaxValue || maxAbs;
@@ -12352,31 +12385,21 @@
   }
   function getLabelsFromAlgo(dataMin, dataMax, axisLengthPx, labelWidthPx = 80) {
     const dataRange = dataMax - dataMin;
-    if (dataRange === 0) {
-      return [dataMin];
+    if (!isFinite(dataRange) || Math.abs(dataRange) < 1e-12) {
+      return [Number(dataMin.toFixed(12))];
     }
     const maxLabels = dataRange < 10 ? 10 : Math.max(2, Math.floor(axisLengthPx / labelWidthPx));
     const rawInterval = dataRange / maxLabels;
     const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
     const niceNumbers = [1, 1.5, 2, 2.5, 5, 10];
-    let interval2 = null;
-    for (const n of niceNumbers) {
-      const candidate = n * magnitude;
-      if (Math.ceil(dataRange / candidate) <= maxLabels) {
-        interval2 = candidate;
-        break;
-      }
-    }
-    if (interval2 === null) {
-      interval2 = niceNumbers[niceNumbers.length - 1] * magnitude;
-    }
+    let interval2 = niceNumbers.map((n) => n * magnitude).find((i) => Math.ceil(dataRange / i) <= maxLabels);
+    if (!interval2) interval2 = niceNumbers.at(-1) * magnitude;
     const minLabel = Math.floor(dataMin / interval2) * interval2;
     const maxLabel = Math.ceil(dataMax / interval2) * interval2;
-    const labels = [];
-    let current = minLabel;
-    while (current <= maxLabel + 1e-8) {
-      labels.push(parseFloat(current.toFixed(10)));
-      current += interval2;
+    const steps = Math.round((maxLabel - minLabel) / interval2);
+    const labels = new Array(steps + 1);
+    for (let i = 0; i <= steps; i++) {
+      labels[i] = Number((minLabel + i * interval2).toFixed(12));
     }
     return labels;
   }
@@ -12388,13 +12411,13 @@
         dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2
       ).attr("width", yLabel).attr(
         "fill",
-        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const yAxisG = gTag.append("g").call(yAxisLeft);
       yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
       yAxisG.selectAll("text").style(
         "fill",
-        formatOptions.yAxisLabel.yAxisLabelColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
+        formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
       ).style("user-select", "none").style("font-size", formatOptions.yAxisLabel.yAxisLabelFontSize).style("font-family", formatOptions.yAxisLabel.yAxisLabelFontFamily).style("font-style", formatOptions.yAxisLabel.yAxisLabelFontStyle).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
         "text-decoration",
         fontStyle.includes("Underline") ? "Underline" : ""
@@ -12414,12 +12437,12 @@
     let fontStyle = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontStyle;
     gTag.append("rect").attr("transform", `translate(${innerWidth2},0)`).attr("height", dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2).attr("width", secondaryYLabel).attr(
       "fill",
-      formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor !== "#ffffff" ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+      formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
     );
     const secondaryYAxisG = gTag.append("g").call(yAxisRight).attr("transform", `translate(${innerWidth2},0)`);
     secondaryYAxisG.selectAll("text").style(
       "fill",
-      formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor !== "#ffffff" ? formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor : "none"
+      formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor : "none"
     ).style(
       "font-size",
       formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontSize
@@ -12531,7 +12554,7 @@
         `translate(1,${xaxisLabelPosition === "0" ? dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2 : xaxisLabelPosition === "1" ? -xLabel : yScaleLeft(0)})`
       ).attr("height", xLabel).attr("width", innerWidth2).attr(
         "fill",
-        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== "#ffffff" ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== commonColors.white ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const XaxisG = xAxisTag.append("g").attr(
         "transform",
@@ -12812,6 +12835,7 @@
   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 {
       let annotationType = formatOptions.annotation.annotationType ?? "1";
+      let annotationPosition = formatOptions.annotation.annotationPosition.toString() != "4" ? formatOptions.annotation.annotationPosition : null;
       if (formatOptions.annotation.annotationVisibility) {
         let Disable = [annotationType == "1" ? "connector" : ""];
         let labelData = [];
@@ -12838,61 +12862,77 @@
         switch (labelType) {
           case "2":
             chartData.forEach(
-              (d) => labelData.push({
-                Dimension: d.data[0].dimension,
-                Measure: d.data[0].value,
-                Legend: d.data[0].legend,
-                LabelPosition: d.properties.dataLabelPosition,
-                Labelcolor: d.properties.labelColor,
-                Axis: d.properties.axis
-              })
+              (d) => {
+                if (d.data[0])
+                  labelData.push({
+                    Dimension: d.data[0].dimension,
+                    Measure: d.data[0].value,
+                    Legend: d.data[0].legend,
+                    LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                    Labelcolor: d.properties.labelColor,
+                    Axis: d.properties.axis
+                  });
+              }
             );
             break;
           case "3":
             chartData.forEach(
-              (d) => labelData.push({
-                Dimension: d.data[d.data.length - 1].dimension,
-                Measure: d.data[d.data.length - 1].value,
-                Legend: d.data[d.data.length - 1].legend,
-                LabelPosition: d.properties.dataLabelPosition,
-                Labelcolor: d.properties.labelColor,
-                Axis: d.properties.axis
-              })
+              (d) => {
+                if (d.data[d.data.length - 1]) {
+                  labelData.push({
+                    Dimension: d.data[d.data.length - 1].dimension,
+                    Measure: d.data[d.data.length - 1].value,
+                    Legend: d.data[d.data.length - 1].legend,
+                    LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                    Labelcolor: d.properties.labelColor,
+                    Axis: d.properties.axis
+                  });
+                }
+              }
             );
             break;
           case "4":
             chartData.forEach(
-              (d) => labelData.push({
-                Dimension: d.data[0].dimension,
-                Measure: d.data[0].value,
-                Legend: d.data[0].legend,
-                LabelPosition: d.properties.dataLabelPosition,
-                Labelcolor: d.properties.labelColor,
-                Axis: d.properties.axis
-              })
+              (d) => {
+                if (d.data[0])
+                  labelData.push({
+                    Dimension: d.data[0].dimension,
+                    Measure: d.data[0].value,
+                    Legend: d.data[0].legend,
+                    LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                    Labelcolor: d.properties.labelColor,
+                    Axis: d.properties.axis
+                  });
+              }
             );
             chartData.forEach(
-              (d) => labelData.push({
-                Dimension: d.data[d.data.length - 1].dimension,
-                Measure: d.data[d.data.length - 1].value,
-                Legend: d.data[d.data.length - 1].legend,
-                LabelPosition: d.properties.dataLabelPosition,
-                Labelcolor: d.properties.labelColor,
-                Axis: d.properties.axis
-              })
+              (d) => {
+                if (d.data[d.data.length - 1])
+                  labelData.push({
+                    Dimension: d.data[d.data.length - 1].dimension,
+                    Measure: d.data[d.data.length - 1].value,
+                    Legend: d.data[d.data.length - 1].legend,
+                    LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                    Labelcolor: d.properties.labelColor,
+                    Axis: d.properties.axis
+                  });
+              }
             );
             break;
           case "1":
             for (let i = 0; i < chartData[0].data.length; i++) {
               chartData.forEach(
-                (d) => labelData.push({
-                  Dimension: d.data[i].dimension,
-                  Measure: d.data[i].value,
-                  Legend: d.data[i].legend,
-                  LabelPosition: d.properties.dataLabelPosition,
-                  Labelcolor: d.properties.labelColor,
-                  Axis: d.properties.axis
-                })
+                (d) => {
+                  if (d.data[i])
+                    labelData.push({
+                      Dimension: d.data[i].dimension,
+                      Measure: d.data[i].value,
+                      Legend: d.data[i].legend,
+                      LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                      Labelcolor: d.properties.labelColor,
+                      Axis: d.properties.axis
+                    });
+                }
               );
             }
             break;
@@ -12901,60 +12941,65 @@
             break;
           case "6":
             chartData.forEach((d) => {
-              let annotationVisibility = d.properties.individualAnnotationVisibility;
+              let annotationVisibility = d.properties.annotation.toString();
               switch (annotationVisibility) {
                 case "1":
                   for (let i = 0; i < chartData[0].data.length; i++) {
-                    labelData.push({
-                      Dimension: d.data[i].dimension,
-                      Measure: d.data[i].value,
-                      Legend: d.data[i].legend,
-                      LabelPosition: d.properties.dataLabelPosition,
-                      Labelcolor: d.properties.labelColor,
-                      Axis: d.properties.axis
-                    });
+                    if (d.data[i])
+                      labelData.push({
+                        Dimension: d.data[i].dimension,
+                        Measure: d.data[i].value,
+                        Legend: d.data[i].legend,
+                        LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                        Labelcolor: d.properties.labelColor,
+                        Axis: d.properties.axis
+                      });
                   }
                   break;
                 case "2":
                   labelData;
                   break;
                 case "3":
-                  labelData.push({
-                    Dimension: d.data[0].dimension,
-                    Measure: d.data[0].value,
-                    Legend: d.data[0].legend,
-                    LabelPosition: d.properties.dataLabelPosition,
-                    Labelcolor: d.properties.labelColor,
-                    Axis: d.properties.axis
-                  });
+                  if (d.data[0])
+                    labelData.push({
+                      Dimension: d.data[0].dimension,
+                      Measure: d.data[0].value,
+                      Legend: d.data[0].legend,
+                      LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                      Labelcolor: d.properties.labelColor,
+                      Axis: d.properties.axis
+                    });
                   break;
                 case "4":
-                  labelData.push({
-                    Dimension: d.data[d.data.length - 1].dimension,
-                    Measure: d.data[d.data.length - 1].value,
-                    Legend: d.data[d.data.length - 1].legend,
-                    LabelPosition: d.properties.dataLabelPosition,
-                    Labelcolor: d.properties.labelColor,
-                    Axis: d.properties.axis
-                  });
+                  if (d.data[d.data.length - 1])
+                    labelData.push({
+                      Dimension: d.data[d.data.length - 1].dimension,
+                      Measure: d.data[d.data.length - 1].value,
+                      Legend: d.data[d.data.length - 1].legend,
+                      LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                      Labelcolor: d.properties.labelColor,
+                      Axis: d.properties.axis
+                    });
                   break;
                 case "5":
-                  labelData.push({
-                    Dimension: d.data[0].dimension,
-                    Measure: d.data[0].value,
-                    Legend: d.data[0].legend,
-                    LabelPosition: d.properties.dataLabelPosition,
-                    Labelcolor: d.properties.labelColor,
-                    Axis: d.properties.axis
-                  });
-                  labelData.push({
-                    Dimension: d.data[d.data.length - 1].dimension,
-                    Measure: d.data[d.data.length - 1].value,
-                    Legend: d.data[d.data.length - 1].legend,
-                    LabelPosition: d.properties.dataLabelPosition,
-                    Labelcolor: d.properties.labelColor,
-                    Axis: d.properties.axis
-                  });
+                  if (d.data[0])
+                    labelData.push({
+                      Dimension: d.data[0].dimension,
+                      Measure: d.data[0].value,
+                      Legend: d.data[0].legend,
+                      LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                      Labelcolor: d.properties.labelColor,
+                      Axis: d.properties.axis
+                    });
+                  if (d.data[d.data.length - 1])
+                    labelData.push({
+                      Dimension: d.data[d.data.length - 1].dimension,
+                      Measure: d.data[d.data.length - 1].value,
+                      Legend: d.data[d.data.length - 1].legend,
+                      LabelPosition: annotationPosition ? annotationPosition : d.properties.annotationPosition,
+                      Labelcolor: d.properties.labelColor,
+                      Axis: d.properties.axis
+                    });
                   break;
               }
             });
@@ -12982,13 +13027,14 @@
               y: d.Dimension,
               x: { measure: d.Measure, axis: d.Axis },
               position: parseInt(d.LabelPosition),
-              currentLegend: d.Legend.replaceAll(" ", "-"),
+              currentLegend: d.Legend,
+              //d.Legend.replaceAll(" ", "-"), need to check for this case by space replaced with -
               isVisible: true
             } : {
               x: d.Dimension,
               y: { measure: d.Measure, axis: d.Axis },
               position: parseInt(d.LabelPosition),
-              currentLegend: d.Legend.replaceAll(" ", "-"),
+              currentLegend: d.Legend,
               isVisible: true
             },
             dx: 0,
@@ -13008,10 +13054,10 @@
             width
           };
           if (barChart) {
-            let requiredXScale = d.Axis === "Primary" ? yScaleLeft : yScaleRight;
+            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;
           } else {
-            responsiveXaxisLabel(dimensionList, innerWidth2).includes(d.Dimension) && !labelExcludeList.includes(d.Legend) && (d.Axis == "Primary" ? yScaleLeft(d.Measure) <= innerHeight2 && yScaleLeft(d.Measure) >= 0 : yScaleRight(d.Measure) <= innerHeight2 && yScaleRight(d.Measure) >= 0) ? annotationsList.push(singleAnnotation) : null;
+            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;
           }
         });
         annotationsList = annotationsList.filter((d) => d.data.y.measure != 0);
@@ -13040,17 +13086,19 @@
         makeAnnotations.editMode(formatOptions.annotation.annotationDraggable && isReportEditable).accessors({
           x: function(d) {
             if (barChart) {
-              let requiredXScale = d.x.axis === "Primary" ? yScaleLeft : yScaleRight;
+              let requiredXScale = d.x.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
               let axis2 = d.x.axis;
               return dataLabelsPositionForBarChartFamily(formatOptions, d.x.measure ? d.x.measure : 0, d.position, requiredXScale, minValue, void 0, chartType, isSensitivityChart, axis2);
             } else if (chartType === chartTypes.ColumnChart) {
-              return xScaleForLegends(d.currentLegend) ? xScale(d.x) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2 : xScale(d.x);
+              const legend = xScaleForLegends(d.currentLegend);
+              const x2 = legend != null ? xScale(d.x) + legend - (columnWidth - xScaleForLegends.bandwidth()) / 2 : xScale(d.x);
+              return x2;
             } else {
               return xScale(d.x);
             }
           },
           y: function(d) {
-            if (d.y.axis == "Primary") {
+            if (d.y.axis == axisTypes.primary) {
               return dataLabelsPosition(
                 d.y.measure,
                 parseFloat(d.position),
@@ -13061,8 +13109,7 @@
               );
             } else {
               if (barChart) {
-                let actualColWidth = chartType === chartTypes.TornadoChart || chartType === chartTypes.LayeredHorizontalBarChart ? xScaleForLegends.bandwidth() : -columnWidth;
-                return (xScaleForLegends && xScaleForLegends(d.currentLegend) ? xScaleForLegends(d.currentLegend) + xScaleForLegends.bandwidth() / 2 : 0) + xScale(d.y) - 5;
+                return xScaleForLegends ? xScale(d.y) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2 - 5 : xScale(d.y) - 5;
               } else
                 return dataLabelsPosition(
                   d.y.measure,
@@ -13319,11 +13366,11 @@
           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 == "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"]) &&
-            !labelExcludeList.includes(d["key"]) && (d.data.axis == "Primary" ? yScaleLeft(d[1]) <= innerHeight2 && yScaleLeft(d[1]) >= 0 : yScaleRight(d[1]) <= innerHeight2 && yScaleRight(d[1]) >= 0) ? annotationsList.push(singleAnnotation) : null
+            !labelExcludeList.includes(d["key"]) && (d.data.axis == axisTypes.primary ? yScaleLeft(d[1]) <= innerHeight2 && yScaleLeft(d[1]) >= 0 : yScaleRight(d[1]) <= innerHeight2 && yScaleRight(d[1]) >= 0) ? annotationsList.push(singleAnnotation) : null
           );
         });
         oldAnnotationList = oldAnnotationList.length == 0 ? annotationsList : oldAnnotationList;
@@ -13367,7 +13414,7 @@
             }
           },
           y: function(d) {
-            if (d.x.axis == "Primary") {
+            if (d.x.axis == axisTypes.primary) {
               return dataLabelsPosition(d.y, parseFloat(d.position), yScaleLeft, minValue, d.prevValue, d.type);
             } else {
               return dataLabelsPosition(d.y, parseFloat(d.position), yScaleRight, minValue, d.prevValue, d.type);
@@ -13408,7 +13455,7 @@
           }
         }).accessorsInverse({
           x: (d) => xScale.invert(d.x),
-          y: (d) => d.x.axis == "Primary" ? yScaleLeft.invert(d.y) : yScaleRight.invert(d.y)
+          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);
@@ -13596,7 +13643,7 @@
         yCordinate = yCordinate + cellHeight;
         cellHeight = data.properties.height;
         getLegendsAppended(tag, i, data, cellHeight);
-        let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", "transparent").attr(
+        let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
           "transform",
           (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
         );
@@ -14318,7 +14365,7 @@
           let seriesObject = {};
           let measureObject = seriesPosition == "Right" ? lineData.data[lineData.data.length - 1] : lineData.data[0];
           let yPositionMeasure = isStackedChart ? measureObject.value > 0 ? measureObject[1] : measureObject[0] : measureObject.value;
-          if (lineData.properties.axis == "Primary" || !yScaleRight) {
+          if (lineData.properties.axis == axisTypes.primary || !yScaleRight) {
             seriesObject["yPosition"] = yScaleLeft(yPositionMeasure) - hwObject[1] / 2;
           } else if (isSecondaryAxisDrawn && yScaleRight) {
             seriesObject["yPosition"] = yScaleRight(yPositionMeasure) - hwObject[1] / 2;
@@ -14411,7 +14458,7 @@
             break;
           case "6":
             chartData.forEach((d) => {
-              let annotationVisibility = d.individualAnnotationVisibility;
+              let annotationVisibility = d[0].properties.annotation.toString();
               switch (annotationVisibility) {
                 case "1":
                   for (let i = 0; i < chartData[0].length; i++) {
@@ -14482,7 +14529,7 @@
               height: 15,
               width: 15
             },
-            color: labelType !== "6" ? d.data.labelColor : d.properties.labelColor,
+            color: d.properties.labelColor,
             type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
             height,
             width
@@ -14590,7 +14637,7 @@
         return `translate(${currentX}, 0)`;
       }
     });
-    annotations.selectAll("text").append("text").style("fill", formatOptions.annotation.annotationColor !== "#ffffff" ? formatOptions.annotation.annotationColor : "none");
+    annotations.selectAll("text").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;
   };
@@ -14600,12 +14647,12 @@
       let rotation = "rotate(" + -formatOptions.yAxisLabel.yAxisLabelRotation + ")";
       gTag.append("rect").attr("transform", `translate(0,${innerHeight2})`).attr("height", yLabel + 10).attr("width", innerWidth2).attr(
         "fill",
-        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const xAxisG = gTag.append("g").call(xAxisBottom).attr("transform", `translate(0,${innerHeight2})`);
       xAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
       ;
-      xAxisG.selectAll("text").style("text-anchor", rotation == "rotate(0)" ? "middle" : "end").attr("dx", rotation == "rotate(0)" ? ".2em" : "-.1em").attr("dy", rotation == "rotate(0)" ? "1em" : ".15em").attr("transform", rotation).attr("transform", "rotate(-90) translate(-5,-5)").style("text-anchor", "end").style("fill", formatOptions.yAxisLabel.yAxisLabelColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisLabelColor : "none").style("font-size", formatOptions.yAxisLabel.yAxisLabelFontSize).style("font-family", formatOptions.yAxisLabel.yAxisLabelFontFamily).style("font-style", formatOptions.yAxisLabel.yAxisLabelFontStyle).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
+      xAxisG.selectAll("text").style("text-anchor", rotation == "rotate(0)" ? "middle" : "end").attr("dx", rotation == "rotate(0)" ? ".2em" : "-.1em").attr("dy", rotation == "rotate(0)" ? "1em" : ".15em").attr("transform", rotation).attr("transform", "rotate(-90) translate(-5,-5)").style("text-anchor", "end").style("fill", formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none").style("font-size", formatOptions.yAxisLabel.yAxisLabelFontSize).style("font-family", formatOptions.yAxisLabel.yAxisLabelFontFamily).style("font-style", formatOptions.yAxisLabel.yAxisLabelFontStyle).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
         "text-decoration",
         fontStyle.includes("Underline") ? "Underline" : ""
       ).style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr(
@@ -14644,7 +14691,7 @@
       gTag.selectAll("#yAxisG").remove();
       let yRect = gTag.append("rect").attr("id", "yAxisRect").attr("transform", chartType === chartTypes.TornadoChart ? `translate(${-xLabelMargin + 10},0)` : `translate(${xaxisLabelPosition === 0 ? -xLabelMargin - 5 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0) + (-xLabelMargin - 5)},0)`).attr("height", innerHeight2).attr("width", chartType === chartTypes.TornadoChart ? xLabelMargin + 20 : xLabelMargin + 5).attr(
         "fill",
-        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== "#ffffff" ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== commonColors.white ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const YaxisG = gTag.append("g").attr("id", "yAxisG").attr("transform", isTornadoChart ? `translate(${xScaleBottom(0)},0)` : `translate(${xaxisLabelPosition === 0 ? 0 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0)},0)`).call(yAxis);
       if (true) {
@@ -14758,11 +14805,11 @@
       let fontStyle = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontStyle;
       gTag.append("rect").attr("transform", `translate(0,-${xLabelSecondary})`).attr("height", xLabelSecondary).attr("width", innerWidth).attr(
         "fill",
-        formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor !== "#ffffff" ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : "none" : formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : "none" : formatOptions.secondaryYAxisLabel.secondaryYAxisBackgroundColor : formatOptions.chartArea.chartAreaColor
       );
       const XaxisG = gTag.append("g").call(xAxisTop).attr("transform", `translate(0,0)`);
       XaxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
-      XaxisG.selectAll("text").attr("transform", "rotate(270) translate(5,5)").style("text-anchor", "start").style("fill", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor !== "#ffffff" ? formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor : "none").style("font-size", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontSize).style("font-family", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
+      XaxisG.selectAll("text").attr("transform", "rotate(270) translate(5,5)").style("text-anchor", "start").style("fill", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor !== commonColors.white ? formatOptions.secondaryYAxisLabel.secondaryYAxisLabelColor : "none").style("font-size", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontSize).style("font-family", formatOptions.secondaryYAxisLabel.secondaryYAxisLabelFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
         "text-decoration",
         fontStyle.includes("Underline") ? "Underline" : ""
       ).style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr(
@@ -14916,16 +14963,137 @@
       true
     );
   };
+  function addTotalValue(totalValueMap, xScale, yScale, margin, d3Annotation2, oldAnnotationList, formatOptions, chartType, height, width, svg, isReportEditable, isBarChart) {
+    try {
+      if (formatOptions.total.totalVisibility) {
+        const dataLabelHeight = formatOptions.annotation.annotationVisibility != "5" ? 10 : 0;
+        let annotationType = formatOptions.total.annotationType ?? "1";
+        let Disable = [annotationType == "1" ? "connector" : ""];
+        let makeAnnotations = d3Annotation2.annotation();
+        let connector = formatOptions.total.connectorType;
+        let fontStyle = formatOptions.total.totalFontStyle;
+        let connectorType = formatOptions.total.connectorType ? formatOptions.total.connectorType.toLowerCase() : "None";
+        oldAnnotationList = [];
+        let annotationsList = [];
+        let totalValuesArray = Array.from(totalValueMap, ([Dimension, Measure]) => ({ Dimension, Measure }));
+        if (formatOptions.total.totalHideZeroValues) {
+          totalValuesArray = totalValuesArray.filter((d) => d.Measure !== 0);
+        }
+        totalValuesArray.forEach((d, i) => {
+          let singleAnnotation = {
+            note: {
+              label: d.Measure >= 1e9 && formatOptions.total.totalNumberFormat === ".2s" ? Math.round(d.Measure / 1e9) + "B" : getNumberWithFormat(
+                d.Measure,
+                formatOptions.total.totalDisplayUnits || formatOptions.plotArea.plotAreaDisplayUnits,
+                formatOptions.total.totalNumberFormat,
+                formatOptions.total.totalDecimalPrecision
+              )
+            },
+            data: {
+              y: d.Measure,
+              x: d.Dimension
+            },
+            dx: 0,
+            dy: 0,
+            connector: {
+              end: connectorType,
+              curve: connecterCurve[formatOptions.total.connectorCurve]
+            },
+            disable: Disable,
+            subject: {
+              height: 15,
+              width: 15
+            },
+            color: formatOptions.total.totalColor,
+            type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
+            height,
+            width
+          };
+          annotationsList.push(singleAnnotation);
+        });
+        makeAnnotations.editMode(formatOptions.total.annotationDraggable && isReportEditable).accessors({
+          x: function(d) {
+            return isBarChart ? yScale(d.y) + 25 : xScale(d.x);
+          },
+          y: function(d) {
+            return isBarChart ? xScale(d.x) - 5 : yScale(d.y) - dataLabelHeight - 15;
+          }
+        }).on("dragend", function(annotation2) {
+          annotations.selectAll(".connector").style("stroke", formatOptions.annotation.connectorColor || "#ccc").attr(
+            "stroke-dasharray",
+            connectedStyle[formatOptions.total.connectorStyle.toLowerCase()]
+          );
+          annotations.selectAll(`.connector-${connectorType}`).attr("fill", formatOptions.total.connectorColor || "#ccc").style(
+            "stroke",
+            formatOptions.total.connectorColor || "#ccc"
+          );
+          annotations.selectAll(".note-line").attr("hoverId", (d) => d.data.currentLegend).style("stroke", formatOptions.total.connectorColor || "#ccc").attr(
+            "stroke-dasharray",
+            connectedStyle[formatOptions.total.connectorStyle.toLowerCase()]
+          ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+        }).accessorsInverse({
+          x: (d) => xScale.invert(d.x),
+          y: (d) => yScale.invert(d.y)
+        }).notePadding(0).annotations(annotationsList);
+        let annotations = appendTotalAnnotations(svg, formatOptions, margin, fontStyle, makeAnnotations, connectorType);
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
+  const appendTotalAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotations, ConnectorType) => {
+    svg.selectAll(".annotation-group").remove();
+    let annotations = svg.append("g").attr("id", "annotationGroup").attr("class", "annotation-group").attr("transform", `translate(${margin.left},${margin.top})`).style("fill", formatOptions.total.totalColor).style("font-family", formatOptions.total.totalFontFamily).style("font-size", formatOptions.total.totalFontSize).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
+      "text-decoration",
+      fontStyle.includes("Underline") ? "Underline" : ""
+    ).style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").call(makeAnnotations);
+    annotations.selectAll("rect").style("visibility", "hidden");
+    annotations.selectAll(".annotation-subject").remove();
+    annotations.selectAll(".connector").style("stroke", formatOptions.total.connectorColor || "#ccc").attr("stroke-dasharray", connectedStyle[formatOptions.total.connectorStyle]);
+    annotations.selectAll(`.connector-${ConnectorType}`).attr("fill", formatOptions.total.connectorColor || "#ccc").style("stroke", formatOptions.total.connectorColor || "#ccc");
+    annotations.selectAll(".note-line").style("stroke", formatOptions.total.connectorColor || "#ccc").attr("stroke-dasharray", connectedStyle[formatOptions.total.connectorStyle]).filter((d) => d._dx == 0 && d._dy == 0).remove();
+    annotations.selectAll(".connector-end").filter((d) => d.connector.end == "dot" && d._dx == 0 && d._dy == 0).remove();
+    formatOptions.total.annotationType == "1" && annotations.selectAll(".annotation-note-content").attr("transform", function() {
+      const transform = select$2(this).attr("transform");
+      const translateValues = transform.match(/translate\(([^,]+),([^,]+)\)/);
+      if (translateValues) {
+        const currentX = parseFloat(translateValues[1]);
+        return `translate(${currentX}, 0)`;
+      }
+    });
+    annotations.selectAll("text").append("text").style("fill", formatOptions.total.totalColor !== commonColors.white ? formatOptions.total.totalColor : "none");
+    return annotations;
+  };
+  function createTotalMeasureValueMap(data, totalValueMap, filteredDimension) {
+    totalValueMap.clear();
+    if (filteredDimension && filteredDimension.length > 0) {
+      filteredDimension.forEach((dimension) => {
+        let totalMeasureValue = 0;
+        totalValueMap.set(dimension, totalMeasureValue);
+      });
+    }
+    if (data.ChartData && data.ChartData.length > 0) {
+      data.ChartData.forEach((series) => {
+        series.data.forEach((dataPoint, index2) => {
+          if (totalValueMap.has(dataPoint.dimension)) {
+            let existingTotal = totalValueMap.get(dataPoint.dimension) || 0;
+            existingTotal += dataPoint.value || 0;
+            totalValueMap.set(dataPoint.dimension, existingTotal);
+          }
+        });
+      });
+    }
+  }
   const chartProperties = {
     color: "defaultColor",
     name: "",
     type: "Line",
-    axis: "Primary",
+    axis: axisTypes.primary,
     alias: "",
     fontSize: 11,
     fontStyle: [],
     fontFamily: "Helvetica",
-    labelColor: "#000000",
+    labelColor: commonColors.black,
     hideZeroValues: false,
     markerShape: "Circle",
     lineStyle: "Solid",
@@ -14959,7 +15127,7 @@
     valueFontStyle: [],
     valueFont: "Helvetica",
     valueFontColor: "black",
-    backgroundColor: "#ffffff",
+    backgroundColor: commonColors.white,
     nodeHeight: 5,
     nodeWidth: 12,
     setColorScale: false,
@@ -14970,7 +15138,7 @@
     actualChartType: "chartType",
     secondaryAxisBgColor: "#e5e5e5",
     stackBorderWidth: 1,
-    stackBorderColor: "#000000",
+    stackBorderColor: commonColors.black,
     stackBorderStyle: 0,
     seriesLabelVisibility: true,
     individualAnnotationVisibility: "1",
@@ -15006,9 +15174,8 @@
     chartTypes.Speedometer,
     chartTypes.RadialBarChart
   ];
-  function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, inputSeries, chartId, legendShape, chartType) {
+  function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, legendShape, chartType) {
     try {
-      let seriesData = chartType !== chartTypes.TornadoChart ? [...inputSeries].reverse() : [...inputSeries];
       let position = formatOptions.legends.legendPosition;
       let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
       let verticalLegendAlignment = formatOptions.legends.legendAlignment;
@@ -15111,21 +15278,13 @@
       chartData.forEach(
         (d) => d.data.forEach(
           (j) => {
-            j["markerShape"] = type === "CombiLine" && !formatOptions.plotArea.plotAreaHideLineAndMarkers ? "None" : d.properties.markerShape ? d.properties.markerShape : "Circle";
+            j["markerShape"] = [chartTypes.CombinationLine, chartTypes.CombinationArea].includes(type) && !formatOptions.plotArea.plotAreaHideLineAndMarkers ? "None" : d.properties.markerShape ? d.properties.markerShape : "Circle";
             j["currentMeasure"] = d.properties.currentMeasure;
+            j["markerColor"] = d.properties.markerColor ? d.properties.markerColor : "Blue";
+            j["markerSize"] = d.properties.markerShape != "None" && d.properties.markerSize && d.properties.markerShape != "None" ? type === "Area" ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? d.properties.markerSize : 0 : d.properties.markerSize : 0;
           }
         )
       );
-      chartData.forEach(
-        (d) => d.data.forEach(
-          (j) => j["markerColor"] = d.properties.markerColor ? d.properties.markerColor : "Blue"
-        )
-      );
-      chartData.forEach(
-        (d) => d.data.forEach(
-          (j) => j["markerSize"] = d.properties.markerShape != "None" && d.properties.markerSize && d.properties.markerShape != "None" ? type === "Area" ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? d.properties.markerSize : 0 : d.properties.markerSize : 0
-        )
-      );
       let markerGroups = lines.selectAll(".lineGroup").data(chartData, (d) => d.legend);
       let markerGroupsEnter = markerGroups.enter().append("g").attr("class", "parentGroup").attr("hoverId", (d) => (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-"));
       let mergedMarkerGroups = markerGroupsEnter.merge(markerGroups);
@@ -15137,12 +15296,12 @@
           return Symbol$1().type(Markershapes(d.markerShape)).size(d.markerSize * 50)();
         }).attr("visibility", (d) => {
           const hideByX = !xScale(d.dimension) && xScale(d.dimension) !== 0;
-          const visible = formatOptions.marker.markerVisibility ? checkVisibleConditions(chartData, d, type, hideZeroValues, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue) ? "hidden" : [chartTypes.NormalizedStackLineChart, "CombiLine"].includes(type) ? "visible" : [chartTypes.StackAreaChart, chartTypes.AreaChart, "CombiArea", "CombiStackArea"].includes(type) ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? "visible" : "hidden" : "visible" : type === "CombiLine" ? "visible" : ["Area", "CombiArea"].includes(type) ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? "visible" : "hidden" : "hidden";
-          return hideByX ? "hidden" : visible;
+          const visible = formatOptions.marker.markerVisibility ? checkVisibleConditions(chartData, d, type, hideZeroValues, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue) ? visibilityCondition.hidden : [chartTypes.NormalizedStackLineChart, chartTypes.CombinationLine, chartTypes.CombinationArea].includes(type) ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? visibilityCondition.visible : visibilityCondition.hidden : [chartTypes.StackAreaChart, chartTypes.AreaChart, chartTypes.CombinationStackArea].includes(type) ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? visibilityCondition.visible : visibilityCondition.hidden : visibilityCondition.visible : [chartTypes.CombinationLine, chartTypes.CombinationArea].includes(type) ? visibilityCondition.visible : ["Area"].includes(type) ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? visibilityCondition.visible : visibilityCondition.hidden : visibilityCondition.hidden;
+          return hideByX ? visibilityCondition.hidden : visible;
         }).attr("transform", (d) => {
-          let requiredYScale = d.axis == "Primary" ? yScale : yScaleRight;
+          let requiredYScale = d.axis == axisTypes.primary ? yScale : yScaleRight;
           const x2 = xScale(d.dimension);
-          const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, "CombiStackArea"].includes(type) ? d[1] > 0 ? requiredYScale(d[1]) : requiredYScale(d[0]) : requiredYScale(d.value);
+          const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, chartTypes.CombinationStackArea].includes(type) ? d[1] > 0 ? requiredYScale(d[1]) : requiredYScale(d[0]) : requiredYScale(d.value);
           return `translate(${x2},${y2})`;
         }).on("mousemove", function(event2, d) {
           const dataPoint = d;
@@ -15180,13 +15339,13 @@
           );
           parentG.selectAll(".halo").remove();
           parentG.insert("circle", ":first-child").attr("class", "halo").attr("cx", xScale(dataPoint.dimension)).attr("cy", () => {
-            const requiredYScale = dataPoint.axis === "Primary" ? yScale : yScaleRight;
-            return [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, "CombiStackArea"].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
+            const requiredYScale = dataPoint.axis === axisTypes.primary ? yScale : yScaleRight;
+            return [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, chartTypes.CombinationStackArea].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
           }).attr("fill", legendEntry.markerColor).attr("opacity", 0.5).attr("r", legendEntry.markerSize * 10);
           select$2(this).transition().duration(100).attr("transform", () => {
-            const requiredYScale = dataPoint.axis === "Primary" ? yScale : yScaleRight;
+            const requiredYScale = dataPoint.axis === axisTypes.primary ? yScale : yScaleRight;
             const x2 = xScale(dataPoint.dimension);
-            const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, "CombiStackArea"].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
+            const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, chartTypes.CombinationStackArea].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
             return `translate(${x2},${y2}) scale(1.3)`;
           });
         }).on("mouseout", function(event2, d) {
@@ -15195,9 +15354,9 @@
           hideTooltipOnMouseOut();
           parentG.selectAll(".halo").remove();
           select$2(this).transition().duration(100).attr("transform", () => {
-            const requiredYScale = dataPoint.axis === "Primary" ? yScale : yScaleRight;
+            const requiredYScale = dataPoint.axis === axisTypes.primary ? yScale : yScaleRight;
             const x2 = xScale(dataPoint.dimension);
-            const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, "CombiStackArea"].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
+            const y2 = [chartTypes.NormalizedStackAreaChart, chartTypes.StackAreaChart, chartTypes.StackLineChart, chartTypes.NormalizedStackLineChart, chartTypes.CombinationStackArea].includes(type) ? dataPoint[1] > 0 ? requiredYScale(dataPoint[1]) : requiredYScale(dataPoint[0]) : requiredYScale(dataPoint.value);
             return `translate(${x2},${y2}) scale(1)`;
           });
         });
@@ -15209,10 +15368,10 @@
   const checkVisibleConditions = (chartData, d, type, hideZeroValues, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue) => {
     try {
       if (chartData[0].properties.axis && chartData[0].properties.axis === "Secondary") {
-        return hideZeroValues && d.Measure == 0 || d.Measure > secondaryCustomYaxisMaxValue || d.Measure < secondaryCustomYaxisMinValue;
+        return hideZeroValues && d.value == 0 || d.value > secondaryCustomYaxisMaxValue || d.value < secondaryCustomYaxisMinValue;
       } else if (type.includes("Stack")) {
-        return d.Measure > 0 ? hideZeroValues && d[1] == 0 || d[1] < customYaxisMinValue || d[1] > customYaxisMaxValue : hideZeroValues && d[0] == 0 || d[0] < customYaxisMinValue || d[0] > customYaxisMaxValue;
-      } else return hideZeroValues && d.Measure == 0 || d.Measure < customYaxisMinValue || d.Measure > customYaxisMaxValue;
+        return d.value > 0 ? hideZeroValues && d[1] == 0 || d[1] < customYaxisMinValue || d[1] > customYaxisMaxValue : hideZeroValues && d[0] == 0 || d[0] < customYaxisMinValue || d[0] > customYaxisMaxValue;
+      } else return hideZeroValues && d.value == 0 || d.value < customYaxisMinValue || d.value > customYaxisMaxValue;
     } catch (error) {
       logError$2(fileName$b, "checkVisibleConditions", error);
     }
@@ -15422,13 +15581,13 @@
   }
   function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     try {
-      const markerColor = prop?.markerColor ?? "blue";
+      const markerColor = prop.color ?? prop?.markerColor ?? "blue";
       const markerShape = prop?.markerShape.toLowerCase() ?? "circle";
       const isLightTheme = chartFormatOptions.toolTip.toolTipTheme === "Light";
       const bgColor = isLightTheme ? "rgba(255, 255, 255)" : "#272729ff";
-      const textColor = isLightTheme ? "black" : "#ffffff";
+      const textColor = isLightTheme ? "black" : commonColors.white;
       const subTextColor = isLightTheme ? "gray" : "#d1d5db";
-      selectAll(".chartTooltip").style("visibility", "hidden");
+      selectAll(".chartTooltip").style("visibility", visibilityCondition.hidden);
       const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
         "class",
         isLightTheme ? "tooltipParentLight chartTooltip" : "tooltipParentDark chartTooltip"
@@ -15520,7 +15679,7 @@
       }
       tooltip.style("left", `${left2}px`).style("top", `${top2}px`).style(
         "visibility",
-        chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden"
+        chartFormatOptions.toolTip.toolTipVisibility ? visibilityCondition.visible : visibilityCondition.hidden
       ).style("transform", "scale(1)").style("opacity", "1");
       tooltip.select(".arrow-placeholder").attr("class", `arrow-${arrow}`);
     } catch (error) {
@@ -15529,7 +15688,7 @@
   }
   function hideTooltipOnMouseOut() {
     try {
-      select$2("#chartTooltipDiv").html("").style("visibility", "hidden");
+      select$2("#chartTooltipDiv").html("").style("visibility", visibilityCondition.hidden);
     } catch (error) {
       logError$2(fileName$b, "hideTooltipOnMouseOut", error);
     }
@@ -15539,14 +15698,14 @@
       let svg = select$2(chartSvg.current);
       let object2 = svg.append("foreignObject").attr(
         "visibility",
-        chartFormatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden"
+        chartFormatOptions.chartTitle.chartTitleVisibility ? visibilityCondition.visible : visibilityCondition.hidden
       ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", chartTitleWidth).attr("height", chartTitleHeight + "px");
       if (chartFormatOptions.chartTitle.dynamicTitleText.length !== 0) {
-        object2.append("xhtml:div").style("color", "rgba(119,119,119)").attr("title", chartFormatOptions.chartTitle.chartTitleText).style("white-space", "pre").style("text-overflow", "ellipsis").style("overflow", "visible").style("line-height", "1.3em").html(
+        object2.append("xhtml:div").style("color", "rgba(119,119,119)").attr("title", chartFormatOptions.chartTitle.chartTitleText).style("white-space", "pre").style("text-overflow", "ellipsis").style("overflow", visibilityCondition.visible).style("line-height", "1.3em").html(
           chartFormatOptions.chartTitle.chartTitleHTML ? chartFormatOptions.chartTitle.chartTitleHTML : chartFormatOptions.chartTitle.chartTitleText
         );
       } else {
-        object2.append("xhtml:div").style("white-space", "pre").style("user-select", "none").style("text-overflow", "ellipsis").style("overflow", "visible").style("line-height", "1.3em").attr("class", "chartTiltle").attr("id", "chartTitleId").style("text-anchor", "start").style("color", "rgba(119,119,119)").style("font-size", "16px").style(
+        object2.append("xhtml:div").style("white-space", "pre").style("user-select", "none").style("text-overflow", "ellipsis").style("overflow", visibilityCondition.visible).style("line-height", "1.3em").attr("class", "chartTiltle").attr("id", "chartTitleId").style("text-anchor", "start").style("color", "rgba(119,119,119)").style("font-size", "16px").style(
           "font-family",
           chartFormatOptions.chartTitle.chartTitleFontFamily
         ).attr("title", chartFormatOptions.chartTitle.chartTitleText).html(chartFormatOptions.chartTitle.chartTitleText);
@@ -15629,7 +15788,7 @@
             }
           }
           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 : "#000000" : chartFormatOptions.legends.legendSelectedUnicolor;
+          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(
             "font-style",
             () => {
@@ -15671,7 +15830,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 : "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 == "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":
@@ -15980,7 +16139,7 @@
       logError$2(fileName$b, "convertStringToNumber", error);
     }
   };
-  function generalizedChartData(chartData, dimensionList) {
+  function generalizedChartData(chartData, dimensionList, isTornadoChart = false) {
     try {
       return chartData.map((item) => {
         let properties;
@@ -16010,7 +16169,7 @@
         return {
           ...item,
           properties,
-          data: item.data
+          data: isTornadoChart ? item.data : normalizedData
         };
       });
     } catch (error) {
@@ -16474,7 +16633,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -16523,7 +16684,13 @@
         let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
         column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
         let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
+        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
+          "hoverId",
+          (data2.properties.alias || data2.properties.name || "Legend").replace(
+            /\s+/g,
+            "-"
+          )
+        ).attr(
           "transform",
           (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
         );
@@ -16536,9 +16703,12 @@
           (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
         );
         const bars = columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legend)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
-          const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+          const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
           return yScale(0);
-        }).attr("height", 0).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        }).attr("height", 0).attr("fill", data2.properties.color).attr(
+          "stroke-dasharray",
+          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
+        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
           "stroke",
           (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
@@ -16547,10 +16717,10 @@
         );
         const finalBars = bars;
         finalBars.attr("y", (d) => {
-          const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+          const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
           return d.value > 0 ? yScale(d.value) : yScale(0);
         }).attr("height", (d) => {
-          const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+          const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
           return Math.abs(yScale(d.value) - yScale(0));
         });
         columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
@@ -16746,10 +16916,6 @@
     let xScale;
     let xScaleForLegends;
     let calculatedRange;
-    let stackAreaChartDataForPrimaryAxis = [];
-    let stackAreaChartDataForSecondaryAxis = [];
-    let stackColumnChartDataForPrimaryAxis = [];
-    let stackColumnChartDataForSecondaryAxis = [];
     let primaryStackAxisData = [];
     let secondaryStackAxisData = [];
     let primaryStackAreaAxisData = [];
@@ -16857,6 +17023,7 @@
         innerHeight2,
         chartType
       );
+      updateStackAxisExtremes();
       initScale();
       initAxis();
       initYaxis$1(
@@ -16965,7 +17132,7 @@
             secondaryStackAreaAxisData.push(series);
           }
         }
-        if (series.properties.axis === "Primary") {
+        if (series.properties.axis === axisTypes.primary) {
           primaryStackAxisData.push(series);
           if (series.properties.type == chartTypes.StackColumnChart) {
             primaryStackColumnAxisData.push(series);
@@ -17021,132 +17188,91 @@
         primaryStackAreaAxisData,
         primaryStackColumnAxisData,
         secondaryStackAreaAxisData,
-        secondaryStackColumnAxisData
+        secondaryStackColumnAxisData,
+        seriesData
       );
-      if (primaryStackAxisData.length > 0) {
-        let valueArray = [];
-        let stackDataForPrimaryAxis = getStackedData(
-          filteredDimension,
-          primaryStackAxisData,
-          false
-        );
-        stackDataForPrimaryAxis.forEach((d) => {
-          valueArray.push(d.total);
-        });
-        chartJSON.yMaxLeft = Math.max(
-          chartJSON.yMaxLeft,
-          Math.max(...valueArray)
-        );
-        chartJSON.yMinLeft = Math.min(
-          chartJSON.yMinLeft,
-          Math.min(...valueArray)
-        );
-      }
-      if (secondaryStackAxisData.length > 0) {
-        let valueArray = [];
-        let stackDataForSecondaryAxis = getStackedData(
-          filteredDimension,
-          secondaryStackAxisData,
-          false
-        );
-        stackDataForSecondaryAxis.forEach((d) => {
-          valueArray.push(d.total);
-        });
-        chartJSON.yMaxRight = Math.max(
-          chartJSON.yMaxRight,
-          Math.max(...valueArray)
-        );
-        chartJSON.yMinRight = Math.min(
-          chartJSON.yMinRight,
-          Math.min(...valueArray)
-        );
-      }
     };
-    const checkAndupdateInputData = (primaryStackAreaAxisData2, primaryStackColumnAxisData2, secondaryStackAreaAxisData2, secondaryStackColumnAxisData2) => {
-      let tempStackAreaChartDataForPrimaryAxis = getStackedData(
+    const checkAndupdateInputData = (primaryStackAreaAxisData2, primaryStackColumnAxisData2, secondaryStackAreaAxisData2, secondaryStackColumnAxisData2, ChartData) => {
+      const tempStackAreaChartDataForPrimaryAxis = getStackedData(
         filteredDimension,
         primaryStackAreaAxisData2,
         false
       );
-      let tempStackAreaChartDataForSecondaryAxis = getStackedData(
+      const tempStackAreaChartDataForSecondaryAxis = getStackedData(
         filteredDimension,
         secondaryStackAreaAxisData2,
         false
       );
-      let tempStackColumnChartDataForPrimaryAxis = getStackedData(
+      const tempStackColumnChartDataForPrimaryAxis = getStackedData(
         filteredDimension,
         primaryStackColumnAxisData2,
         false
       );
-      let tempStackColumnChartDataForSecondaryAxis = getStackedData(
+      const tempStackColumnChartDataForSecondaryAxis = getStackedData(
         filteredDimension,
         secondaryStackColumnAxisData2,
         false
       );
       requiredData = [];
-      stackAreaChartDataForPrimaryAxis = [];
-      stackAreaChartDataForSecondaryAxis = [];
-      stackColumnChartDataForPrimaryAxis = [];
-      stackColumnChartDataForSecondaryAxis = [];
-      if (primaryStackAreaAxisData2.length) {
-        primaryStackAreaAxisData2.forEach((d) => {
-          stackAreaChartDataForPrimaryAxis.push({
-            properties: {
-              axis: d.properties.axis,
-              type: d.properties.type,
-              legend: d.properties.legend
-            },
-            stackData: tempStackAreaChartDataForPrimaryAxis,
-            data: primaryStackAreaAxisData2
-          });
+      const allGeneratedData = [];
+      primaryStackAreaAxisData2.forEach((d) => {
+        allGeneratedData.push({
+          properties: {
+            axis: d.properties.axis,
+            type: d.properties.type,
+            legend: d.properties.legend
+          },
+          stackData: tempStackAreaChartDataForPrimaryAxis,
+          data: primaryStackAreaAxisData2
         });
-      }
-      if (secondaryStackAreaAxisData2.length) {
-        secondaryStackAreaAxisData2.forEach((d) => {
-          stackAreaChartDataForSecondaryAxis.push({
-            properties: {
-              axis: d.properties.axis,
-              type: d.properties.type,
-              legend: d.properties.legend
-            },
-            stackData: tempStackAreaChartDataForSecondaryAxis,
-            data: secondaryStackAreaAxisData2
-          });
+      });
+      secondaryStackAreaAxisData2.forEach((d) => {
+        allGeneratedData.push({
+          properties: {
+            axis: d.properties.axis,
+            type: d.properties.type,
+            legend: d.properties.legend
+          },
+          stackData: tempStackAreaChartDataForSecondaryAxis,
+          data: secondaryStackAreaAxisData2
         });
-      }
-      if (primaryStackColumnAxisData2.length) {
-        primaryStackColumnAxisData2.forEach((d) => {
-          stackAreaChartDataForSecondaryAxis.push({
-            properties: {
-              axis: d.properties.axis,
-              type: d.properties.type,
-              legend: d.properties.legend
-            },
-            stackData: tempStackColumnChartDataForPrimaryAxis,
-            data: primaryStackColumnAxisData2
-          });
+      });
+      primaryStackColumnAxisData2.forEach((d) => {
+        allGeneratedData.push({
+          properties: {
+            axis: d.properties.axis,
+            type: d.properties.type,
+            legend: d.properties.legend
+          },
+          stackData: tempStackColumnChartDataForPrimaryAxis,
+          data: primaryStackColumnAxisData2
         });
-      }
-      if (secondaryStackColumnAxisData2.length) {
-        secondaryStackColumnAxisData2.forEach((d) => {
-          stackColumnChartDataForSecondaryAxis.push({
-            properties: {
-              axis: d.properties.axis,
-              type: d.properties.type,
-              legend: d.properties.legend
-            },
-            stackData: tempStackColumnChartDataForSecondaryAxis,
-            data: secondaryStackColumnAxisData2
-          });
+      });
+      secondaryStackColumnAxisData2.forEach((d) => {
+        allGeneratedData.push({
+          properties: {
+            axis: d.properties.axis,
+            type: d.properties.type,
+            legend: d.properties.legend
+          },
+          stackData: tempStackColumnChartDataForSecondaryAxis,
+          data: secondaryStackColumnAxisData2
+        });
+      });
+      allGeneratedData.push(...chartJSON.chartData);
+      if (ChartData.length) {
+        const ordered = [];
+        ChartData.forEach((data2) => {
+          ordered.push(
+            ...allGeneratedData.filter(
+              (d) => d.properties?.type === data2.properties.type && d.properties.legend === data2.legend
+            )
+          );
         });
+        requiredData.push(...ordered);
+      } else {
+        requiredData.push(...allGeneratedData);
       }
-      requiredData.push(
-        ...chartJSON.chartData,
-        ...stackAreaChartDataForPrimaryAxis,
-        ...stackAreaChartDataForSecondaryAxis,
-        ...stackColumnChartDataForPrimaryAxis,
-        ...stackColumnChartDataForSecondaryAxis
-      );
     };
     const initScale = () => {
       let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -17189,7 +17315,7 @@
       calculatedRange = [0, innerWidth2];
     };
     const getXScale = () => {
-      xScaleForLegends = band().domain(chartJSON.legendList).range([0, columnWidth]).paddingInner(
+      xScaleForLegends = band().domain(chartJSON.legendList.reverse()).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);
@@ -17219,6 +17345,15 @@
         ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxRight,
+          chartJSON.yMinRight,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisRight = axisRight(yScaleRight).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -17227,20 +17362,8 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision
           )
         ).tickValues(
-          responsiveSecondaryYaxisLabel(
-            secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-            chartJSON.yMinRight,
-            formatOptions,
-            chartJSON
-          ).secondaryYAxisLabelArray
-        ).ticks(
-          responsiveSecondaryYaxisLabel(
-            secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
-            chartJSON.yMinRight,
-            formatOptions,
-            chartJSON
-          ).secondaryCustomTickValue ?? innerHeight2 / 30
-        ).tickSize(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -17257,10 +17380,8 @@
             drawColumnChart(data2);
             break;
           case chartTypes.LineChart:
-            drawLineChart([data2]);
             break;
           case chartTypes.AreaChart:
-            drawAreaChart([data2]);
             break;
           case chartTypes.StackColumnChart:
             stackColumnData = createStackData(data2);
@@ -17272,6 +17393,18 @@
             break;
         }
       });
+      const lineSeries = filteredData.filter(
+        (d) => d.properties.type === chartTypes.LineChart
+      );
+      if (lineSeries.length) {
+        drawLineChart(lineSeries);
+      }
+      const AreaSeries = filteredData.filter(
+        (d) => d.properties.type === chartTypes.AreaChart
+      );
+      if (AreaSeries.length) {
+        drawAreaChart(AreaSeries);
+      }
       gTag.selectAll(".parentGroup").raise();
     };
     const drawColumnChart = (data2) => {
@@ -17282,19 +17415,15 @@
         "hoverId",
         (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
       ).attr("transform", (d) => `translate(${xScale(d.dimension)}, 0)`);
-      columnGroups.attr(
-        "transform",
-        (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
-      );
       columnGroupsEnter.merge(columnGroups).attr(
         "transform",
         (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
       );
       columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legend)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
-        const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return d.value > 0 ? yScale(d.value) : yScale(0);
       }).attr("height", (d) => {
-        const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+        const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return Math.abs(yScale(d.value) - yScale(0));
       }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
         "stroke",
@@ -17330,7 +17459,8 @@
             }
           ],
           formatOptions,
-          event2
+          event2,
+          seriesData.filter((e) => e.legend === d.legend)[0].properties
         );
       }).on("mouseout", hideTooltipOnMouseOut);
       columnGroups.exit().remove();
@@ -17345,28 +17475,34 @@
       const lineGenerator = line$1().x(
         (d) => xScale(d.dimension) ? xScale(d.dimension) : null
       ).y(
-        (d) => d.axis == "Primary" ? yScaleLeft(d.value) : yScaleRight(d.value)
+        (d) => d.axis == axisTypes.primary ? yScaleLeft(d.value) : yScaleRight(d.value)
       ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
-      let lines = gTag.selectAll(".parentGroup").data([lineData]);
+      let lines = gTag.selectAll(".lines.parentGroup").data([1]);
       lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
-      let lineGroups = lines.selectAll(".line-group").data((d) => d);
+      let lineGroups = lines.selectAll(".line-group").data(lineData, (d) => d.legend);
       let lineGroupsEnter = lineGroups.enter().append("g").attr("class", "line-group");
-      lineGroupsEnter.attr("hoverId", (d) => d.legend.replace(/ /g, "-")).append("path").attr("class", "line").attr("fill", "none");
+      lineGroupsEnter.attr(
+        "hoverId",
+        (d) => (d.properties.alias || d.properties.name || "Legend").replace(
+          /\s+/g,
+          "-"
+        )
+      ).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 !== "#ffffff" ? d.properties.color : "none"
+        (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
       ).attr("stroke-dasharray", (d) => {
         switch (d.properties.lineStyle) {
           case staticLineStyle.dotted:
             return "0,3";
           case staticLineStyle.dashed:
-            return "20,10,5,5,5,10";
+            return strokeDashValues;
           default:
             return "";
         }
       }).attr(
         "stroke-linecap",
-        (d) => d.properties.lineStyle === staticLineStyle.dotted ? "round" : ""
+        (d) => d.properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : ""
       ).attr(
         "stroke-width",
         (d) => d.properties.lineStyle !== "None" ? d.properties.lineWidth : "0"
@@ -17375,7 +17511,7 @@
       lineMarkers(
         lines,
         lineData,
-        "CombiLine",
+        chartTypes.CombinationLine,
         xScale,
         yScaleLeft,
         yScaleRight,
@@ -17389,45 +17525,57 @@
       );
     };
     const drawAreaChart = (lineData) => {
+      lineData.forEach((lData) => {
+        lData.data.forEach((cData) => {
+          cData.hideZero = lData.properties.hideZeroValues;
+          cData.axis = lData.properties.axis;
+        });
+      });
       const areaGenerator = area().x(
         (d) => xScale(d.dimension) ? xScale(d.dimension) : null
       ).y0(
         (d) => (
-          // d.axis == "Primary" ?
+          // d.axis == axisTypes.primary ?
           yScaleLeft(0)
         )
         // : yScaleRight(0)
       ).y1(
         (d) => (
-          // d.axis == "Primary" ?
+          // d.axis == axisTypes.primary ?
           yScaleLeft(d.value)
         )
         // : yScaleRight((d as TDataPoint).value)
       ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
-      let areas = gTag.selectAll(".parentGroup").data([lineData]);
+      let areas = gTag.selectAll(".areas.parentGroup").data([1]);
       let focus = gTag.append("g").attr("class", "focusClass");
       areas = areas.enter().append("g").attr("class", "areas parentGroup").merge(areas);
-      let areaGroups = areas.selectAll(".area-group").data((d) => d);
+      let areaGroups = areas.selectAll(".area-group").data(lineData, (d) => d.legend);
       let areaGroupsEnter = areaGroups.enter().append("g").attr("class", "area-group");
-      areaGroupsEnter.attr("hoverId", (d) => d.legend.replace(/ /g, "-")).append("path").attr("class", "area").attr(
+      areaGroupsEnter.attr(
+        "hoverId",
+        (d) => (d.properties.alias || d.properties.name || "Legend").replace(
+          /\s+/g,
+          "-"
+        )
+      ).append("path").attr("class", "area").attr(
         "fill",
-        (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none"
+        (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
       ).style("fill-opacity", formatOptions.plotArea.fillOpacity);
       areaGroupsEnter.merge(areaGroups).select("path").attr("d", (d) => areaGenerator(d.data)).attr(
         "stroke",
-        (d) => d.properties.areaBorderColor !== "#ffffff" ? d.properties.areaBorderColor : "none"
+        (d) => d.properties.areaBorderColor !== commonColors.white ? d.properties.areaBorderColor : "none"
       ).attr("stroke-dasharray", (d) => {
         switch (d.properties.lineStyle) {
           case "dotted":
             return "0,3";
           case "dashed":
-            return "20,10,5,5,5,10";
+            return strokeDashValues;
           default:
             return "";
         }
       }).attr(
         "stroke-linecap",
-        (d) => d.properties.lineStyle === "dotted" ? "round" : ""
+        (d) => d.properties.lineStyle === "dotted" ? strokeLineCap.round : ""
       ).attr(
         "stroke-width",
         (d) => d.properties.lineStyle !== "None" && formatOptions.plotArea.plotAreaHideLineAndMarkers ? d.properties.lineWidth : "0"
@@ -17443,14 +17591,35 @@
         chartType
       );
       areaGroups.exit().remove();
+      lineMarkers(
+        areas,
+        lineData,
+        chartTypes.CombinationArea,
+        xScale,
+        yScaleLeft,
+        yScaleRight,
+        null,
+        formatOptions,
+        chartJSON,
+        secondaryCustomYaxisMaxValue,
+        secondaryCustomYaxisMinValue,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
     };
     const drawStackAreaChart = (data2) => {
+      data2.data.forEach((lData) => {
+        lData.data.forEach((cData) => {
+          cData.hideZero = lData.properties.hideZeroValues;
+          cData.axis = lData.properties.axis;
+        });
+      });
       const areaGenerator = area().x(
         (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
       ).y0(
-        (d) => d.data.axis == "Primary" ? yScaleLeft(0) : yScaleRight(0)
+        (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[0]) : yScaleRight(d[0])
       ).y1(
-        (d) => d.data.axis == "Primary" ? d[1] > 0 ? yScaleLeft(d[1]) : yScaleLeft(d[0]) : d[1] > 0 ? yScaleRight(d[1]) : yScaleRight(d[0])
+        (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
       ).defined((d) => d.hideZero ? Boolean(d.key) : true).curve(getCurveType(formatOptions));
       let areas = gTag.selectAll(".parentGroup").data([stackAreaData]);
       gTag.append("g").attr("class", "focusClass");
@@ -17459,14 +17628,17 @@
       let areaGroupsEnter = areaGroups.enter().append("g").attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
       areaGroupsEnter.attr(
         "hoverId",
-        (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-      ).append("path").attr("class", "area").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none");
-      areaGroupsEnter.merge(areaGroups).select("path").attr("d", (d, i) => areaGenerator(d)).style("opacity", formatOptions.plotArea.fillOpacity).attr("stroke", (d) => d.color !== "#ffffff" ? d.color : "none").attr(
+        (d) => (data2.data.filter((e) => e.legend === d.key)[0].properties.alias || data2.data.filter((e) => e.legend === d.key)[0].properties.name || "Legend").replace(/\s+/g, "-")
+      ).append("path").attr("class", "area").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none");
+      areaGroupsEnter.merge(areaGroups).select("path").attr("d", (d, i) => areaGenerator(d)).style("opacity", formatOptions.plotArea.fillOpacity).attr(
+        "stroke",
+        (d) => d.color !== commonColors.white ? d.color : "none"
+      ).attr(
         "stroke-dasharray",
-        (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "0,3" : seriesData[i].properties.lineStyle === "dashed" ? "20,10,5,5,5,10" : ""
+        (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "0,3" : seriesData[i].properties.lineStyle === "dashed" ? strokeDashValues : ""
       ).attr(
         "stroke-linecap",
-        (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "round" : ""
+        (d, i) => seriesData[i].properties.lineStyle === "dotted" ? strokeLineCap.round : ""
       ).attr(
         "stroke-width",
         (d, i) => seriesData[i].properties.lineStyle !== "None" ? seriesData[i].properties.lineWidth : "0"
@@ -17475,7 +17647,7 @@
       lineMarkers(
         areas,
         data2.data,
-        "CombiStackArea",
+        chartTypes.CombinationStackArea,
         xScale,
         yScaleLeft,
         yScaleRight,
@@ -17503,10 +17675,10 @@
         (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
       ).attr("x", (d) => xScaleForLegends("stackLegend")).attr(
         "y",
-        (d) => d.data.axis === "Primary" ? yScaleLeft(d[1]) : yScaleRight(d[1])
+        (d) => d.data.axis === axisTypes.primary ? yScaleLeft(d[1]) : yScaleRight(d[1])
       ).attr(
         "height",
-        (d) => d.data.axis === "Primary" ? customYaxisMaxValue && d[1] > customYaxisMaxValue ? yScaleLeft(d[0]) - yScaleLeft(customYaxisMaxValue) : yScaleLeft(d[0]) - yScaleLeft(d[1]) : secondaryCustomYaxisMaxValue && d[1] > secondaryCustomYaxisMaxValue ? yScaleRight(d[0]) - yScaleRight(secondaryCustomYaxisMaxValue) : yScaleRight(d[0]) - yScaleRight(d[1])
+        (d) => d.data.axis === axisTypes.primary ? customYaxisMaxValue && d[1] > customYaxisMaxValue ? yScaleLeft(d[0]) - yScaleLeft(customYaxisMaxValue) : yScaleLeft(d[0]) - yScaleLeft(d[1]) : secondaryCustomYaxisMaxValue && d[1] > secondaryCustomYaxisMaxValue ? yScaleRight(d[0]) - yScaleRight(secondaryCustomYaxisMaxValue) : yScaleRight(d[0]) - yScaleRight(d[1])
       ).attr("width", xScaleForLegends.bandwidth()).attr("fill", (d, i, nodes) => {
         const seriesIndex = Array.from(seriesData).findIndex(
           (sdata) => sdata.legend === d.key
@@ -17550,7 +17722,8 @@
             }
           ],
           formatOptions,
-          event2
+          event2,
+          seriesData.filter((e) => e.legend === d.key)[0].properties
         );
       }).on("mouseout", hideTooltipOnMouseOut);
       stackColumnGroups.exit().remove();
@@ -17567,7 +17740,8 @@
         primaryStackAreaAxisData,
         primaryStackColumnAxisData,
         secondaryStackAreaAxisData,
-        secondaryStackColumnAxisData
+        secondaryStackColumnAxisData,
+        fData
       );
       filteredData = JSON.parse(JSON.stringify(requiredData));
       filteredData.forEach((data2, i) => {
@@ -17677,6 +17851,20 @@
       });
       return stackChartData;
     };
+    const updateStackAxisExtremes = () => {
+      if (primaryStackAxisData.length > 0) {
+        const stackData = primaryStackColumnAxisData.length > 0 ? getStackedData(filteredDimension, primaryStackColumnAxisData, false) : getStackedData(filteredDimension, primaryStackAreaAxisData, false);
+        const totals = stackData.map((d) => d.total);
+        chartJSON.yMaxLeft = Math.max(chartJSON.yMaxLeft, ...totals);
+        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 totals = stackData.map((d) => d.total);
+        chartJSON.yMaxRight = Math.max(chartJSON.yMaxRight, ...totals);
+        chartJSON.yMinRight = Math.min(chartJSON.yMinRight, ...totals);
+      }
+    };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
       {
@@ -18014,7 +18202,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -18034,7 +18224,13 @@
         let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
         column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
         let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
+        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
+          "hoverId",
+          (data2.properties.alias || data2.properties.name || "Legend").replace(
+            /\s+/g,
+            "-"
+          )
+        ).attr(
           "transform",
           (d) => index2 === 0 ? `translate(${xScale(d.dimension) - columnWidth / 2}, 0)` : `translate(${xScale(d.dimension) - columnWidth / (2 + index2 * 2)}, 0)`
         );
@@ -18047,10 +18243,10 @@
           (d) => index2 === 0 ? `translate(${xScale(d.dimension) - columnWidth / 2}, 0)` : `translate(${xScale(d.dimension) - columnWidth / (2 + index2 * 2)}, 0)`
         );
         columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.dimension)).attr("width", index2 === 0 ? columnWidth : columnWidth / 2 + index2 * 2).attr("y", (d) => {
-          const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+          const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
           return d.value > 0 ? yScale(d.value) : yScale(0);
         }).attr("height", (d) => {
-          const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+          const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
           return Math.abs(yScale(d.value) - yScale(0));
         }).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
@@ -18211,11 +18407,8 @@
     let scrollbarVisible = false;
     const chartType = chartTypes.StackColumnChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(
-      data.ChartData,
-      data.DimensionList
-    )?.reverse();
     const dimensionList = data.DimensionList;
+    const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
     const barChart = false;
     const isSecondaryAxisDrawn = false;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -18257,6 +18450,7 @@
     let scrollPosition = 0;
     let visibleBars;
     let stackChartData = [];
+    let totalValueMap = /* @__PURE__ */ new Map();
     const isNormalizedChart = false;
     let chartJSON = {
       dimensionList,
@@ -18279,15 +18473,6 @@
         logError$2("StackStackColumnchart", "createStackColumnChart", error);
       }
     }, [formatOptions]);
-    const getResponsiveYParams = () => responsiveYaxisLabel$1(
-      customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-      chartJSON.yMinLeft,
-      innerHeight2,
-      formatOptions,
-      chartJSON,
-      customYaxisMinValue,
-      customYaxisMaxValue
-    );
     const createStackColumnChart = () => {
       ({ formatOptions, svg, width, height } = firstFunctionBeforeRender$1(
         svgRef,
@@ -18411,7 +18596,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.rectangle
       );
@@ -18474,10 +18659,6 @@
       }
     };
     const initScale = () => {
-      let responsiveParams = getResponsiveYParams();
-      let yAxisLabelArray = responsiveParams.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,
@@ -18512,7 +18693,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(respParams.autoLabelFlag ? void 0 : respParams.yAxisLabelArray).ticks(respParams.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          respParams.autoLabelFlag ? void 0 : respParams.yAxisLabelArray
+        ).ticks(respParams.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -18611,6 +18794,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
       drawLineChart();
     };
     const drawLineChart = () => {
@@ -18660,6 +18844,20 @@
         dataTableHeight,
         isReportEditable
       );
+      addTotalValue(
+        totalValueMap,
+        xScale,
+        yScaleLeft,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable
+      );
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         if (formatOptions.xAxisLabel.xAxisPosition != "1") {
           formatOptions.xAxisLabel.xAxisLabelVisibility = false;
@@ -18795,7 +18993,7 @@
         gTag.selectAll("defs > #arrow").remove();
         gTag.append("defs").append("marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 5).attr("refY", 5).attr("markerWidth", 10).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style(
           "fill",
-          connectorCfg.connectorMarkerColor !== "#ffffff" ? connectorCfg.connectorMarkerColor : "none"
+          connectorCfg.connectorMarkerColor !== commonColors.white ? connectorCfg.connectorMarkerColor : "none"
         );
         getConnectorPath(
           pathLineData,
@@ -18836,7 +19034,7 @@
           )} H ${xScale(nextBarHeight[i].Dimension) + xScale.bandwidth() / 2 - 10} V ${-10 + yScaleLeft(nextBarHeight[i].Total)}`
         ).style(
           "stroke",
-          formatOptions.connector.connectorLineColor !== "#ffffff" ? formatOptions.connector.connectorLineColor : "none"
+          formatOptions.connector.connectorLineColor !== commonColors.white ? formatOptions.connector.connectorLineColor : "none"
         ).attr("stroke-width", formatOptions.connector.connectorLineThickness).style(
           "visibility",
           (d) => connectorLabelExcludeList.includes(d.Dimension) || d.Total == 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -18903,7 +19101,7 @@
           );
         }).style("font-size", formatOptions.connector.connectorFontSize).style("font-family", formatOptions.connector.connectorFontFamily).style("font-style", formatOptions.connector.connectorFontStyle).style(
           "fill",
-          formatOptions.connector.connectorFontColor !== "#ffffff" ? formatOptions.connector.connectorFontColor : "none"
+          formatOptions.connector.connectorFontColor !== commonColors.white ? formatOptions.connector.connectorFontColor : "none"
         ).style("font-weight", "lighter").style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
@@ -19131,7 +19329,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.rectangle
       );
@@ -19264,7 +19462,10 @@
       let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
       columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
       let columnGroups = columns.selectAll(".column-group").data((d) => d);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
+        "hoverId",
+        (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
+      );
       columnGroups = columnGroupsEnter.merge(columnGroups);
       let rects = columnGroups.selectAll("rect").data((d) => d);
       const getPropsForRect = (nodes, i) => {
@@ -19874,13 +20075,13 @@
         dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2
       ).attr("width", yLabel).attr(
         "fill",
-        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const yAxisG = gTag.append("g").call(yAxisLeft);
       yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
       yAxisG.selectAll("text").style(
         "fill",
-        formatOptions.yAxisLabel.yAxisLabelColor !== "#ffffff" ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
+        formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
       ).style("user-select", "none").style("font-size", formatOptions.yAxisLabel.yAxisLabelFontSize).style("font-family", formatOptions.yAxisLabel.yAxisLabelFontFamily).style("font-style", formatOptions.yAxisLabel.yAxisLabelFontStyle).style("font-style", fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "").style(
         "text-decoration",
         fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : ""
@@ -19907,7 +20108,7 @@
         `translate(1,${xaxisLabelPosition === "0" ? dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2 : xaxisLabelPosition === "1" ? -xLabel : yScale(0)})`
       ).attr("height", xLabel).attr("width", innerWidth2).attr(
         "fill",
-        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== "#ffffff" ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
+        formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== commonColors.white ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const XaxisG = gTag.append("g").attr(
         "transform",
@@ -19952,7 +20153,7 @@
       if (chartFormatOptions.plotArea.numberOfBubbles) {
         let currentInnerHeight = legendPosition == "Bottom" ? height - 55 : height - 25;
         let object2 = svg.append("foreignObject").attr("transform", `translate(${margins.left},${currentInnerHeight})`).attr("width", width).attr("height", "20px");
-        object2.append("xhtml:div").style("white-space", "pre").style("color", "#000000").style("font-size", "12px ").style("text-overflow", "ellipsis").html((chartFormatOptions.plotArea.totalAlias ? chartFormatOptions.plotArea.totalAliasText : `Total count : `) + bubbleCount);
+        object2.append("xhtml:div").style("white-space", "pre").style("color", commonColors.black).style("font-size", "12px ").style("text-overflow", "ellipsis").html((chartFormatOptions.plotArea.totalAlias ? chartFormatOptions.plotArea.totalAliasText : `Total count : `) + bubbleCount);
       }
     } catch (error) {
       logError$1(fileName$a, "setnumberOfBubbles", error);
@@ -20216,7 +20417,9 @@
       );
       let yMin = customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0;
       let yMax = customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : filteredData[0]?.data?.length;
-      chartJSON.yMaxLeft = parseFloat((yMin + "").length > (yMax + "").length ? yMin + "" : yMax + "");
+      chartJSON.yMaxLeft = parseFloat(
+        (yMin + "").length > (yMax + "").length ? yMin + "" : yMax + ""
+      );
       chartJSON.xMax = max$2(cumulativeDataPoints);
       chartJSON.xMin = min$2(cumulativeDataPoints);
     };
@@ -20281,7 +20484,10 @@
       bins.forEach((d) => d.forEach((j) => cumulativeLength.push(j.length)));
       chartJSON.yMaxLeft = max$2(cumulativeLength);
       chartJSON.yMinLeft = min$2(cumulativeLength);
-      yScaleLeft = linear$1().range([innerHeight2, 0]).domain([customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0, customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft]);
+      yScaleLeft = linear$1().range([innerHeight2, 0]).domain([
+        customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0,
+        customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft
+      ]);
     };
     const initAxis = () => {
       getXAxis();
@@ -20306,12 +20512,23 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
       let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
-      let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerWidth2, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight2, false).xAxisLabelArray;
+      let labelArray = responsiveXaxisLabelForNumericValue(
+        chartJSON.xMax,
+        chartJSON.xMin,
+        innerWidth2,
+        formatOptions,
+        customXaxisMinValue,
+        customXaxisMaxValue,
+        innerHeight2,
+        false
+      ).xAxisLabelArray;
       labelArray.shift();
       xAxis = (xaxisLabelPosition == 1 ? axisTop(xScale) : axisBottom(xScale)).tickFormat(
         (d) => getNumberWithFormat(
@@ -20327,7 +20544,10 @@
       formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
     };
     const getChartType = (lineData) => {
-      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor).attr(
+      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
+        "stroke",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor
+      ).attr(
         "stroke-width",
         formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness
       ).attr(
@@ -20339,7 +20559,7 @@
         return xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth) < 0 ? 0 : xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth);
       }).attr("height", function(d) {
         return innerHeight2 - yScaleLeft(d.length);
-      }).style("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+      }).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -20348,7 +20568,13 @@
             },
             {
               key: formatOptions.yAxisTitle.yAxisTitleText,
-              value: getNumberWithFormat(formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, false)
+              value: getNumberWithFormat(
+                formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length,
+                formatOptions.toolTip.toolTipDisplayUnits,
+                formatOptions.toolTip.toolTipNumberFormat,
+                formatOptions.toolTip.toolTipDecimalPrecision,
+                false
+              )
             }
           ],
           formatOptions,
@@ -20691,6 +20917,9 @@
       let yMinLeft = Infinity;
       let yMaxRight = -Infinity;
       let yMinRight = Infinity;
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+      }
       seriesData.forEach((series) => {
         legendList.push(
           series.properties.alias ? series.properties.alias : series.legend
@@ -20729,9 +20958,6 @@
       } else {
         filteredDimension = chartJSON.dimensionList;
       }
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
     };
     const initScale = () => {
       let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -20807,7 +21033,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
@@ -20823,7 +21051,9 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
             formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision
           )
-        ).tickValues(responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
+        ).tickValues(
+          responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray
+        ).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -20844,8 +21074,10 @@
         const val = xScale(d.dimension);
         return val != null ? val : 0;
       }).y(
-        (d) => d.axis === "Primary" ? yScaleLeft(d.value) : yScaleRight(d.value)
-      ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+        (d) => d.axis === axisTypes.primary ? yScaleLeft(d.value) : yScaleRight(d.value)
+      ).defined(
+        (d) => d.hideZero || chartJSON.hideZeroValues ? Boolean(d.value) : true
+      ).curve(getCurveType(formatOptions));
       let lines = gTag.selectAll(".parentGroup").data([lineData]);
       lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
       let lineGroups = lines.selectAll(".line-group").data((d) => d);
@@ -20855,34 +21087,27 @@
         const g = select$2(this);
         g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", (d2) => lineGenerator(d2.data)).attr(
           "stroke",
-          (d2) => d2.properties.color !== "#ffffff" ? d2.properties.color : "none"
+          (d2) => d2.properties.color !== commonColors.white ? d2.properties.color : "none"
         ).attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(d2.properties.lineWidth);
           switch (d2.properties.lineStyle) {
             case staticLineStyle.dotted:
-              return "0,3";
+              return `0,${lineWidth + 2}`;
             case staticLineStyle.dashed:
-              return "20,10,5,5,5,10";
+              return strokeDashValues;
             default:
               return "";
           }
         }).attr(
           "stroke-linecap",
-          (d2) => d2.properties.lineStyle === staticLineStyle.dotted ? "round" : ""
+          (d2) => d2.properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : ""
         ).attr(
           "stroke-width",
-          (d2) => d2.properties.lineStyle !== "None" ? 2.5 : 0
-        ).attr("hoverId", (d.properties.alias || lineGroups.properties.name || "Legend").replace(/\s+/g, "-")).attr("d", (d2) => lineGenerator(d2.data));
-        g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => lineGenerator(d2.data)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function(event2, d2) {
-          svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-          svg.selectAll(
-            '[hoverId="' + getJQuerySelector(d2.properties.alias || d2.properties.name || "Legend").replace(/\s+/g, "-") + '"]'
-          ).classed("highlight", true).classed("unhighlight", false);
-        }).on("mouseleave", function(event2, d2) {
-          svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-          svg.selectAll(
-            '[hoverId="' + getJQuerySelector(d2.properties?.alias || d2.properties?.name || "Legend").replace(/\s+/g, "-") + '"]'
-          ).classed("highlight", false).classed("unhighlight", false);
-        });
+          (d2) => d2.properties.lineStyle !== "None" ? d2.properties.lineWidth : 0
+        ).attr(
+          "hoverId",
+          (d.properties.alias || lineGroups.properties.name || "Legend").replace(/\s+/g, "-")
+        ).attr("d", (d2) => lineGenerator(d2.data));
       });
       lineGroups.exit().remove();
       lineMarkers(
@@ -21009,12 +21234,10 @@
     const barWidth = 0;
     const chartType = chartTypes.StackLineChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(
-      data.ChartData,
-      data.DimensionList
-    )?.reverse() || [];
     const dimensionList = data.DimensionList;
+    const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
     const barChart = false;
+    const totalValueMap = /* @__PURE__ */ new Map();
     const isSecondaryAxisDrawn = false;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
     let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
@@ -21203,7 +21426,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.line
       );
@@ -21221,10 +21444,27 @@
         false,
         setAndUpdateChartData
       );
+      addTotalValue(
+        totalValueMap,
+        xScale,
+        yScaleLeft,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable
+      );
     };
     const preProcessChartData = () => {
       const allChartData = [];
       const legendList = [];
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+      }
       seriesData.forEach((series, index2) => {
         const prefixedLegend = `${index2}~$~${series.properties.alias ? series.properties.alias : series.legend}`;
         series.properties.legend = prefixedLegend;
@@ -21273,9 +21513,6 @@
       chartJSON.dimensionList.forEach((d, i) => {
         chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
       });
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
     };
     const initScale = () => {
       let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -21339,7 +21576,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -21356,7 +21595,10 @@
       });
       const lineGenerator = line$1().x(
         (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
-      ).y((d) => d[1] > 0 ? yScaleLeft(d[1]) : yScaleLeft(d[0])).curve(getCurveType(formatOptions));
+      ).y((d) => d[1] > 0 ? yScaleLeft(d[1]) : yScaleLeft(d[0])).defined((d) => {
+        const a2 = d;
+        return a2.hideZero || chartJSON.hideZeroValues ? a2.data[a2.key] : true;
+      }).curve(getCurveType(formatOptions));
       let lines = gTag.selectAll(".parentGroup").data([stackChartData]);
       lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
       let lineGroups = lines.selectAll(".line-group").data((d) => d);
@@ -21364,24 +21606,38 @@
       lineGroupsEnter.append("path").attr("class", "line").attr("fill", "none");
       lineGroupsEnter.merge(lineGroups).each(function(d, i) {
         const g = select$2(this);
-        const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("hoverId", (d2) => (seriesData[i]?.properties?.alias || seriesData[i]?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("d", lineGenerator(d)).attr("stroke", d.color !== "#ffffff" ? d.color : "none").attr(
-          "stroke-dasharray",
-          seriesData[i].properties.lineStyle === "dotted" ? "0,3" : seriesData[i].properties.lineStyle === "dashed" ? "20,10,5,5,5,10" : ""
-        ).attr(
+        const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr(
+          "hoverId",
+          (d2) => (seriesData[i]?.properties?.alias || seriesData[i]?.properties?.name || "Legend").replace(/\s+/g, "-")
+        ).attr("d", lineGenerator(d)).attr("stroke", d.color !== commonColors.white ? d.color : "none").attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(
+            seriesData[i].properties.lineWidth.toString()
+          );
+          switch (seriesData[i].properties.lineStyle) {
+            case staticLineStyle.dotted:
+              return `0,${lineWidth + 2}`;
+            case staticLineStyle.dashed:
+              return strokeDashValues;
+            default:
+              return "";
+          }
+        }).attr(
           "stroke-linecap",
-          seriesData[i].properties.lineStyle === "dotted" ? "round" : ""
+          seriesData[i].properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : ""
         ).attr(
           "stroke-width",
-          seriesData[i].properties.lineStyle !== "None" ? 2.5 : 0
+          seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
         ).attr("fill", "none");
         const totalLength = pathSel.node().getTotalLength();
         {
           pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", 0);
         }
-        g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function() {
+        g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", commonColors.transparent).attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function() {
           svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
           svg.selectAll(
-            '[hoverId="' + getJQuerySelector(seriesData[i].properties.alias || seriesData[i].properties.name || "Legend").replace(/\s+/g, "-") + '"]'
+            '[hoverId="' + getJQuerySelector(
+              seriesData[i].properties.alias || seriesData[i].properties.name || "Legend"
+            ).replace(/\s+/g, "-") + '"]'
           ).classed("highlight", true).classed("unhighlight", false);
         }).on("mouseleave", function() {
           svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
@@ -21512,7 +21768,11 @@
         (K2, j) => K2.forEach((d) => {
           d["key"] = K2.key;
           K2["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
-          K2["individualAnnotationVisibility"] = JSON.parse(JSON.stringify(seriesData[j].properties.individualAnnotationVisibility));
+          K2["individualAnnotationVisibility"] = JSON.parse(
+            JSON.stringify(
+              seriesData[j].properties.individualAnnotationVisibility
+            )
+          );
           d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
           d.data["labelColor"] = seriesColor == "2" ? JSON.parse(JSON.stringify(seriesData[j].properties.color)) : seriesData[j].properties.labelColor;
           d["hideZero"] = JSON.parse(
@@ -21525,6 +21785,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
       drawLineChart();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21547,10 +21808,7 @@
     const barWidth = 0;
     const chartType = chartTypes.NormalizedStackLineChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(
-      data.ChartData,
-      data.DimensionList
-    )?.reverse() || [];
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21733,7 +21991,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.line
       );
@@ -21755,6 +22013,12 @@
     const preProcessChartData = () => {
       const allChartData = [];
       const legendList = [];
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+        seriesData.forEach((series) => {
+          series.data = series.data.filter((d) => d.value !== 0);
+        });
+      }
       seriesData.forEach((series, index2) => {
         const prefixedLegend = `${index2}~$~${series.properties.legend}`;
         series.properties.legend = prefixedLegend;
@@ -21767,9 +22031,6 @@
       chartJSON.legendList = legendList;
       filteredData = JSON.parse(JSON.stringify(seriesData));
       filteredDimension = chartJSON.dimensionList;
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
       const tempStackLineData = getStackedData(
         chartJSON.dimensionList,
         seriesData,
@@ -21856,29 +22117,49 @@
       lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
       let lineGroups = lines.selectAll(".line-group").data((d) => d);
       let lineGroupsEnter = lineGroups.enter().append("g").attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
-      lineGroupsEnter.attr("hoverId", (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")).append("path").attr("class", "line").attr("fill", "none");
+      lineGroupsEnter.attr(
+        "hoverId",
+        (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")
+      ).append("path").attr("class", "line").attr("fill", "none");
       lineGroupsEnter.merge(lineGroups).each(function(d, i) {
         const g = select$2(this);
-        const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== "#ffffff" ? d.color : "none").attr(
-          "stroke-dasharray",
-          seriesData[i].properties.lineStyle === "dotted" ? "0,3" : seriesData[i].properties.lineStyle === "dashed" ? "20,10,5,5,5,10" : ""
-        ).attr(
+        const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== commonColors.white ? d.color : "none").attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(
+            seriesData[i].properties.lineWidth.toString()
+          );
+          switch (seriesData[i].properties.lineStyle) {
+            case staticLineStyle.dotted:
+              return `0,${lineWidth + 2}`;
+            case staticLineStyle.dashed:
+              return strokeDashValues;
+            default:
+              return "";
+          }
+        }).attr(
           "stroke-linecap",
-          seriesData[i].properties.lineStyle === "dotted" ? "round" : ""
+          seriesData[i].properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : ""
         ).attr(
           "stroke-width",
-          seriesData[i].properties.lineStyle !== "None" ? 2.5 : 0
+          seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
         ).attr("fill", "none");
         const totalLength = pathSel.node().getTotalLength();
         {
           pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", 0);
         }
-        g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function(event2, d2) {
+        g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", commonColors.transparent).attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").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(/\s+/g, "-") + '"]').classed("highlight", true).classed("unhighlight", false);
+          svg.selectAll(
+            '[hoverId="' + getJQuerySelector(
+              lineData[d2.index]?.properties?.alias || lineData[d2.index]?.properties?.name || "Legend"
+            ).replace(/\s+/g, "-") + '"]'
+          ).classed("highlight", true).classed("unhighlight", false);
         }).on("mouseleave", function(event2, d2) {
           svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-          svg.selectAll('[hoverId="' + getJQuerySelector(lineData[d2.index]?.properties?.alias || d2[d2.index]?.properties?.name || "Legend").replace(/\s+/g, "-") + '"]').classed("highlight", false).classed("unhighlight", false);
+          svg.selectAll(
+            '[hoverId="' + getJQuerySelector(
+              lineData[d2.index]?.properties?.alias || d2[d2.index]?.properties?.name || "Legend"
+            ).replace(/\s+/g, "-") + '"]'
+          ).classed("highlight", false).classed("unhighlight", false);
         });
       });
       lineGroups.exit().remove();
@@ -22068,6 +22349,7 @@
     let secondaryYLabel;
     let maxNumberForPrimaryAxis;
     let maxNumberForSecondaryAxis;
+    let totalValueMap = /* @__PURE__ */ new Map();
     let innerWidth2;
     let innerHeight2;
     let width;
@@ -22336,7 +22618,8 @@
           formatOptions,
           chartJSON,
           customYaxisMinValue,
-          customYaxisMaxValue
+          customYaxisMaxValue,
+          barChart
         );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
@@ -22347,7 +22630,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
@@ -22363,7 +22648,9 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
             formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision
           )
-        ).tickValues(responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
+        ).tickValues(
+          responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray
+        ).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -22387,13 +22674,31 @@
         let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
         column = column.enter().append("g").attr("class", "column parentGroup").merge(column);
         let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
-        columnGroups.attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
-        columnGroupsEnter.merge(columnGroups).attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
+        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
+          "hoverId",
+          (data2.properties.alias || data2.properties.name || "Legend").replace(
+            /\s+/g,
+            "-"
+          )
+        ).attr(
+          "transform",
+          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
+        );
+        columnGroups.attr(
+          "transform",
+          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
+        );
+        columnGroupsEnter.merge(columnGroups).attr(
+          "transform",
+          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
+        );
         const bars = columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legend)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
-          const xScaleUsed = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
+          const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
           return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(0);
-        }).attr("width", 0).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        }).attr("width", 0).attr("fill", data2.properties.color).attr(
+          "stroke-dasharray",
+          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
+        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
           "stroke",
           (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
@@ -22402,11 +22707,11 @@
         );
         const finalBars = bars;
         finalBars.attr("x", (d) => {
-          const xScaleUsed = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
+          const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
           return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(d.value);
         }).attr("width", (d) => {
-          const xScaleUsed = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
-          const maxValue = data2.properties.axis === "Primary" ? customYaxisMaxValue : secondaryCustomYaxisMaxValue;
+          const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
+          const maxValue = data2.properties.axis === axisTypes.primary ? customYaxisMaxValue : secondaryCustomYaxisMaxValue;
           if (d.value >= 0) {
             return maxValue && d.value > maxValue ? xScaleUsed(maxValue) - xScaleUsed(0) : xScaleUsed(d.value) - xScaleUsed(0);
           } else {
@@ -22429,7 +22734,11 @@
               {
                 key: formatOptions.yAxisTitle.yAxisTitleText || d.value,
                 value: getNumberWithFormat(
-                  [chartTypes.NormalizedStackLineChart, chartTypes.NormalizedStackAreaChart, ""].includes(chartType) ? d[1] - d[0] : d.value,
+                  [
+                    chartTypes.NormalizedStackLineChart,
+                    chartTypes.NormalizedStackAreaChart,
+                    ""
+                  ].includes(chartType) ? d[1] - d[0] : d.value,
                   formatOptions.toolTip.toolTipDisplayUnits,
                   formatOptions.toolTip.toolTipNumberFormat,
                   formatOptions.toolTip.toolTipDecimalPrecision
@@ -22463,6 +22772,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
       drawColumnChart();
     };
     const drawColumnChart = () => {
@@ -22581,6 +22891,7 @@
     let scrollbarVisible = false;
     let stackChartData = [];
     const isNormalizedChart = false;
+    let totalValueMap = /* @__PURE__ */ new Map();
     let chartJSON = {
       dimensionList,
       chartType,
@@ -22704,7 +23015,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.rectangle
       );
@@ -22826,7 +23137,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
@@ -22847,14 +23160,22 @@
       let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
       columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
       let columnGroups = columns.selectAll(".column-group").data((d) => d);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
+        "hoverId",
+        (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
+      );
       columnGroups = columnGroupsEnter.merge(columnGroups);
       let rects = columnGroups.selectAll("rect").data((d) => d);
       const getPropsForRect = (nodes, i) => {
-        const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
+        const groupIndex = Array.from(columnGroups.nodes()).indexOf(
+          nodes[i].parentNode
+        );
         return { props: seriesData[groupIndex]?.properties, groupIndex };
       };
-      const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
+      const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr(
+        "fill",
+        (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray"
+      ).attr("stroke", (d, i, nodes) => {
         const props = getPropsForRect(nodes, i).props;
         return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr(
@@ -22918,6 +23239,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
       createStackLineData();
       drawLineChart();
     };
@@ -22969,6 +23291,21 @@
         isReportEditable,
         barChart
       );
+      addTotalValue(
+        totalValueMap,
+        yScale,
+        xScaleBottom,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable,
+        barChart
+      );
       getConnectors();
       gTag.selectAll(".connectors").raise();
     };
@@ -23083,7 +23420,7 @@
         }
         gTag.append("defs").append("marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 5).attr("refY", 5).attr("markerWidth", 10).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style(
           "fill",
-          formatOptions.connector.connectorMarkerColor !== "#ffffff" ? formatOptions.connector.connectorMarkerColor : "none"
+          formatOptions.connector.connectorMarkerColor !== commonColors.white ? formatOptions.connector.connectorMarkerColor : "none"
         );
         getConnectorPath(
           pathLineData,
@@ -23135,7 +23472,7 @@
           }
         }).style(
           "stroke",
-          formatOptions.connector.connectorLineColor !== "#ffffff" ? formatOptions.connector.connectorLineColor : "none"
+          formatOptions.connector.connectorLineColor !== commonColors.white ? formatOptions.connector.connectorLineColor : "none"
         ).attr("stroke-width", formatOptions.connector.connectorLineThickness).style(
           "visibility",
           (d, i) => connectorLabelExcludeList.includes(d.Dimension) || d.Total == 0 && formatOptions.yAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -23194,7 +23531,7 @@
           );
         }).style("font-size", formatOptions.connector.connectorFontSize).style("font-family", formatOptions.connector.connectorFontFamily).style("font-style", formatOptions.connector.connectorFontStyle).style(
           "fill",
-          formatOptions.connector.connectorFontColor !== "#ffffff" ? formatOptions.connector.connectorFontColor : "none"
+          formatOptions.connector.connectorFontColor !== commonColors.white ? formatOptions.connector.connectorFontColor : "none"
         ).style("font-weight", "lighter").style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
@@ -23226,7 +23563,10 @@
     let columnWidth = 0;
     const chartType = chartTypes.NormalizedStackHorizontalBarChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse();
+    const seriesData = generalizedChartData(
+      data.ChartData,
+      data.DimensionList
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -23391,7 +23731,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.rectangle
       );
@@ -23521,20 +23861,31 @@
       let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
       columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
       let columnGroups = columns.selectAll(".column-group").data((d) => d);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
+        "hoverId",
+        (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
+      );
       columnGroups = columnGroupsEnter.merge(columnGroups);
       let rects = columnGroups.selectAll("rect").data((d) => d);
       const getPropsForRect = (nodes, i) => {
-        const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
+        const groupIndex = Array.from(columnGroups.nodes()).indexOf(
+          nodes[i].parentNode
+        );
         return { props: seriesData[groupIndex]?.properties, groupIndex };
       };
-      const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - yScale.bandwidth() / 2).attr("height", yScale.bandwidth()).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
+      const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - yScale.bandwidth() / 2).attr("height", yScale.bandwidth()).attr(
+        "fill",
+        (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray"
+      ).attr("stroke", (d, i, nodes) => {
         const props = getPropsForRect(nodes, i).props;
         return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr(
         "stroke-dasharray",
         (d, i, nodes) => getPropsForRect(nodes, i).props?.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d, i, nodes) => (getPropsForRect(nodes, i).props?.stackBorderWidth || 0) + "px").style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("x", (d) => xScaleBottom(0)).attr("width", 0).attr("visibility", (d, i, nodes) => {
+      ).attr(
+        "stroke-width",
+        (d, i, nodes) => (getPropsForRect(nodes, i).props?.stackBorderWidth || 0) + "px"
+      ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("x", (d) => xScaleBottom(0)).attr("width", 0).attr("visibility", (d, i, nodes) => {
         const props = getPropsForRect(nodes, i).props;
         return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
       }).on("mousemove", (event2, d) => {
@@ -23973,7 +24324,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
@@ -23992,7 +24345,13 @@
         let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
         column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
         let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
+        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
+          "hoverId",
+          (data2.properties.alias || data2.properties.name || "Legend").replace(
+            /\s+/g,
+            "-"
+          )
+        ).attr(
           "transform",
           (d) => index2 === 0 ? `translate(0,${yScale(d.dimension) - columnWidth / 2})` : `translate(0,${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
         );
@@ -24235,7 +24594,7 @@
         }
         gTag.append("defs").append("marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 5).attr("refY", 5).attr("markerWidth", 10).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style(
           "fill",
-          formatOptions.connector.connectorMarkerColor !== "#ffffff" ? formatOptions.connector.connectorMarkerColor : "none"
+          formatOptions.connector.connectorMarkerColor !== commonColors.white ? formatOptions.connector.connectorMarkerColor : "none"
         );
         getConnectorPath(
           pathLineData,
@@ -24281,7 +24640,7 @@
               `
         ).style(
           "stroke",
-          formatOptions.connector.connectorLineColor !== "#ffffff" ? formatOptions.connector.connectorLineColor : "none"
+          formatOptions.connector.connectorLineColor !== commonColors.white ? formatOptions.connector.connectorLineColor : "none"
         ).attr("fill", "none").attr("stroke-width", formatOptions.connector.connectorLineThickness).attr("marker-end", "url(#arrow)").style(
           "visibility",
           (d) => connectorLabelExcludeList.includes(d.Dimension) || d.Total == 0 && formatOptions.yAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -24333,7 +24692,7 @@
           );
         }).attr("text-anchor", "start").style("font-size", formatOptions.connector.connectorFontSize).style("font-family", formatOptions.connector.connectorFontFamily).style("font-style", formatOptions.connector.connectorFontStyle).style(
           "fill",
-          formatOptions.connector.connectorFontColor !== "#ffffff" ? formatOptions.connector.connectorFontColor : "none"
+          formatOptions.connector.connectorFontColor !== commonColors.white ? formatOptions.connector.connectorFontColor : "none"
         ).style("font-weight", "lighter").style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
@@ -24484,7 +24843,14 @@
       ));
       initSvg$1(svg, width, height, formatOptions);
       gTag = initChartArea$1(svg, margin);
-      initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType);
+      initPlotArea(
+        gTag,
+        formatOptions,
+        dataTableHeight,
+        innerWidth2,
+        innerHeight2,
+        chartType
+      );
       binsCalculation();
       initScale();
       initAxis();
@@ -24613,7 +24979,9 @@
       );
       let yMin = customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0;
       let yMax = customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : filteredData[0]?.data?.length;
-      chartJSON.yMaxLeft = parseFloat((yMin + "").length > (yMax + "").length ? yMin + "" : yMax + "");
+      chartJSON.yMaxLeft = parseFloat(
+        (yMin + "").length > (yMax + "").length ? yMin + "" : yMax + ""
+      );
       chartJSON.xMax = max$2(cumulativeDataPoints);
       chartJSON.xMin = min$2(cumulativeDataPoints);
     };
@@ -24630,7 +24998,9 @@
       }
     };
     const calculatingPeriodsWithBins = (isWithWidth) => {
-      filteredData.forEach((d) => d.data.sort((a2, b) => a2.value - b.value));
+      filteredData.forEach(
+        (d) => d.data.sort((a2, b) => a2.value - b.value)
+      );
       let range2 = chartJSON.xMax - chartJSON.xMin;
       let tempPeriod;
       if (isWithWidth) {
@@ -24702,11 +25072,22 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 + 0 : 0 : 0
-        ).tickValues(responsiveLabelsObj.autoLabelFlag ? void 0 : responsiveLabelsObj.yAxisLabelArray).ticks(responsiveLabelsObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLabelsObj.autoLabelFlag ? void 0 : responsiveLabelsObj.yAxisLabelArray
+        ).ticks(responsiveLabelsObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
-      let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerHeight2, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerWidth2, false).xAxisLabelArray;
+      let labelArray = responsiveXaxisLabelForNumericValue(
+        chartJSON.xMax,
+        chartJSON.xMin,
+        innerHeight2,
+        formatOptions,
+        customXaxisMinValue,
+        customXaxisMaxValue,
+        innerWidth2,
+        false
+      ).xAxisLabelArray;
       labelArray.shift();
       yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
@@ -24722,7 +25103,16 @@
       formatOptions.bins.binsCalculation === "Automatic" ? yAxisLeft.ticks(thresholds) : yAxisLeft.tickValues(periods).ticks(innerHeight2 / 50);
     };
     const getChartType = (lineData) => {
-      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor).attr("stroke-width", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness).attr("stroke-opacity", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity).attr("x", 0).attr("y", (d) => {
+      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr(
+        "stroke",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor
+      ).attr(
+        "stroke-width",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness
+      ).attr(
+        "stroke-opacity",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity
+      ).attr("x", 0).attr("y", (d) => {
         const y02 = yScaleLeft(d.x0);
         const y12 = yScaleLeft(d.x1);
         return Math.min(y02, y12);
@@ -24731,7 +25121,7 @@
         const y12 = yScaleLeft(d.x1);
         const gap = parseFloat(formatOptions.bins.binsGapWidth) || 0;
         return Math.max(1, Math.abs(y12 - y02) - gap);
-      }).attr("width", (d) => xScale(d.length)).style("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+      }).attr("width", (d) => xScale(d.length)).style("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -24740,7 +25130,13 @@
             },
             {
               key: formatOptions.xAxisTitle.xAxisTitleText,
-              value: getNumberWithFormat(formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, false)
+              value: getNumberWithFormat(
+                formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length,
+                formatOptions.toolTip.toolTipDisplayUnits,
+                formatOptions.toolTip.toolTipNumberFormat,
+                formatOptions.toolTip.toolTipDecimalPrecision,
+                false
+              )
             }
           ],
           formatOptions,
@@ -24813,7 +25209,14 @@
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight2);
+      initYaxis$1(
+        gTag,
+        formatOptions,
+        dataTableHeight,
+        yLabel,
+        yAxisLeft,
+        innerHeight2
+      );
       getChartType();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -25055,6 +25458,12 @@
       let yMinLeft = Infinity;
       let yMaxRight = -Infinity;
       let yMinRight = Infinity;
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+        seriesData.forEach((series) => {
+          series.data = series.data.filter((d) => d.value !== 0);
+        });
+      }
       seriesData.forEach((series) => {
         legendList.push(
           series.properties.alias ? series.properties.alias : series.legend
@@ -25089,9 +25498,6 @@
       } else {
         filteredDimension = chartJSON.dimensionList;
       }
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
     };
     const initScale = () => {
       let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -25155,7 +25561,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -25183,8 +25591,14 @@
       let areaGroupsEnter = areaGroups.enter().append("g").attr("class", "area-group");
       areaGroupsEnter.append("path").attr("class", "area parentGroup").attr(
         "fill",
-        (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none"
-      ).style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("hoverId", (d) => (d.properties?.alias || d.properties?.name || "Legend").replace(/\s+/g, "-")).attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
+        (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
+      ).style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr(
+        "hoverId",
+        (d) => (d.properties?.alias || d.properties?.name || "Legend").replace(
+          /\s+/g,
+          "-"
+        )
+      ).attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
         {
           select$2(this).attr("d", areaGenerator(d.data));
         }
@@ -25193,27 +25607,30 @@
         const g = select$2(this);
         g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2.data)).attr(
           "stroke",
-          (d2) => d2.properties.areaBorderColor !== "#ffffff" ? d2.properties.areaBorderColor : "none"
+          (d2) => d2.properties.areaBorderColor !== commonColors.white ? d2.properties.areaBorderColor : "none"
         ).attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(d2.properties.lineWidth);
           switch (d2.properties.lineStyle) {
-            case "dotted":
-              return "0,3";
-            case "dashed":
-              return "20,10,5,5,5,10";
+            case staticLineStyle.dotted:
+              return `0,${lineWidth + 2}`;
+            case staticLineStyle.dashed:
+              return strokeDashValues;
             default:
               return "";
           }
         }).attr(
           "stroke-linecap",
-          (d2) => d2.properties.lineStyle === "dotted" ? "round" : "butt"
+          (d2) => d2.properties.lineStyle === staticLineStyle.dotted ? strokeLineCap.round : strokeLineCap.butt
         ).attr(
           "stroke-width",
-          (d2) => d2.properties.lineStyle !== "None" && formatOptions.plotArea.plotAreaHideLineAndMarkers ? "2.5" : "0"
+          (d2) => 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", "transparent").attr("stroke", "none").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
+        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, "-") + '"]'
+            '[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");
@@ -25361,10 +25778,7 @@
     const barWidth = 0;
     const chartType = chartTypes.StackAreaChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(
-      data.ChartData,
-      data.DimensionList
-    )?.reverse() || [];
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -25388,6 +25802,7 @@
     let secondaryYLabel;
     let maxNumberForPrimaryAxis;
     let maxNumberForSecondaryAxis;
+    let totalValueMap = /* @__PURE__ */ new Map();
     let innerWidth2;
     let innerHeight2;
     let width;
@@ -25555,7 +25970,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.areaWithLine
       );
@@ -25578,6 +25993,12 @@
     const preProcessChartData = () => {
       const allChartData = [];
       const legendList = [];
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+        seriesData.forEach((series) => {
+          series.data = series.data.filter((d) => d.value !== 0);
+        });
+      }
       seriesData.forEach((series, index2) => {
         const prefixedLegend = `${index2}~$~${series.properties.alias}`;
         series.properties.legend = prefixedLegend;
@@ -25626,9 +26047,6 @@
       chartJSON.dimensionList.forEach((d, i) => {
         chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
       });
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
     };
     const initScale = () => {
       let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -25692,7 +26110,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -25722,31 +26142,39 @@
       areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
       let areaGroups = areas.selectAll(".area-group").data((d) => d);
       let areaGroupsEnter = areaGroups.enter().append("g").attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
-      areaGroupsEnter.append("path").attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
+      areaGroupsEnter.append("path").attr(
+        "hoverId",
+        (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
+      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
         {
           select$2(this).attr("d", areaGenerator(d));
         }
       });
       areaGroupsEnter.merge(areaGroups).each(function(d, i) {
         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 !== "#ffffff" ? d2.color : "none").attr("stroke-dasharray", () => {
-          const style = seriesData[i]?.properties?.lineStyle;
-          switch (style) {
-            case "dotted":
-              return "0,3";
-            case "dashed":
-              return "20,10,5,5,5,10";
+        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"
+        ).attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(
+            seriesData[i].properties.lineWidth.toString()
+          );
+          switch (seriesData[i].properties.lineStyle) {
+            case staticLineStyle.dotted:
+              return `0,${lineWidth + 2}`;
+            case staticLineStyle.dashed:
+              return strokeDashValues;
             default:
               return "";
           }
         }).attr(
           "stroke-linecap",
-          () => seriesData[i]?.properties?.lineStyle === "dotted" ? "round" : ""
+          () => seriesData[i]?.properties?.lineStyle.toLowerCase() === staticLineStyle.dotted ? strokeLineCap.round : ""
         ).attr(
           "stroke-width",
-          (d2, i2) => seriesData[i2].properties.lineStyle !== "None" ? seriesData[i2].properties.lineWidth : "0"
+          (d2, i2) => seriesData[i2].properties.lineStyle !== staticLineStyle.none ? seriesData[i2].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", "transparent").attr("stroke", "none").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
+        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, "-") + '"]'
@@ -25795,6 +26223,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
       createStackLineData();
       drawLineChart();
     };
@@ -25854,6 +26283,20 @@
         true
       ).labelArray;
       drawSeriesLabels(formatOptions, gTag, newSeriesLabelArray);
+      addTotalValue(
+        totalValueMap,
+        xScale,
+        yScaleLeft,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable
+      );
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         if (formatOptions.xAxisLabel.xAxisPosition != "1")
           formatOptions.xAxisLabel.xAxisLabelVisibility = false;
@@ -25906,6 +26349,7 @@
           d["hideZero"] = JSON.parse(
             JSON.stringify(seriesData[j].properties.hideZeroValues)
           );
+          d["properties"] = seriesData[j].properties;
         })
       );
     };
@@ -25929,10 +26373,7 @@
     const barWidth = 0;
     const chartType = chartTypes.NormalizedStackAreaChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(
-      data.ChartData,
-      data.DimensionList
-    )?.reverse() || [];
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -26115,7 +26556,7 @@
         width,
         legendMargin,
         formatOptions,
-        seriesData,
+        [...seriesData].reverse(),
         chartId,
         staticLegendShape.areaWithLine
       );
@@ -26137,6 +26578,12 @@
     const preProcessChartData = () => {
       const allChartData = [];
       const legendList = [];
+      if (formatOptions.plotArea.hideZeroValues) {
+        chartJSON.hideZeroValues = true;
+        seriesData.forEach((series) => {
+          series.data = series.data.filter((d) => d.value !== 0);
+        });
+      }
       seriesData.forEach((series, index2) => {
         const prefixedLegend = `${index2}~$~${series.properties.alias}`;
         series.properties.legend = prefixedLegend;
@@ -26161,9 +26608,6 @@
       } else {
         filteredDimension = chartJSON.dimensionList;
       }
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
       const tempStackLineData = getStackedData(
         chartJSON.dimensionList,
         seriesData,
@@ -26234,8 +26678,10 @@
       stackChartData.forEach(
         (data2, i) => data2.forEach((item, position) => {
           const total = item.data.total;
-          lineData[i].data[position][0] = item[0] = total === 0 ? 0 : item[0] / total;
-          lineData[i].data[position][1] = item[1] = total === 0 ? 0 : item[1] / total;
+          if (lineData[i].data[position]) {
+            lineData[i].data[position][0] = item[0] = total === 0 ? 0 : item[0] / total;
+            lineData[i].data[position][1] = item[1] = total === 0 ? 0 : item[1] / total;
+          }
         })
       );
       lineData.forEach((lData) => {
@@ -26257,7 +26703,10 @@
       areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
       let areaGroups = areas.selectAll(".area-group").data((d) => d);
       let areaGroupsEnter = areaGroups.enter().append("g").attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
-      areaGroupsEnter.append("path").attr("hoverId", (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
+      areaGroupsEnter.append("path").attr(
+        "hoverId",
+        (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")
+      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
         const path2 = select$2(this);
         {
           path2.attr("d", columnGenerator(d));
@@ -26265,33 +26714,42 @@
       });
       areaGroupsEnter.merge(areaGroups).each(function(d, i) {
         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 !== "#ffffff" ? d2.color : "none").attr("stroke-dasharray", () => {
-          const style = seriesData[i]?.properties?.lineStyle;
-          switch (style) {
-            case "dotted":
-              return "0,3";
-            case "dashed":
-              return "20,10,5,5,5,10";
+        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"
+        ).attr("stroke-dasharray", (d2) => {
+          const lineWidth = parseInt(
+            seriesData[i].properties.lineWidth.toString()
+          );
+          switch (seriesData[i].properties.lineStyle) {
+            case staticLineStyle.dotted:
+              return `0,${lineWidth + 2}`;
+            case staticLineStyle.dashed:
+              return strokeDashValues;
             default:
               return "";
           }
         }).attr(
           "stroke-linecap",
-          () => seriesData[i]?.properties?.lineStyle === "dotted" ? "round" : ""
+          () => seriesData[i]?.properties?.lineStyle.toLowerCase() === staticLineStyle.dotted ? strokeLineCap.round : ""
         ).attr(
           "stroke-width",
-          (d2, i2) => seriesData[i2].properties.lineStyle !== "None" ? seriesData[i2].properties.lineWidth : "0"
+          (d2, i2) => seriesData[i2].properties.lineStyle !== staticLineStyle.none ? seriesData[i2].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", "transparent").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
+        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, "-")) + '"]'
+            '[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);
         });
         svg.selectAll(
-          '[hoverId="' + getJQuerySelector((lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/ /g, "-")) + '"]'
+          '[hoverId="' + getJQuerySelector(
+            (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/ /g, "-")
+          ) + '"]'
         ).classed("highlight", false).classed("unhighlight", false);
       });
       areaGroups.exit().remove();
@@ -26428,8 +26886,10 @@
       stackChartData = stack().keys(chartJSON.legendList).offset(none$3)(stackLineData2);
       filteredData.forEach(
         (data2, index2) => data2.data.forEach((axisData, position) => {
-          axisData["0"] = stackChartData[index2][position][0];
-          axisData["1"] = stackChartData[index2][position][1];
+          if (stackChartData[index2][position]) {
+            axisData["0"] = stackChartData[index2][position][0];
+            axisData["1"] = stackChartData[index2][position][1];
+          }
         })
       );
       let seriesColor = formatOptions.annotation.annotationSetLabelColor;
@@ -26547,7 +27007,7 @@
         let cords = getTotalValueCords(chartFormatOptions, chartTitleHeight, innerWidth2, innerHeight2);
         chartAreaTagG.append("g").attr("transform", `translate(${cords.x}, ${cords.y})`).style("user-select", "none").append("text").text(`Total : ${formatedTotalValue}`).style(
           "fill",
-          chartFormatOptions.total.totalColor !== "#ffffff" ? chartFormatOptions.total.totalColor : "none"
+          chartFormatOptions.total.totalColor !== commonColors.white ? chartFormatOptions.total.totalColor : "none"
         ).style("font-family", chartFormatOptions.total.totalFontFamily).style("font-size", chartFormatOptions.total.totalFontSize).style("font-style", fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "").style(
           "text-decoration",
           fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : ""
@@ -26670,9 +27130,12 @@
       try {
         const arc2 = arc$1().innerRadius(0).outerRadius(radius);
         const arcOver = arc$1().innerRadius(0).outerRadius(radius + 10);
-        chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr(
+        chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr(
+          "hoverId",
+          (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+        ).attr(
           "fill",
-          (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
+          (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
         ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
           select$2(this).transition().duration(100).attr("d", arcOver);
         }).on("mousemove. ", (d) => {
@@ -26743,7 +27206,13 @@
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
             )
-          ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
+          ).enter().append("text").attr(
+            "hoverId",
+            (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+          ).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.labelFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -26757,7 +27226,13 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.labelFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
+          ).attr(
+            "transform",
+            (d) => getDataLabelTransformString(d, isSingleDataLabel)
+          ).attr(
+            "visibility",
+            (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible"
+          ).attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
             const { plotArea } = chartFormatOptions;
             if (plotArea.dataLabelName) {
               return d.data.legend;
@@ -26768,7 +27243,13 @@
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
             )
-          ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr(
+          ).enter().append("text").attr(
+            "hoverId",
+            (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+          ).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.valueFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -26782,7 +27263,16 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.valueFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0").text((d) => {
+          ).attr(
+            "transform",
+            (d) => getDataLabelTransformString(d, isSingleDataLabel)
+          ).attr(
+            "visibility",
+            (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible"
+          ).attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr(
+            "dy",
+            chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0"
+          ).text((d) => {
             if (chartFormatOptions.plotArea.dataLabelValue) {
               const dataValue = d.data.data[0].value;
               if (chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
@@ -26849,7 +27339,10 @@
             const textWidth = 80;
             const xOffset = midangle < Math.PI ? 0 : -textWidth;
             return radius * 1.1 * (midangle < Math.PI ? 1 : -1) + xOffset;
-          }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => (d.data.properties.alias || d.data.properties.name || "Legend").replace(/\s+/g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
+          }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr(
+            "hoverId",
+            (d) => (d.data.properties.alias || d.data.properties.name || "Legend").replace(/\s+/g, "-")
+          ).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
             let value2 = d.data.data[0].value.toString();
             if (d.data.data[0].value !== void 0) {
               value2 = chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%" ? (Math.abs(d.data[0].value / pieTotalValue) * 100).toFixed(
@@ -27031,9 +27524,12 @@
         const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
         const arcOver = arc$1().innerRadius(innerRadius).outerRadius(radius + 10);
         const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
-        const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr(
+        const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr(
+          "hoverId",
+          (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+        ).attr(
           "fill",
-          (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
+          (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
         ).each(function(d) {
           const thisPath = d;
           thisPath._current = { startAngle: 0, endAngle: 0 };
@@ -27115,7 +27611,13 @@
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
             )
-          ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
+          ).enter().append("text").attr(
+            "hoverId",
+            (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+          ).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.labelFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27129,7 +27631,13 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.labelFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
+          ).attr(
+            "transform",
+            (d) => getDataLabelTransformString(d, isSingleDataLabel)
+          ).attr(
+            "visibility",
+            (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible"
+          ).attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
             const { plotArea } = chartFormatOptions;
             if (plotArea.dataLabelName) {
               return d.data.legend;
@@ -27140,7 +27648,13 @@
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
             )
-          ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.lableFontColor ?? "#000000").attr(
+          ).enter().append("text").attr(
+            "hoverId",
+            (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+          ).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.lableFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27154,7 +27668,19 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.valueFont ?? "Helvetica"
-          ).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0").text((d) => {
+          ).attr(
+            "fill",
+            (d) => d.data.properties?.valueFontColor ?? commonColors.black
+          ).attr(
+            "transform",
+            (d) => getDataLabelTransformString(d, isSingleDataLabel)
+          ).attr(
+            "visibility",
+            (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible"
+          ).attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr(
+            "dy",
+            chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0"
+          ).text((d) => {
             if (chartFormatOptions.plotArea.dataLabelValue) {
               const dataValue = d.data.data[0].value;
               if (chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
@@ -27180,7 +27706,10 @@
           ).attr(
             "font-weight",
             (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "300"
-          ).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr("fill-opacity", 0.5).text((d) => {
+          ).attr(
+            "fill",
+            (d) => d.data.properties?.valueFontColor ?? commonColors.black
+          ).attr("fill-opacity", 0.5).text((d) => {
             const dataValue = Math.abs(d.data.data[0].value);
             if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && dataValue !== void 0) {
               return format(".2s")(dataValue);
@@ -27221,7 +27750,10 @@
             const textWidth = 80;
             const xOffset = midangle < Math.PI ? 0 : -textWidth;
             return radius * 1.1 * (midangle < Math.PI ? 1 : -1) + xOffset;
-          }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
+          }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr(
+            "hoverId",
+            (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")
+          ).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
             try {
               let value2 = d.data.data[0].value.toString();
               if (d.data.data[0].value !== void 0) {
@@ -27296,7 +27828,7 @@
           let fontStyle = chartFormatOptions.total.totalFontStyle;
           chartAreaTagG.append("g").attr("transform", getPiePosition()).attr("pointer-events", "none").attr("text-anchor", "middle").append("text").style(
             "fill",
-            chartFormatOptions.total.totalColor !== "#ffffff" ? chartFormatOptions.total.totalColor : "none"
+            chartFormatOptions.total.totalColor !== commonColors.white ? chartFormatOptions.total.totalColor : "none"
           ).style("font-family", chartFormatOptions.total.totalFontFamily).style("font-size", chartFormatOptions.total.totalFontSize).style(
             "font-style",
             fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
@@ -27496,29 +28028,33 @@
           );
         }).on("mouseout", () => hideTooltipOnMouseOut());
         leaf.append("clipPath").attr("id", (d, i) => `clip-${i}-${chartId}`).append("rect").attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
-        leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
-          "font-style",
-          (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
-        ).style(
-          "text-decoration",
-          (d) => d.data.properties.fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : ""
-        ).style(
-          "font-weight",
-          (d) => d.data.properties.fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : ""
-        ).attr("clip-path", (d, i) => `url(#clip-${i}-${chartId})`);
-        if (chartFormatOptions.plotArea.dataLabelName) {
-          leaf.selectAll("text").append("tspan").attr("x", 5).attr("y", "1.1em").text((d) => d.data.legend);
+        if (chartFormatOptions.plotArea.dataLabels) {
+          leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
+            "font-style",
+            (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
+          ).style(
+            "text-decoration",
+            (d) => d.data.properties.fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : ""
+          ).style(
+            "font-weight",
+            (d) => d.data.properties.fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : ""
+          ).attr("clip-path", (d, i) => `url(#clip-${i}-${chartId})`);
+          if (chartFormatOptions.plotArea.dataLabelName) {
+            leaf.selectAll("text").append("tspan").attr("x", 5).attr("y", "1.1em").text((d) => d.data.legend);
+          }
+          if (chartFormatOptions.plotArea.dataLabelValue) {
+            leaf.selectAll("text").append("tspan").attr("x", 5).attr(
+              "y",
+              chartFormatOptions.plotArea.dataLabelName ? "2.1em" : "1.1em"
+            ).text(
+              (d) => getNumberWithFormatFunction(
+                chartFormatOptions.plotArea.plotAreaDisplayUnits,
+                chartFormatOptions.plotArea.dataLabelNumberFormat,
+                chartFormatOptions.plotArea.dataLabelDecimalPrecision
+              )(d.data.data[0].value)
+            );
+          }
         }
-        leaf.selectAll("text").append("tspan").attr("x", 5).attr(
-          "y",
-          chartFormatOptions.plotArea.dataLabelName ? "2.1em" : "1.1em"
-        ).text(
-          (d) => getNumberWithFormatFunction(
-            chartFormatOptions.plotArea.plotAreaDisplayUnits,
-            chartFormatOptions.plotArea.dataLabelNumberFormat,
-            chartFormatOptions.plotArea.dataLabelDecimalPrecision
-          )(d.data.data[0].value)
-        );
       } catch (error) {
         logError$2(fileName$6, "initChartRect", error);
       }
@@ -27653,7 +28189,7 @@
         const arcOver = arc$1().innerRadius(0).outerRadius(radius + 10);
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getParentPiePosition()}`).selectAll("path").data(pieOfPieData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
           "fill",
-          (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
+          (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
         ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
           select$2(this).transition().duration(100).attr("d", arcOver);
         }).on("mousemove.text", (d) => {
@@ -27721,7 +28257,7 @@
         const arcOver = arc$1().innerRadius(0).outerRadius(childRadius + 10);
         chartAreaTagG.append("g").attr("class", "childGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getChildPiePosition()}`).selectAll("path").data(childPieData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
           "fill",
-          (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
+          (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
         ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
           select$2(this).transition().duration(100).attr("d", arcOver);
         }).on("mousemove.text", (d) => {
@@ -27791,7 +28327,10 @@
     const drawParentPieDataLabels = () => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
-          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
+          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.labelFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27812,7 +28351,10 @@
             }
             return "";
           });
-          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr(
+          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.valueFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27855,7 +28397,10 @@
     const drawChildPieDataLabels = (childData) => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
-          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
+          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.labelFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27876,7 +28421,10 @@
             }
             return "";
           });
-          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr(
+          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+            "fill",
+            (d) => d.data.properties?.valueFontColor ?? commonColors.black
+          ).attr(
             "font-style",
             (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).attr(
@@ -27937,18 +28485,6 @@
             data: []
           };
         });
-        initLegendListWithTotalValueAllowance(
-          chartFormatOptions,
-          svg,
-          seriesData,
-          width,
-          height,
-          legendListWidth,
-          chartTitleHeight,
-          chartId,
-          margins,
-          staticLegendShape.circle
-        );
       } catch (error) {
         logError$2(fileName$5, "initLegendList", error);
       }
@@ -28281,7 +28817,7 @@
                 width: 15
               },
               type: AnnotationTypeMap[annotationType],
-              color: chartFormatOptions.plotArea.dataLabelNameColor != "#000000" ? chartFormatOptions.plotArea.dataLabelNameColor : "#000000",
+              color: chartFormatOptions.plotArea.dataLabelNameColor != commonColors.black ? chartFormatOptions.plotArea.dataLabelNameColor : commonColors.black,
               height: width,
               width,
               index: i
@@ -28437,7 +28973,7 @@
               ],
               chartFormatOptions,
               void 0,
-              d.currentTarget.__data__.data.properties
+              ChartData[0].properties
             );
           } catch (error) {
             logError$2(
@@ -28481,7 +29017,9 @@
                   )(progressValue)
                 }
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              ChartData[1].properties
             );
           } catch (error) {
             logError$2(
@@ -28524,7 +29062,7 @@
           chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
         ).attr(
           "fill",
-          chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff" ? chartFormatOptions.plotArea.dataLabelValueColor : chartFormatOptions.toolTip.toolTipDisplayUnits
+          chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : chartFormatOptions.toolTip.toolTipDisplayUnits
         ).attr(
           "font-style",
           valuefontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
@@ -28539,9 +29077,9 @@
           chartFormatOptions.plotArea.dataLabelValueFontFamily
         ).attr("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize).text(() => {
           return chartFormatOptions.plotArea.dataLabelNumberFormatProgress == ",.0%" ? Math.round(progressValue / maxValue * 100) + "%" : getNumberWithFormatFunction(
-            chartFormatOptions.plotArea.dataLabelDecimalPrecision,
+            chartFormatOptions.plotArea.plotAreaDisplayUnits,
             chartFormatOptions.plotArea.dataLabelNumberFormatProgress,
-            chartFormatOptions.plotArea.plotAreaDisplayUnits
+            chartFormatOptions.plotArea.dataLabelDecimalPrecision
           )(progressValue);
         });
       } catch (error) {
@@ -28625,10 +29163,9 @@
           positionDominatorName = "height";
         }
         positionTransformString = centerTranslation(positionDominatorName);
-        innerRadius = Math.min(
-          convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100 * radius,
-          radius
-        );
+        innerRadius = convertStringToNumber(
+          chartFormatOptions.plotArea.innerRadiusForSpeedometer
+        ) / 100 * radius;
       } catch (error) {
         logError$2(fileName2, "initChartRadius", error);
       }
@@ -28681,13 +29218,16 @@
           }
           if (colorThemeArray.length < 101) {
             for (let index2 = colorThemeArray.length; index2 < 100; index2++) {
-              colorThemeArray.push("#000000");
+              colorThemeArray.push(commonColors.black);
             }
           }
         } else {
-          if ([colorThemeTypes.none, colorThemeTypes.discrete].includes(
-            chartFormatOptions.colorScale.showColor
-          )) {
+          if (chartFormatOptions.colorScale.showColor == colorThemeTypes.none) {
+            const color2 = ChartData[0].properties?.color ?? "#bac8de";
+            for (let index2 = 1; index2 <= customTicksCount; index2++) {
+              colorThemeArray.push(color2);
+            }
+          } else if (chartFormatOptions.colorScale.showColor == colorThemeTypes.discrete) {
             for (let index2 = 1; index2 <= customTicksCount; index2++) {
               colorThemeArray.push(
                 chartFormatOptions.colorScale["division" + index2]
@@ -28837,7 +29377,7 @@
                     chartFormatOptions.plotArea.dataLabelValueFontSize
                   ).attr(
                     "fill",
-                    chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff" ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
+                    chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
                   ).attr(
                     "font-style",
                     chartFormatOptions.plotArea.dataLabelValueFontStyle.includes(
@@ -29008,7 +29548,7 @@
         let comparedValue = chartAreaTagG.append("g").attr("class", "label").attr("transform", positionTransformString2);
         comparedValue.selectAll("text").data(["chartData.dataArray[1].maximumMeasure"]).enter().append("text").attr("dy", "24").attr("text-anchor", "middle").attr("font-size", chartFormatOptions.pointerValue.pointerValueFontSize).attr(
           "fill",
-          chartFormatOptions.pointerValue.pointerValueColor !== "#ffffff" ? chartFormatOptions.pointerValue.pointerValueColor : "none"
+          chartFormatOptions.pointerValue.pointerValueColor !== commonColors.white ? chartFormatOptions.pointerValue.pointerValueColor : "none"
         ).attr(
           "font-style",
           valuefontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
@@ -29215,7 +29755,7 @@
           )(d)
         ).attr(
           "fill",
-          chartFormatOptions.plotArea.axialAxisDataLabelColor !== "#ffffff" ? chartFormatOptions.plotArea.axialAxisDataLabelColor : "none"
+          chartFormatOptions.plotArea.axialAxisDataLabelColor !== commonColors.white ? chartFormatOptions.plotArea.axialAxisDataLabelColor : "none"
         ).style(
           "font-size",
           chartFormatOptions.plotArea.axialAxisDataLabelFontSize
@@ -29278,7 +29818,7 @@
             )(d.data[0].value) : ""}`
           ).attr(
             "fill",
-            chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff" ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
+            chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
           ).style(
             "font-size",
             chartFormatOptions.plotArea.dataLabelValueFontSize
@@ -29710,7 +30250,11 @@
   var d3CloudExports = requireD3Cloud();
   const cloud = /* @__PURE__ */ getDefaultExportFromCjs(d3CloudExports);
   const fileName$2 = "WordCloud.tsx";
-  const WordCloud = ({ data: { ChartData }, formatOptions, chartId }) => {
+  const WordCloud = ({
+    data: { ChartData },
+    formatOptions,
+    chartId
+  }) => {
     const svgRef = require$$0$1.useRef();
     let seriesData = generalizedChartData(ChartData);
     let chartFormatOptions;
@@ -29785,7 +30329,7 @@
               }
             }).attr("text-anchor", "middle").style("font-family", chartFormatOptions.text.textFontFamily).attr("fill", function(d) {
               try {
-                return d.properties.color !== "#ffffff" ? d.properties.color : "none";
+                return d.properties.color !== commonColors.white ? d.properties.color : "none";
               } catch (error) {
                 logError$2(fileName$2, "draw-fill", error);
                 return "none";
@@ -33201,7 +33745,7 @@
             chartFormatOptions.plotArea.dataLabelValueFontSize
           ).attr(
             "fill",
-            chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff" ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
+            chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
           ).style(
             "font-style",
             fontStyleValue.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "normal"
@@ -33254,7 +33798,7 @@
             chartFormatOptions.plotArea.dataLabelValueFontSize
           ).attr(
             "fill",
-            chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff" ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
+            chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : "none"
           ).style(
             "font-style",
             fontStyleValue.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "normal"
@@ -34025,11 +34569,11 @@
         arrangeFlows();
         const Nodes = chartAreaTagG.append("g").selectAll("rect").data(nodes).enter().append("rect").style("fill-opacity", nodesFillOpacity).attr("id", (d) => "Node" + d.index).attr("class", "sankey-nodes").attr(
           "stroke",
-          chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+          chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
         ).attr(
           "stroke-width",
           chartFormatOptions.nodes.nodesBorderVisibility ? chartFormatOptions.nodes.nodesBorderThickness : 0
-        ).attr("x", (d) => d.x0).attr("y", (d) => d.y0).attr("height", (d) => d.y1 - d.y0).attr("width", (d) => d.x1 - d.x0).attr("fill", (d) => d.color ? d.color : "#ffffff").on("mousemove", function(event2, d) {
+        ).attr("x", (d) => d.x0).attr("y", (d) => d.y0).attr("height", (d) => d.y1 - d.y0).attr("width", (d) => d.x1 - d.x0).attr("fill", (d) => d.color ? d.color : commonColors.white).on("mousemove", function(event2, d) {
           try {
             if (chartFormatOptions.toolTip.toolTipVisibility) {
               showTooltipOnMouseMove(
@@ -34053,13 +34597,13 @@
             chartAreaTagG.selectAll(".sankey-links").style("stroke-opacity", 0.1);
             chartAreaTagG.select(`#Node${d.index}`).style(
               "stroke",
-              chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+              chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
             ).style("fill-opacity", nodesFillOpacity).style("cursor", "pointer");
             chartAreaTagG.select(`#Label${d.index}`).style("opacity", 1);
             d.sourceLinks.forEach((j) => {
               chartAreaTagG.select(`#Node${j.target.index}`).style("fill-opacity", nodesFillOpacity).style(
                 "stroke",
-                chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+                chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
               );
               chartAreaTagG.select(`#Link${j.index}`).style("stroke-opacity", linksFillOpacity);
               chartAreaTagG.select(`#Label${j.target.index}`).style("opacity", 1);
@@ -34067,7 +34611,7 @@
             d.targetLinks.forEach((j) => {
               chartAreaTagG.select(`#Node${j.source.index}`).style("fill-opacity", nodesFillOpacity).style(
                 "stroke",
-                chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+                chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
               );
               chartAreaTagG.select(`#Link${j.index}`).style("stroke-opacity", linksFillOpacity);
               chartAreaTagG.select(`#Label${j.source.index}`).style("opacity", 1);
@@ -34079,7 +34623,7 @@
           try {
             chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", nodesFillOpacity).style(
               "stroke",
-              chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+              chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
             );
             chartAreaTagG.selectAll(".sankey-links").style("stroke-opacity", linksFillOpacity);
             chartAreaTagG.selectAll(".sankey-nodes-texts").style("opacity", "1");
@@ -34102,11 +34646,11 @@
             chartAreaTagG.select(`#Link${d.index}`).style("stroke-opacity", linksFillOpacity).style("cursor", "pointer");
             chartAreaTagG.select(`#Node${d.target.index}`).style("fill-opacity", nodesFillOpacity).style(
               "Stroke",
-              chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+              chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
             );
             chartAreaTagG.select(`#Node${d.source.index}`).style("fill-opacity", nodesFillOpacity).style(
               "Stroke",
-              chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+              chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
             );
             chartAreaTagG.select(`#Label${d.target.index}`).style("opacity", 1);
             chartAreaTagG.select(`#Label${d.source.index}`).style("opacity", 1);
@@ -34138,7 +34682,7 @@
             chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", nodesFillOpacity);
             chartAreaTagG.selectAll(".sankey-nodes").style(
               "stroke",
-              chartFormatOptions.nodes.nodesBorderColor !== "#ffffff" ? chartFormatOptions.nodes.nodesBorderColor : "none"
+              chartFormatOptions.nodes.nodesBorderColor !== commonColors.white ? chartFormatOptions.nodes.nodesBorderColor : "none"
             );
             chartAreaTagG.selectAll(".sankey-links").style("stroke-opacity", linksFillOpacity);
             chartAreaTagG.selectAll(".sankey-nodes-texts").style("opacity", "1");
@@ -52363,7 +52907,7 @@
           (d) => d.legendName.replace(/ /g, "-")
         ).attr(
           "fill",
-          (d) => d.legendColor !== "#ffffff" ? d.legendColor : "none"
+          (d) => d.legendColor !== commonColors.white ? d.legendColor : "none"
         ).append("path").attr("class", "path").attr("id", function(d, i) {
           select$2(this).attr(
             "d",
@@ -52634,7 +53178,7 @@
           measure: d.value,
           measureName: series.legend ?? "Measure",
           legendName: series.legend,
-          legendColor: series.properties?.color ?? "#000000",
+          legendColor: series.properties?.color ?? commonColors.black,
           tooltip: ""
         }));
       } catch (e) {
@@ -53146,7 +53690,7 @@
           if (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top)
             innerdiv.style("margin-right", "16px").style("white-space", "nowrap");
           innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", d.color).style("border-radius", "1px");
-          let legendColor = chartFormatOptions.legends.legendColorMode == "1" ? d.color ? d.color : "#000000" : chartFormatOptions.legends.legendSelectedUnicolor;
+          let legendColor = chartFormatOptions.legends.legendColorMode == "1" ? d.color ? d.color : commonColors.black : chartFormatOptions.legends.legendSelectedUnicolor;
           innerdiv.append("div").style("margin-left", "5px").style("color", legendColor).attr("title", d.name).style("font-size", chartFormatOptions.legends.legendFontSize + "px").style("font-family", chartFormatOptions.legends.legendFontFamily).style(
             "font-style",
             fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
@@ -53203,7 +53747,7 @@
           if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
             innerdiv.style("margin-right", "16px").style("white-space", "nowrap");
           shapesForScatterPlot(innerdiv, d.markerShape);
-          let legendColor = chartFormatOptions.legends.legendColorMode == "1" ? "#000000" : chartFormatOptions.legends.legendSelectedUnicolor;
+          let legendColor = chartFormatOptions.legends.legendColorMode == "1" ? commonColors.black : chartFormatOptions.legends.legendSelectedUnicolor;
           innerdiv.append("div").style("margin-left", "5px").style("color", legendColor).attr("title", d.name).style("font-size", chartFormatOptions.legends.legendFontSize + "px").style("font-family", chartFormatOptions.legends.legendFontFamily).style(
             "font-style",
             fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
@@ -53549,7 +54093,9 @@
       if (formatOptions.xAxisLabel.hideZeroValues) {
         if (tempDimensionList.length > 0) {
           tempDimensionList.forEach((dimension) => {
-            chartJSON.legendList = chartJSON.legendList.filter((dim) => dim !== dimension);
+            chartJSON.legendList = chartJSON.legendList.filter(
+              (dim) => dim !== dimension
+            );
           });
         }
         chartJSON.dimensionList = chartJSON.legendList;
@@ -53568,7 +54114,11 @@
         tempWaterfallChartData && tempWaterfallChartData.forEach((d, i) => {
           if (d.dimension) {
             tempDimensionList.push(d.dimension);
-            tempDimensionListWithIndex.push({ dimension: d.dimension, chartDataIndex: i, selfIndex: tempDimensionListWithIndex.length });
+            tempDimensionListWithIndex.push({
+              dimension: d.dimension,
+              chartDataIndex: i,
+              selfIndex: tempDimensionListWithIndex.length
+            });
           }
         });
         if (isDateType) {
@@ -53579,7 +54129,9 @@
         } else {
           tempformatedDimensionList = tempDimensionList;
         }
-        let formatedDimensionList = JSON.parse(JSON.stringify(chartJSON.legendList));
+        let formatedDimensionList = JSON.parse(
+          JSON.stringify(chartJSON.legendList)
+        );
         tempDimensionListWithIndex.forEach((listItem, i) => {
           formatedDimensionList[listItem.chartDataIndex] = tempformatedDimensionList[listItem.selfIndex];
         });
@@ -53652,7 +54204,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       colorScale = ordinal().domain(["base", "dimensionTotal", "up", "down"]).range([
         formatOptions.plotArea.totalColor,
@@ -53668,9 +54222,7 @@
     };
     const getChartType = (lineData) => {
       let totalStackData;
-      waterFallData.forEach(
-        (K2, j) => K2.forEach((d) => d["key"] = K2.key)
-      );
+      waterFallData.forEach((K2, j) => K2.forEach((d) => d["key"] = K2.key));
       if (stackTotalData) {
         let stackDataLegendList = filteredData.map((name) => name.legend);
         totalStackData = stack().keys(stackDataLegendList)(stackTotalData);
@@ -53689,10 +54241,30 @@
           let parentGroup = gTag.selectAll(`.parentGroup-${k2}`).data([null]);
           parentGroup = parentGroup.enter().append("g").attr("class", `parentGroup parentGroup-${k2}`).merge(parentGroup);
           let barGroups = parentGroup.selectAll(`.bar-group-${k2}`).data(waterFallData);
-          const barGroupsEnter = barGroups.enter().append("g").attr("class", `bar-group-${k2}`).attr("fill", (d) => d.color ? d.color : colorScale(d.key) !== "#ffffff" ? colorScale(d.key) : "none").attr("opacity", (d) => d.opacity);
+          const barGroupsEnter = barGroups.enter().append("g").attr("class", `bar-group-${k2}`).attr(
+            "fill",
+            (d) => d.color ? d.color : colorScale(d.key) !== commonColors.white ? colorScale(d.key) : "none"
+          ).attr("opacity", (d) => d.opacity);
           barGroups = barGroupsEnter.merge(barGroups);
-          let rects = barGroups.selectAll("rect").data((d) => d, (d) => d.key || d.Key);
-          const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr("class", (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")).attr("x", (d) => xScale(!isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey)).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0).attr("width", xScale.bandwidth()).attr("visibility", (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible").style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+          let rects = barGroups.selectAll("rect").data(
+            (d) => d,
+            (d) => d.key || d.Key
+          );
+          const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr(
+            "class",
+            (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")
+          ).attr(
+            "x",
+            (d) => xScale(
+              !isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey
+            )
+          ).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr(
+            "height",
+            (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0
+          ).attr("width", xScale.bandwidth()).attr(
+            "visibility",
+            (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible"
+          ).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
             const markerInfo = {
               markerShape: "square",
               markerColor: d.key === "dimensionTotal" ? formatOptions.plotArea.totalColor : d.key === "down" ? formatOptions.plotArea.negativeColor : formatOptions.plotArea.positiveColor
@@ -53731,7 +54303,15 @@
                 formatOptions.plotArea.dataLabelNumberFormat,
                 formatOptions.plotArea.dataLabelDecimalPrecision
               )
-            ).attr("x", (d) => xScale(!isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey) + columnWidth / 2).attr("y", (d) => d[1] ? yScaleLeft(d[1]) - 15 : 0).style("font-size", "11px").attr("text-anchor", "middle").attr("visibility", (d) => d[1] - d[0] !== 0 && yScaleLeft(d[1]) ? "visible" : "hidden");
+            ).attr(
+              "x",
+              (d) => xScale(
+                !isAdvancedWaterfall ? d.data.dimension || d.data.legend : d.data.xKey
+              ) + xScale.bandwidth() / 2
+            ).attr("y", (d) => d[1] ? yScaleLeft(d[1]) - 15 : 0).style("font-size", "11px").attr("text-anchor", "middle").attr(
+              "visibility",
+              (d) => d[1] - d[0] !== 0 && yScaleLeft(d[1]) ? "visible" : "hidden"
+            );
             textGroups.exit().remove();
           }
         }
@@ -53894,7 +54474,11 @@
         tempWaterFallData.push(waterFallArr2);
         if (dataRequiredForStackTotal.length > 0) {
           filteredData = dataRequiredForStackTotal;
-          stackTotalData = getStackedData(filteredDimension, dataRequiredForStackTotal, false);
+          stackTotalData = getStackedData(
+            filteredDimension,
+            dataRequiredForStackTotal,
+            false
+          );
         }
         return tempWaterFallData;
       } catch (error) {
@@ -53902,14 +54486,8 @@
       }
     };
     const toNumber = (v) => v === null || v === void 0 || v === "" ? 0 : Number(v);
-    const isNonZero = (v) => !Number.isNaN(toNumber(v)) && toNumber(v) !== 0;
     const mapAdvancedWaterfallData = (rawData) => {
-      return rawData.filter((d) => d.Column1 && d.Column1 !== "*").filter((d) => {
-        const base = toNumber(d.Column3);
-        const up = toNumber(d.Column4);
-        const down = toNumber(d.Column5);
-        return isNonZero(base) || isNonZero(up) || isNonZero(down);
-      }).map((d) => ({
+      return rawData.filter((d) => d.Column1 && d.Column1 !== "*").map((d) => ({
         xKey: d.Column1,
         base: toNumber(d.Column3),
         up: toNumber(d.Column4),
@@ -53937,9 +54515,13 @@
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.TornadoChart;
-    const IsadvanceanalyticsChart = data.IsadvanceanalyticsChart;
+    const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const seriesData = generalizedChartData(
+      data.ChartData,
+      data.DimensionList,
+      true
+    );
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -54009,6 +54591,7 @@
         svgRef,
         formatOptions
       ));
+      formatOptions.xAxisLabel.labelTextWrap = false;
       preProcessChartData();
       ({ maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } = customYscaleLabelFormatting$1(
         // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
@@ -54037,7 +54620,7 @@
         maxNumberForSecondaryAxis,
         chartJSON.yMaxLeft,
         formatOptions,
-        !IsadvanceanalyticsChart ? chartJSON.legendList.map((d) => d["alias"]) : chartJSON.legendList.map((d) => d["alias"].split(" - ")[0]),
+        !isAdvanceAnalyticsChart ? chartJSON.legendList.map((d) => d["alias"]) : chartJSON.legendList.map((d) => d["alias"].split(" - ")[0]),
         chartJSON.dimensionList,
         chartJSON.yMaxRight,
         isSecondaryAxisDrawn,
@@ -54165,24 +54748,23 @@
         mapSeriesDataWithLegendList(
           seriesData,
           chartJSON.legendList,
-          IsadvanceanalyticsChart,
+          isAdvanceAnalyticsChart,
           formatOptions
         ),
         chartId,
-        staticLegendShape.rectangle,
-        chartType
+        staticLegendShape.rectangle
       );
     };
-    const mapSeriesDataWithLegendList = (seriesData2, legendList, IsadvanceanalyticsChart2, formatOptions2) => {
+    const mapSeriesDataWithLegendList = (seriesData2, legendList, isAdvanceAnalyticsChart2, formatOptions2) => {
       return seriesData2.map((series, index2) => {
         const legend = legendList[index2];
         if (!legend) return { ...series, properties: {} };
         let updatedAlias = legend.alias;
-        if (IsadvanceanalyticsChart2 && legend.alias) {
+        if (isAdvanceAnalyticsChart2 && legend.alias) {
           updatedAlias = legend.alias.split(" - ")[0].trim();
         }
         let updatedColor = legend.color;
-        if (IsadvanceanalyticsChart2 && updatedAlias) {
+        if (isAdvanceAnalyticsChart2 && updatedAlias) {
           if (updatedAlias.includes("+ve")) {
             updatedColor = formatOptions2.plotArea.plotAreaCalculatedHigh;
           } else if (updatedAlias.includes("-ve")) {
@@ -54203,7 +54785,7 @@
     };
     const preProcessChartData = () => {
       let processedSeriesData;
-      if (!IsadvanceanalyticsChart) {
+      if (!isAdvanceAnalyticsChart) {
         const firstMeasure = seriesData[0]?.properties.currentMeasure;
         let yMaxLeft = 0;
         let yMaxRight = -Infinity;
@@ -54237,12 +54819,13 @@
         chartJSON.dimensionList
       ) : chartJSON.dimensionList;
       chartJSON.dimensionList.forEach((dim, i) => {
-        chartJSON.formattedDimensionListMap.set(
-          dim,
-          formatedDimensionList[i]
-        );
+        chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
       });
-      filteredData = JSON.parse(JSON.stringify(!IsadvanceanalyticsChart ? processedSeriesData : seriesData));
+      filteredData = JSON.parse(
+        JSON.stringify(
+          !isAdvanceAnalyticsChart ? processedSeriesData : seriesData
+        )
+      );
       filteredDimension = !formatOptions.plotArea.fitChart ? chartJSON.dimensionList.slice(
         scrollPosition,
         scrollPosition + visibleBars
@@ -54266,7 +54849,10 @@
       let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
       let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? chartJSON.yMaxLeft / maxValue !== 1 ? Math.abs(chartJSON.yMaxLeft / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(chartJSON.yMaxRight / maxValue) * 100 < 10 ? 3 : 0 : 0;
       chartJSON.yMaxLeft = chartJSON.yMaxLeft;
-      xScaleForLegends = linear$1().domain([chartJSON.yMaxLeft * (1.2 + (left2 ? scaleFactor : 0)), chartJSON.yMaxRight * (1.2 + (right2 ? scaleFactor : 0))]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
+      xScaleForLegends = linear$1().domain([
+        chartJSON.yMaxLeft * (1.2 + (left2 ? scaleFactor : 0)),
+        chartJSON.yMaxRight * (1.2 + (right2 ? scaleFactor : 0))
+      ]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
       xScale = xScaleForLegends;
       calculatedRange = [0, innerWidth2];
       getXScale();
@@ -54329,16 +54915,25 @@
         filteredData.flatMap(
           (d) => d.data.map((child) => ({
             ...child,
-            legendText: !IsadvanceanalyticsChart ? d.legend.replace("-", "~$~").split("~$~")[1].trim() : d.legend.split("ve) - ")[1],
+            legendText: !isAdvanceAnalyticsChart ? chartJSON.dimensionList[0] == chartTypes.TornadoDefaultEntry ? tornadoEntryName.default : d.legend.split("-")[1]?.trim() ?? d.legend : d.legend.split("ve) - ")[1]?.trim() ?? d.legend,
             properties: d.properties
           }))
         )
-      ).enter().append("rect").attr("class", "rect").attr("y", (d) => d.legendText ? yScaleLeft(d.legendText) : yScaleLeft("defaultEntry")).attr("height", yScaleLeft.bandwidth()).attr("x", (d) => d.value >= 0 ? xScale(0) : xScale(d.value)).attr("width", (d) => Math.abs(xScale(d.value) - xScale(0))).style("shape-rendering", "crispEdges").attr("stroke-dasharray", (d) => d.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.properties.stackBorderWidth}px`).attr("hoverId", (d) => ((IsadvanceanalyticsChart ? d.legend.split(" - ")[0] : d["dimension"]) || "Legend").replace(/\s+/g, "-")).attr(
+      ).enter().append("rect").attr("class", "rect").attr(
+        "y",
+        (d) => d.legendText ? yScaleLeft(d.legendText) : yScaleLeft(chartTypes.TornadoDefaultEntry)
+      ).attr("height", yScaleLeft.bandwidth()).attr("x", (d) => d.value >= 0 ? xScale(0) : xScale(d.value)).attr("width", (d) => Math.abs(xScale(d.value) - xScale(0))).style("shape-rendering", "crispEdges").attr(
+        "stroke-dasharray",
+        (d) => d.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", (d) => `${d.properties.stackBorderWidth}px`).attr(
+        "hoverId",
+        (d) => ((isAdvanceAnalyticsChart ? d.legend.split(" - ")[0] : d["dimension"]) || "Legend").replace(/\s+/g, "-")
+      ).attr(
         "stroke",
         (d) => d.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.properties.stackBorderColor : "none"
       ).style(
         "fill",
-        (d) => IsadvanceanalyticsChart ? d.value > 0 ? positiveBarColor !== "#ffffff" ? positiveBarColor : "none" : negativeBarColor !== "#ffffff" ? negativeBarColor : "none" : d.properties.color
+        (d) => isAdvanceAnalyticsChart ? d.value > 0 ? positiveBarColor !== commonColors.white ? positiveBarColor : "none" : negativeBarColor !== commonColors.white ? negativeBarColor : "none" : d.properties.color
       ).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
@@ -54430,14 +55025,7 @@
     };
     const drawColumnChart = () => {
       getChartType();
-      initXaxisBar(
-        formatOptions,
-        gTag,
-        xLabel,
-        innerHeight2,
-        innerWidth2,
-        xAxis
-      );
+      initXaxisBar(formatOptions, gTag, xLabel, innerHeight2, innerWidth2, xAxis);
       commonAnnotations(
         filteredData,
         yScaleLeft,
@@ -54463,7 +55051,7 @@
         svg,
         yScaleLeft,
         columnWidth,
-        IsadvanceanalyticsChart,
+        isAdvanceAnalyticsChart,
         isReportEditable,
         barChart
       );