pace-chart-lib 1.0.22 → 1.0.24

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

@@ -10718,11 +10718,29 @@ var connectedStyle = /* @__PURE__ */ ((connectedStyle2) => {
   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,
@@ -10832,6 +10850,18 @@ const referenceLineTypes = {
   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,
@@ -10839,10 +10869,10 @@ const defaultChartFormatOptions = {
     chartDescriptionId: ""
   },
   chartArea: {
-    chartAreaColor: "#ffffff",
+    chartAreaColor: commonColors.white,
     chartAreaBorder: false,
     chartAreaBorderThickness: "1",
-    chartAreaBorderColor: "#000000",
+    chartAreaBorderColor: commonColors.black,
     chartAreaBorderStyle: "1"
   },
   chartTitle: {
@@ -10850,20 +10880,20 @@ const defaultChartFormatOptions = {
     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",
@@ -10895,7 +10925,7 @@ const defaultChartFormatOptions = {
     xAxisTitleFontSize: "11",
     xAxisTitleFontFamily: "Helvetica",
     xAxisTitleFontStyle: [],
-    xAxisTitleColor: "#000000",
+    xAxisTitleColor: commonColors.black,
     xAxisTitleText: "Dimension",
     xAxisDynamicTitleText: "",
     xAxisTitleHTML: ""
@@ -10906,14 +10936,14 @@ const defaultChartFormatOptions = {
   },
   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",
@@ -10939,19 +10969,19 @@ const defaultChartFormatOptions = {
     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,
@@ -10969,7 +10999,7 @@ const defaultChartFormatOptions = {
     secondaryYAxisTitleFontSize: "11",
     secondaryYAxisTitleFontFamily: "Helvetica",
     secondaryYAxisTitleFontStyle: [],
-    secondaryYAxisTitleColor: "#000000",
+    secondaryYAxisTitleColor: commonColors.black,
     secondaryYAxisTitleText: "Measure",
     secondaryYAxisDynamicTitleText: "",
     secondaryYAxisTitleHTML: ""
@@ -10994,17 +11024,17 @@ const defaultChartFormatOptions = {
     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",
@@ -11025,21 +11055,21 @@ const defaultChartFormatOptions = {
     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: [],
@@ -11053,7 +11083,7 @@ const defaultChartFormatOptions = {
     arcTransition: true,
     innerRadiusForSpeedometer: "30",
     ticks: "3",
-    pointerColor: "#000000",
+    pointerColor: commonColors.black,
     pointerHeadLength: "8",
     totalColor: "#41a5b4",
     positiveColor: "#9fb700",
@@ -11064,14 +11094,14 @@ const defaultChartFormatOptions = {
     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",
@@ -11085,7 +11115,7 @@ const defaultChartFormatOptions = {
     totalAlias: false,
     totalAliasText: "",
     refLineBorderThickness: "1",
-    refLineBorderColor: "#000000",
+    refLineBorderColor: commonColors.black,
     flipPyramid: false,
     opacityforProgressScale: "0.2",
     opacityforProgressGoal: "1",
@@ -11112,7 +11142,7 @@ const defaultChartFormatOptions = {
     markerSize: "1",
     markerShape: "Circle",
     lineWidth: "1.5",
-    markerColor: "#000000"
+    markerColor: commonColors.black
   },
   annotation: {
     annotationDraggable: false,
@@ -11124,7 +11154,7 @@ const defaultChartFormatOptions = {
     annotationVisibility: "5",
     annotationPosition: "1",
     annotationNumberFormat: ",",
-    annotationColor: "#000000",
+    annotationColor: commonColors.black,
     annotationFontSize: "9",
     annotationFontFamily: "Helvetica",
     annotationFontStyle: [],
@@ -11145,7 +11175,7 @@ const defaultChartFormatOptions = {
     connectorStyle: "solid",
     dataLabelsCoordinates: [],
     totalNumberFormat: ",",
-    totalColor: "#000000",
+    totalColor: commonColors.black,
     totalFontSize: "9",
     totalFontFamily: "Helvetica",
     totalFontStyle: [],
@@ -11179,7 +11209,7 @@ const defaultChartFormatOptions = {
     curviness: "0.5",
     nodesBorderVisibility: true,
     nodesBorderThickness: "1",
-    nodesBorderColor: "#000000",
+    nodesBorderColor: commonColors.black,
     nodeBorderStyle: "solid",
     nodesLabelVisibility: true,
     nodesLabelFontSize: "11",
@@ -11187,7 +11217,7 @@ const defaultChartFormatOptions = {
     nodesLabelFontStyle: [],
     nodeLabelNumberFormat: ",",
     nodeLabelDecimalPrecision: "2",
-    nodesLabelColor: "#000000",
+    nodesLabelColor: commonColors.black,
     nodesLabelDisplayUnits: "None",
     nodesLabelOverlap: false,
     nodesLabelWrap: true,
@@ -11195,13 +11225,13 @@ const defaultChartFormatOptions = {
     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
@@ -11217,7 +11247,7 @@ const defaultChartFormatOptions = {
     binsCalculationValue: "3",
     binsBorderVisibility: false,
     binsBorderThickness: "1",
-    binsBorderColor: "#000000",
+    binsBorderColor: commonColors.black,
     binsBorderOpacity: "0.5"
   },
   connector: {
@@ -11233,15 +11263,15 @@ const defaultChartFormatOptions = {
     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,
@@ -11249,28 +11279,28 @@ const defaultChartFormatOptions = {
     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"
   },
@@ -11335,7 +11365,7 @@ const defaultChartFormatOptions = {
     pointerValueFontSize: "11",
     pointerValueFontFamily: "Helvetica",
     pointerValueFontStyle: [],
-    pointerValueColor: "#000000",
+    pointerValueColor: commonColors.black,
     pointerValueAlias: false,
     pointerValueAliasText: ""
   },
@@ -11353,8 +11383,8 @@ const defaultChartFormatOptions = {
   },
   bubbleformatting: {
     showBubble: true,
-    bubbleColor: "#000000",
-    bubbleBorderColor: "#000000",
+    bubbleColor: commonColors.black,
+    bubbleBorderColor: commonColors.black,
     bubbleBorderWidth: "1",
     bubbleOpacity: "4"
   },
@@ -11365,7 +11395,7 @@ const defaultChartFormatOptions = {
   },
   columnBreakLine: {
     breakLineVisibility: true,
-    breakLineColor: "#000000",
+    breakLineColor: commonColors.black,
     breakLineWidth: "1",
     breakLineStyle: "Double"
   },
@@ -11379,7 +11409,7 @@ const defaultChartFormatOptions = {
   column: {
     stackBorderVisibility: false,
     stackBorderWidth: "1",
-    stackBorderColor: "#000000",
+    stackBorderColor: commonColors.black,
     stackBorderStyle: "0"
   },
   line: {
@@ -11394,7 +11424,7 @@ const defaultChartFormatOptions = {
     seriesLabelFontFamily: "Helvetica",
     seriesLabelFontSize: "11",
     seriesLabelFontStyle: [],
-    seriesLabelBackgroundColor: "transparent",
+    seriesLabelBackgroundColor: commonColors.transparent,
     seriesLabelPosition: "Right"
   },
   dataTableProperties: {
@@ -11405,7 +11435,7 @@ const defaultChartFormatOptions = {
     dataTableNumberFormat: ",",
     dataTableDecimalPrecision: "2",
     dataTableDisplayUnits: "None",
-    dataTableLabelColor: "#000000"
+    dataTableLabelColor: commonColors.black
   },
   dataTableOuterBorder: {
     borderButtonVisibility: true,
@@ -11470,6 +11500,10 @@ var chartTypes = /* @__PURE__ */ ((chartTypes2) => {
   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 = {
@@ -11524,7 +11558,7 @@ function calculateWidthHeightDynamically(content, fontSize, fontFamily, rotation
   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();
@@ -11594,8 +11628,7 @@ function computeMarginMetrics(windowWidth, windowHeight, maxNumberForPrimaryAxis
     "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,
@@ -11662,7 +11695,7 @@ function calculateHorizontalMargins(windowWidth, windowHeight, maxNumberForPrima
         left2 = yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.top:
-        right2 = 5 + secondaryExtra;
+        right2 = 15 + secondaryExtra;
         left2 = yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.right:
@@ -12238,7 +12271,7 @@ function initPlotArea(g, formatOptions, dataTableHeight, innerWidth2, innerHeigh
       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;
@@ -12260,7 +12293,7 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
     );
     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;
@@ -12349,31 +12382,21 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
 }
 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;
 }
@@ -12385,13 +12408,13 @@ function initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, in
       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" : ""
@@ -12411,12 +12434,12 @@ function initYaxisRight(gTag, formatOptions, dataTableHeight, secondaryYLabel, y
   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
@@ -12528,7 +12551,7 @@ function initXaxis$1(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yS
       `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",
@@ -12809,6 +12832,7 @@ function getCurveType(formatOptions) {
 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 = [];
@@ -12835,61 +12859,77 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
       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;
@@ -12898,60 +12938,65 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           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;
             }
           });
@@ -12979,13 +13024,14 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             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,
@@ -13005,10 +13051,10 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           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);
@@ -13037,17 +13083,19 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
       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),
@@ -13058,8 +13106,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             );
           } 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,
@@ -13316,11 +13363,11 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
         d["legend"] && d.dimension ? (
           // ? finalLegendseries.includes(d.Legend.includes("~$~") ? d.Legend.split("~$~")[1] : d.Legend) &&
           //     filteredDimensionList.includes(d.Dimension) &&
-          !labelExcludeList.includes(d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend) && (d.Axis == "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;
@@ -13364,7 +13411,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           }
         },
         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);
@@ -13405,7 +13452,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
         }
       }).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);
@@ -13593,7 +13640,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
       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)`
       );
@@ -14315,7 +14362,7 @@ function prepareDataForSeriesLabel(innerWidth2, yScaleLeft, formatOptions, filte
         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;
@@ -14408,7 +14455,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
           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++) {
@@ -14479,7 +14526,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             height: 15,
             width: 15
           },
-          color: labelType !== "6" ? d.data.labelColor : d.properties.labelColor,
+          color: d.properties.labelColor,
           type: annotationTypeforCharts(d3Annotation2, parseFloat(annotationType)),
           height,
           width
@@ -14587,7 +14634,7 @@ const appendAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotation
       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;
 };
@@ -14597,12 +14644,12 @@ const initXaxisBar = (formatOptions, gTag, yLabel, innerHeight2, innerWidth2, xA
     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(
@@ -14641,7 +14688,7 @@ const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yA
     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) {
@@ -14755,11 +14802,11 @@ const initXaxisTop = (formatOptions, gTag, xLabelSecondary, xAxisTop) => {
     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(
@@ -14913,16 +14960,137 @@ const horizontalScrollBar = (seriesData, height, width, svg, margin, innerWidth2
     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",
@@ -14956,7 +15124,7 @@ const chartProperties = {
   valueFontStyle: [],
   valueFont: "Helvetica",
   valueFontColor: "black",
-  backgroundColor: "#ffffff",
+  backgroundColor: commonColors.white,
   nodeHeight: 5,
   nodeWidth: 12,
   setColorScale: false,
@@ -14967,7 +15135,7 @@ const chartProperties = {
   actualChartType: "chartType",
   secondaryAxisBgColor: "#e5e5e5",
   stackBorderWidth: 1,
-  stackBorderColor: "#000000",
+  stackBorderColor: commonColors.black,
   stackBorderStyle: 0,
   seriesLabelVisibility: true,
   individualAnnotationVisibility: "1",
@@ -15003,9 +15171,8 @@ const fileName$b = "CommonFunctions.ts";
   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;
@@ -15108,21 +15275,13 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
     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);
@@ -15134,12 +15293,12 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
         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;
@@ -15177,13 +15336,13 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
         );
         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) {
@@ -15192,9 +15351,9 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
         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)`;
         });
       });
@@ -15206,10 +15365,10 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
 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);
   }
@@ -15419,13 +15578,13 @@ function getAutoNumberWithFormat(value2) {
 }
 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"
@@ -15517,7 +15676,7 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     }
     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) {
@@ -15526,7 +15685,7 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
 }
 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);
   }
@@ -15536,14 +15695,14 @@ const drawChartTitle = (chartSvg, chartTitleHeight, chartTitleWidth, chartFormat
     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);
@@ -15626,7 +15785,7 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
           }
         }
         let vennSaparator = isVennChart && (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top) ? i != seriesData.length - 1 ? " |" : "" : "";
-        let legendColor = isVennChart ? chartFormatOptions.legends.legendSelectedUnicolor : chartFormatOptions.legends.legendColorMode == legendColorMode.multiColor ? d.properties.color ? d.properties.color : "#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",
           () => {
@@ -15668,7 +15827,7 @@ function getHollowCircleShape(d, innerDiv) {
 }
 function getLineShape(d, innerDiv, formatOptions) {
   try {
-    let shape = innerDiv.append("div").style("height", "2px").style("width", "20px").style("background", d.properties.lineStyle == "solid" ? d.properties.color : "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":
@@ -15977,7 +16136,7 @@ const convertStringToNumber = (value2) => {
     logError$2(fileName$b, "convertStringToNumber", error);
   }
 };
-function generalizedChartData(chartData, dimensionList) {
+function generalizedChartData(chartData, dimensionList, isTornadoChart = false) {
   try {
     return chartData.map((item) => {
       let properties;
@@ -16007,7 +16166,7 @@ function generalizedChartData(chartData, dimensionList) {
       return {
         ...item,
         properties,
-        data: item.data
+        data: isTornadoChart ? item.data : normalizedData
       };
     });
   } catch (error) {
@@ -16471,7 +16630,9 @@ const ColumnChart = ({
         )
       ).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(
@@ -16520,7 +16681,13 @@ const ColumnChart = ({
       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)`
       );
@@ -16533,9 +16700,12 @@ const ColumnChart = ({
         (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(
@@ -16544,10 +16714,10 @@ const ColumnChart = ({
       );
       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) => {
@@ -16743,10 +16913,6 @@ const CustomColumnChart = ({
   let xScale;
   let xScaleForLegends;
   let calculatedRange;
-  let stackAreaChartDataForPrimaryAxis = [];
-  let stackAreaChartDataForSecondaryAxis = [];
-  let stackColumnChartDataForPrimaryAxis = [];
-  let stackColumnChartDataForSecondaryAxis = [];
   let primaryStackAxisData = [];
   let secondaryStackAxisData = [];
   let primaryStackAreaAxisData = [];
@@ -16854,6 +17020,7 @@ const CustomColumnChart = ({
       innerHeight2,
       chartType
     );
+    updateStackAxisExtremes();
     initScale();
     initAxis();
     initYaxis$1(
@@ -16962,7 +17129,7 @@ const CustomColumnChart = ({
           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);
@@ -17018,132 +17185,91 @@ const CustomColumnChart = ({
       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(
@@ -17186,7 +17312,7 @@ const CustomColumnChart = ({
     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);
@@ -17216,6 +17342,15 @@ const CustomColumnChart = ({
       ).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,
@@ -17224,20 +17359,8 @@ const CustomColumnChart = ({
           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);
     }
@@ -17254,10 +17377,8 @@ const CustomColumnChart = ({
           drawColumnChart(data2);
           break;
         case chartTypes.LineChart:
-          drawLineChart([data2]);
           break;
         case chartTypes.AreaChart:
-          drawAreaChart([data2]);
           break;
         case chartTypes.StackColumnChart:
           stackColumnData = createStackData(data2);
@@ -17269,6 +17390,18 @@ const CustomColumnChart = ({
           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) => {
@@ -17279,19 +17412,15 @@ const CustomColumnChart = ({
       "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",
@@ -17327,7 +17456,8 @@ const CustomColumnChart = ({
           }
         ],
         formatOptions,
-        event2
+        event2,
+        seriesData.filter((e) => e.legend === d.legend)[0].properties
       );
     }).on("mouseout", hideTooltipOnMouseOut);
     columnGroups.exit().remove();
@@ -17342,28 +17472,34 @@ const CustomColumnChart = ({
     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"
@@ -17372,7 +17508,7 @@ const CustomColumnChart = ({
     lineMarkers(
       lines,
       lineData,
-      "CombiLine",
+      chartTypes.CombinationLine,
       xScale,
       yScaleLeft,
       yScaleRight,
@@ -17386,45 +17522,57 @@ const CustomColumnChart = ({
     );
   };
   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"
@@ -17440,14 +17588,35 @@ const CustomColumnChart = ({
       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");
@@ -17456,14 +17625,17 @@ const CustomColumnChart = ({
     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"
@@ -17472,7 +17644,7 @@ const CustomColumnChart = ({
     lineMarkers(
       areas,
       data2.data,
-      "CombiStackArea",
+      chartTypes.CombinationStackArea,
       xScale,
       yScaleLeft,
       yScaleRight,
@@ -17500,10 +17672,10 @@ const CustomColumnChart = ({
       (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
@@ -17547,7 +17719,8 @@ const CustomColumnChart = ({
           }
         ],
         formatOptions,
-        event2
+        event2,
+        seriesData.filter((e) => e.legend === d.key)[0].properties
       );
     }).on("mouseout", hideTooltipOnMouseOut);
     stackColumnGroups.exit().remove();
@@ -17564,7 +17737,8 @@ const CustomColumnChart = ({
       primaryStackAreaAxisData,
       primaryStackColumnAxisData,
       secondaryStackAreaAxisData,
-      secondaryStackColumnAxisData
+      secondaryStackColumnAxisData,
+      fData
     );
     filteredData = JSON.parse(JSON.stringify(requiredData));
     filteredData.forEach((data2, i) => {
@@ -17674,6 +17848,20 @@ const CustomColumnChart = ({
     });
     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",
     {
@@ -18011,7 +18199,9 @@ const LayeredColumnChart = ({
         )
       ).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 = () => {
@@ -18031,7 +18221,13 @@ const LayeredColumnChart = ({
       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)`
       );
@@ -18044,10 +18240,10 @@ const LayeredColumnChart = ({
         (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",
@@ -18208,11 +18404,8 @@ const StackColumnChart = ({
   let scrollbarVisible = false;
   const chartType = chartTypes.StackColumnChart;
   const svgRef = 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);
@@ -18254,6 +18447,7 @@ const StackColumnChart = ({
   let scrollPosition = 0;
   let visibleBars;
   let stackChartData = [];
+  let totalValueMap = /* @__PURE__ */ new Map();
   const isNormalizedChart = false;
   let chartJSON = {
     dimensionList,
@@ -18276,15 +18470,6 @@ const StackColumnChart = ({
       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,
@@ -18408,7 +18593,7 @@ const StackColumnChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.rectangle
     );
@@ -18471,10 +18656,6 @@ const StackColumnChart = ({
     }
   };
   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,
@@ -18509,7 +18690,9 @@ const StackColumnChart = ({
         )
       ).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 = () => {
@@ -18608,6 +18791,7 @@ const StackColumnChart = ({
     filteredData = fData;
     filteredDimension = fDimension;
     visibleBars = fVisibleBars;
+    createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
     drawLineChart();
   };
   const drawLineChart = () => {
@@ -18657,6 +18841,20 @@ const StackColumnChart = ({
       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;
@@ -18792,7 +18990,7 @@ const StackColumnChart = ({
       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,
@@ -18833,7 +19031,7 @@ const StackColumnChart = ({
         )} 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"
@@ -18900,7 +19098,7 @@ const StackColumnChart = ({
         );
       }).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" : ""
@@ -19128,7 +19326,7 @@ const NormalizedStackColumnChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.rectangle
     );
@@ -19261,7 +19459,10 @@ const NormalizedStackColumnChart = ({
     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) => {
@@ -19871,13 +20072,13 @@ function initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, inne
       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 : ""
@@ -19904,7 +20105,7 @@ function initXaxis(gTag, formatOptions, dataTableHeight, xLabel, xAxis, innerHei
       `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",
@@ -19949,7 +20150,7 @@ const setnumberOfBubbles = (svg, legendPosition, chartFormatOptions, height, wid
     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);
@@ -20213,7 +20414,9 @@ const ColumnHistogramChart = ({
     );
     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);
   };
@@ -20278,7 +20481,10 @@ const ColumnHistogramChart = ({
     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();
@@ -20303,12 +20509,23 @@ const ColumnHistogramChart = ({
         )
       ).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(
@@ -20324,7 +20541,10 @@ const ColumnHistogramChart = ({
     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(
@@ -20336,7 +20556,7 @@ const ColumnHistogramChart = ({
       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(
         [
           {
@@ -20345,7 +20565,13 @@ const ColumnHistogramChart = ({
           },
           {
             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,
@@ -20688,6 +20914,9 @@ const LineChart = ({
     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
@@ -20726,9 +20955,6 @@ const LineChart = ({
     } else {
       filteredDimension = chartJSON.dimensionList;
     }
-    if (formatOptions.plotArea.hideZeroValues) {
-      chartJSON.hideZeroValues = true;
-    }
   };
   const initScale = () => {
     let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -20804,7 +21030,9 @@ const LineChart = ({
         )
       ).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(
@@ -20820,7 +21048,9 @@ const LineChart = ({
           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);
     }
@@ -20841,8 +21071,10 @@ const LineChart = ({
       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);
@@ -20852,34 +21084,27 @@ const LineChart = ({
       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(
@@ -21006,12 +21231,10 @@ const StackLineChart = ({
   const barWidth = 0;
   const chartType = chartTypes.StackLineChart;
   const svgRef = 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);
@@ -21200,7 +21423,7 @@ const StackLineChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.line
     );
@@ -21218,10 +21441,27 @@ const StackLineChart = ({
       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;
@@ -21270,9 +21510,6 @@ const StackLineChart = ({
     chartJSON.dimensionList.forEach((d, i) => {
       chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
     });
-    if (formatOptions.plotArea.hideZeroValues) {
-      chartJSON.hideZeroValues = true;
-    }
   };
   const initScale = () => {
     let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -21336,7 +21573,9 @@ const StackLineChart = ({
         )
       ).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 = () => {
@@ -21353,7 +21592,10 @@ const StackLineChart = ({
     });
     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);
@@ -21361,24 +21603,38 @@ const StackLineChart = ({
     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);
@@ -21509,7 +21765,11 @@ const StackLineChart = ({
       (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(
@@ -21522,6 +21782,7 @@ const StackLineChart = ({
     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(
@@ -21544,10 +21805,7 @@ const NormalisedStackLineChart = ({
   const barWidth = 0;
   const chartType = chartTypes.NormalizedStackLineChart;
   const svgRef = 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;
@@ -21730,7 +21988,7 @@ const NormalisedStackLineChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.line
     );
@@ -21752,6 +22010,12 @@ const NormalisedStackLineChart = ({
   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;
@@ -21764,9 +22028,6 @@ const NormalisedStackLineChart = ({
     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,
@@ -21853,29 +22114,49 @@ const NormalisedStackLineChart = ({
     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();
@@ -22065,6 +22346,7 @@ const HorizontalBarChart = ({
   let secondaryYLabel;
   let maxNumberForPrimaryAxis;
   let maxNumberForSecondaryAxis;
+  let totalValueMap = /* @__PURE__ */ new Map();
   let innerWidth2;
   let innerHeight2;
   let width;
@@ -22333,7 +22615,8 @@ const HorizontalBarChart = ({
         formatOptions,
         chartJSON,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        barChart
       );
       xAxisBottom = axisBottom(xScaleBottom).tickFormat(
         (d) => getNumberWithFormat(
@@ -22344,7 +22627,9 @@ const HorizontalBarChart = ({
         )
       ).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(
@@ -22360,7 +22645,9 @@ const HorizontalBarChart = ({
           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);
     }
@@ -22384,13 +22671,31 @@ const HorizontalBarChart = ({
       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(
@@ -22399,11 +22704,11 @@ const HorizontalBarChart = ({
       );
       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 {
@@ -22426,7 +22731,11 @@ const HorizontalBarChart = ({
             {
               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
@@ -22460,6 +22769,7 @@ const HorizontalBarChart = ({
     filteredData = fData;
     filteredDimension = fDimension;
     visibleBars = fVisibleBars;
+    createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
     drawColumnChart();
   };
   const drawColumnChart = () => {
@@ -22578,6 +22888,7 @@ const StackHorizontalChart = ({
   let scrollbarVisible = false;
   let stackChartData = [];
   const isNormalizedChart = false;
+  let totalValueMap = /* @__PURE__ */ new Map();
   let chartJSON = {
     dimensionList,
     chartType,
@@ -22701,7 +23012,7 @@ const StackHorizontalChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.rectangle
     );
@@ -22823,7 +23134,9 @@ const StackHorizontalChart = ({
         )
       ).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 = () => {
@@ -22844,14 +23157,22 @@ const StackHorizontalChart = ({
     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(
@@ -22915,6 +23236,7 @@ const StackHorizontalChart = ({
     filteredData = fData;
     filteredDimension = fDimension;
     visibleBars = fVisibleBars;
+    createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
     createStackLineData();
     drawLineChart();
   };
@@ -22966,6 +23288,21 @@ const StackHorizontalChart = ({
       isReportEditable,
       barChart
     );
+    addTotalValue(
+      totalValueMap,
+      yScale,
+      xScaleBottom,
+      margin,
+      d3Annotation,
+      [],
+      formatOptions,
+      chartType,
+      height,
+      width,
+      svg,
+      isReportEditable,
+      barChart
+    );
     getConnectors();
     gTag.selectAll(".connectors").raise();
   };
@@ -23080,7 +23417,7 @@ const StackHorizontalChart = ({
       }
       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,
@@ -23132,7 +23469,7 @@ const StackHorizontalChart = ({
         }
       }).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"
@@ -23191,7 +23528,7 @@ const StackHorizontalChart = ({
         );
       }).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" : ""
@@ -23223,7 +23560,10 @@ const NormalizedStackHorizontalBarChart = ({
   let columnWidth = 0;
   const chartType = chartTypes.NormalizedStackHorizontalBarChart;
   const svgRef = 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;
@@ -23388,7 +23728,7 @@ const NormalizedStackHorizontalBarChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.rectangle
     );
@@ -23518,20 +23858,31 @@ const NormalizedStackHorizontalBarChart = ({
     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) => {
@@ -23970,7 +24321,9 @@ const LayeredHorizontalBarChart = ({
         )
       ).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 = () => {
@@ -23989,7 +24342,13 @@ const LayeredHorizontalBarChart = ({
       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)})`
       );
@@ -24232,7 +24591,7 @@ const LayeredHorizontalBarChart = ({
       }
       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,
@@ -24278,7 +24637,7 @@ const LayeredHorizontalBarChart = ({
               `
       ).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"
@@ -24330,7 +24689,7 @@ const LayeredHorizontalBarChart = ({
         );
       }).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" : ""
@@ -24481,7 +24840,14 @@ const HorizontalHistogramChart = ({
     ));
     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();
@@ -24610,7 +24976,9 @@ const HorizontalHistogramChart = ({
     );
     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);
   };
@@ -24627,7 +24995,9 @@ const HorizontalHistogramChart = ({
     }
   };
   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) {
@@ -24699,11 +25069,22 @@ const HorizontalHistogramChart = ({
         )
       ).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(
@@ -24719,7 +25100,16 @@ const HorizontalHistogramChart = ({
     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);
@@ -24728,7 +25118,7 @@ const HorizontalHistogramChart = ({
       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(
         [
           {
@@ -24737,7 +25127,13 @@ const HorizontalHistogramChart = ({
           },
           {
             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,
@@ -24810,7 +25206,14 @@ const HorizontalHistogramChart = ({
     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(
@@ -25052,6 +25455,12 @@ const AreaChart = ({
     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
@@ -25086,9 +25495,6 @@ const AreaChart = ({
     } else {
       filteredDimension = chartJSON.dimensionList;
     }
-    if (formatOptions.plotArea.hideZeroValues) {
-      chartJSON.hideZeroValues = true;
-    }
   };
   const initScale = () => {
     let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -25152,7 +25558,9 @@ const AreaChart = ({
         )
       ).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 = () => {
@@ -25180,8 +25588,14 @@ const AreaChart = ({
     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));
       }
@@ -25190,27 +25604,30 @@ const AreaChart = ({
       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");
@@ -25358,10 +25775,7 @@ const StackAreaChart = ({
   const barWidth = 0;
   const chartType = chartTypes.StackAreaChart;
   const svgRef = 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;
@@ -25385,6 +25799,7 @@ const StackAreaChart = ({
   let secondaryYLabel;
   let maxNumberForPrimaryAxis;
   let maxNumberForSecondaryAxis;
+  let totalValueMap = /* @__PURE__ */ new Map();
   let innerWidth2;
   let innerHeight2;
   let width;
@@ -25552,7 +25967,7 @@ const StackAreaChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.areaWithLine
     );
@@ -25575,6 +25990,12 @@ const StackAreaChart = ({
   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;
@@ -25623,9 +26044,6 @@ const StackAreaChart = ({
     chartJSON.dimensionList.forEach((d, i) => {
       chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
     });
-    if (formatOptions.plotArea.hideZeroValues) {
-      chartJSON.hideZeroValues = true;
-    }
   };
   const initScale = () => {
     let yAxisLabelArray = responsiveYaxisLabel$1(
@@ -25689,7 +26107,9 @@ const StackAreaChart = ({
         )
       ).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 = () => {
@@ -25719,31 +26139,39 @@ const StackAreaChart = ({
     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, "-") + '"]'
@@ -25792,6 +26220,7 @@ const StackAreaChart = ({
     filteredData = fData;
     filteredDimension = fDimension;
     visibleBars = fVisibleBars;
+    createTotalMeasureValueMap(data, totalValueMap, filteredDimension);
     createStackLineData();
     drawLineChart();
   };
@@ -25851,6 +26280,20 @@ const StackAreaChart = ({
       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;
@@ -25903,6 +26346,7 @@ const StackAreaChart = ({
         d["hideZero"] = JSON.parse(
           JSON.stringify(seriesData[j].properties.hideZeroValues)
         );
+        d["properties"] = seriesData[j].properties;
       })
     );
   };
@@ -25926,10 +26370,7 @@ const NormalizedStackAreaChart = ({
   const barWidth = 0;
   const chartType = chartTypes.NormalizedStackAreaChart;
   const svgRef = 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;
@@ -26112,7 +26553,7 @@ const NormalizedStackAreaChart = ({
       width,
       legendMargin,
       formatOptions,
-      seriesData,
+      [...seriesData].reverse(),
       chartId,
       staticLegendShape.areaWithLine
     );
@@ -26134,6 +26575,12 @@ const NormalizedStackAreaChart = ({
   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;
@@ -26158,9 +26605,6 @@ const NormalizedStackAreaChart = ({
     } else {
       filteredDimension = chartJSON.dimensionList;
     }
-    if (formatOptions.plotArea.hideZeroValues) {
-      chartJSON.hideZeroValues = true;
-    }
     const tempStackLineData = getStackedData(
       chartJSON.dimensionList,
       seriesData,
@@ -26231,8 +26675,10 @@ const NormalizedStackAreaChart = ({
     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) => {
@@ -26254,7 +26700,10 @@ const NormalizedStackAreaChart = ({
     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));
@@ -26262,33 +26711,42 @@ const NormalizedStackAreaChart = ({
     });
     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();
@@ -26425,8 +26883,10 @@ const NormalizedStackAreaChart = ({
     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;
@@ -26544,7 +27004,7 @@ const drawTotalValue = (chartFormatOptions, totalValue, chartTitleHeight, chartA
       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 : ""
@@ -26667,9 +27127,12 @@ const PieChart = ({ data, formatOptions, chartId }) => {
     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) => {
@@ -26740,7 +27203,13 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           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(
@@ -26754,7 +27223,13 @@ const PieChart = ({ data, formatOptions, chartId }) => {
         ).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;
@@ -26765,7 +27240,13 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           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(
@@ -26779,7 +27260,16 @@ const PieChart = ({ data, formatOptions, chartId }) => {
         ).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) {
@@ -26846,7 +27336,10 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           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(
@@ -27028,9 +27521,12 @@ const DonutChart = ({
       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 };
@@ -27112,7 +27608,13 @@ const DonutChart = ({
           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(
@@ -27126,7 +27628,13 @@ const DonutChart = ({
         ).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;
@@ -27137,7 +27645,13 @@ const DonutChart = ({
           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(
@@ -27151,7 +27665,19 @@ const DonutChart = ({
         ).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) {
@@ -27177,7 +27703,10 @@ const DonutChart = ({
         ).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);
@@ -27218,7 +27747,10 @@ const DonutChart = ({
           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) {
@@ -27293,7 +27825,7 @@ const DonutChart = ({
         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 : ""
@@ -27493,29 +28025,33 @@ const Treemap = ({ data, formatOptions, chartId }) => {
         );
       }).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);
     }
@@ -27650,7 +28186,7 @@ const PieofPie = ({
       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) => {
@@ -27718,7 +28254,7 @@ const PieofPie = ({
       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) => {
@@ -27788,7 +28324,10 @@ const PieofPie = ({
   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(
@@ -27809,7 +28348,10 @@ const PieofPie = ({
           }
           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(
@@ -27852,7 +28394,10 @@ const PieofPie = ({
   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(
@@ -27873,7 +28418,10 @@ const PieofPie = ({
           }
           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(
@@ -27934,18 +28482,6 @@ const PieofPie = ({
           data: []
         };
       });
-      initLegendListWithTotalValueAllowance(
-        chartFormatOptions,
-        svg,
-        seriesData,
-        width,
-        height,
-        legendListWidth,
-        chartTitleHeight,
-        chartId,
-        margins,
-        staticLegendShape.circle
-      );
     } catch (error) {
       logError$2(fileName$5, "initLegendList", error);
     }
@@ -28278,7 +28814,7 @@ const PyramidChart = ({
               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
@@ -28434,7 +28970,7 @@ const ProgressChart = ({
             ],
             chartFormatOptions,
             void 0,
-            d.currentTarget.__data__.data.properties
+            ChartData[0].properties
           );
         } catch (error) {
           logError$2(
@@ -28478,7 +29014,9 @@ const ProgressChart = ({
                 )(progressValue)
               }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            ChartData[1].properties
           );
         } catch (error) {
           logError$2(
@@ -28521,7 +29059,7 @@ const ProgressChart = ({
         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 : ""
@@ -28536,9 +29074,9 @@ const ProgressChart = ({
         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) {
@@ -28622,10 +29160,9 @@ const Speedometer = ({
         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);
     }
@@ -28678,13 +29215,16 @@ const Speedometer = ({
         }
         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]
@@ -28834,7 +29374,7 @@ const Speedometer = ({
                   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(
@@ -29005,7 +29545,7 @@ const Speedometer = ({
       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 : ""
@@ -29212,7 +29752,7 @@ const RadialBarChart = ({
         )(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
@@ -29275,7 +29815,7 @@ const RadialBarChart = ({
           )(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
@@ -29707,7 +30247,11 @@ function requireD3Cloud() {
 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 = useRef();
   let seriesData = generalizedChartData(ChartData);
   let chartFormatOptions;
@@ -29782,7 +30326,7 @@ const WordCloud = ({ data: { ChartData }, formatOptions, chartId }) => {
             }
           }).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";
@@ -33198,7 +33742,7 @@ const VennChart = ({
           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"
@@ -33251,7 +33795,7 @@ const VennChart = ({
           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"
@@ -34022,11 +34566,11 @@ const SankeyChart = ({
       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(
@@ -34050,13 +34594,13 @@ const SankeyChart = ({
           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);
@@ -34064,7 +34608,7 @@ const SankeyChart = ({
           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);
@@ -34076,7 +34620,7 @@ const SankeyChart = ({
         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");
@@ -34099,11 +34643,11 @@ const SankeyChart = ({
           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);
@@ -34135,7 +34679,7 @@ const SankeyChart = ({
           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");
@@ -52360,7 +52904,7 @@ const BubbleChart = ({
         (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",
@@ -52631,7 +53175,7 @@ const BubbleChart = ({
         measure: d.value,
         measureName: series.legend ?? "Measure",
         legendName: series.legend,
-        legendColor: series.properties?.color ?? "#000000",
+        legendColor: series.properties?.color ?? commonColors.black,
         tooltip: ""
       }));
     } catch (e) {
@@ -53143,7 +53687,7 @@ const ScatterChart = ({
         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 : ""
@@ -53200,7 +53744,7 @@ const ScatterChart = ({
         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 : ""
@@ -53546,7 +54090,9 @@ const WaterfallChart = ({
     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;
@@ -53565,7 +54111,11 @@ const WaterfallChart = ({
       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) {
@@ -53576,7 +54126,9 @@ const WaterfallChart = ({
       } 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];
       });
@@ -53649,7 +54201,9 @@ const WaterfallChart = ({
         )
       ).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,
@@ -53665,9 +54219,7 @@ const WaterfallChart = ({
   };
   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);
@@ -53686,10 +54238,30 @@ const WaterfallChart = ({
         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
@@ -53728,7 +54300,15 @@ const WaterfallChart = ({
               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();
         }
       }
@@ -53891,7 +54471,11 @@ const WaterfallChart = ({
       tempWaterFallData.push(waterFallArr2);
       if (dataRequiredForStackTotal.length > 0) {
         filteredData = dataRequiredForStackTotal;
-        stackTotalData = getStackedData(filteredDimension, dataRequiredForStackTotal, false);
+        stackTotalData = getStackedData(
+          filteredDimension,
+          dataRequiredForStackTotal,
+          false
+        );
       }
       return tempWaterFallData;
     } catch (error) {
@@ -53899,14 +54483,8 @@ const WaterfallChart = ({
     }
   };
   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),
@@ -53934,9 +54512,13 @@ const TornadoChart = ({
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.TornadoChart;
-  const IsadvanceanalyticsChart = data.IsadvanceanalyticsChart;
+  const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart;
   const svgRef = 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;
@@ -54006,6 +54588,7 @@ const TornadoChart = ({
       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
@@ -54034,7 +54617,7 @@ const TornadoChart = ({
       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,
@@ -54162,24 +54745,23 @@ const TornadoChart = ({
       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")) {
@@ -54200,7 +54782,7 @@ const TornadoChart = ({
   };
   const preProcessChartData = () => {
     let processedSeriesData;
-    if (!IsadvanceanalyticsChart) {
+    if (!isAdvanceAnalyticsChart) {
       const firstMeasure = seriesData[0]?.properties.currentMeasure;
       let yMaxLeft = 0;
       let yMaxRight = -Infinity;
@@ -54234,12 +54816,13 @@ const TornadoChart = ({
       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
@@ -54263,7 +54846,10 @@ const TornadoChart = ({
     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();
@@ -54326,16 +54912,25 @@ const TornadoChart = ({
       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(
         [
@@ -54427,14 +55022,7 @@ const TornadoChart = ({
   };
   const drawColumnChart = () => {
     getChartType();
-    initXaxisBar(
-      formatOptions,
-      gTag,
-      xLabel,
-      innerHeight2,
-      innerWidth2,
-      xAxis
-    );
+    initXaxisBar(formatOptions, gTag, xLabel, innerHeight2, innerWidth2, xAxis);
     commonAnnotations(
       filteredData,
       yScaleLeft,
@@ -54460,7 +55048,7 @@ const TornadoChart = ({
       svg,
       yScaleLeft,
       columnWidth,
-      IsadvanceanalyticsChart,
+      isAdvanceAnalyticsChart,
       isReportEditable,
       barChart
     );