pace-chart-lib 1.0.7 → 1.0.9

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

@@ -11407,7 +11407,8 @@
       dataTableFontStyle: [],
       dataTableNumberFormat: ",",
       dataTableDecimalPrecision: "2",
-      dataTableDisplayUnits: "None"
+      dataTableDisplayUnits: "None",
+      dataTableLabelColor: "#000000"
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11605,6 +11606,7 @@
     )[1] : 0;
     yTitle = yTitle > width * 0.1 ? width * 0.1 : yTitle;
     let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility ? responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions, false, isNormalizedChart) : getYAxisLabel(formatOptions, max$2(legendList, (d) => d?.length || 0) || 0);
+    yLabel += 8;
     let secondaryYLabel = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? responsiveYaxisMargin(
       maxNumberForSecondaryAxis,
       yMaxRight,
@@ -11732,8 +11734,8 @@
         xAxisObject,
         isBarChart
       );
-      const legendPosition = formatOptions.legends.legendPosition;
       const legendVisibility = formatOptions.legends.legendVisibility;
+      const legendPosition = legendVisibility ? formatOptions.legends.legendPosition : staticLegendPosition.none;
       const scrollHeightConstant = isScrollbarVisible ? 12 : 0;
       const xAxisRelatedMargin = isBarChart ? metrics.yTitle + metrics.yLabel : metrics.xTitle + metrics.xLabel;
       let top2 = 0;
@@ -12048,20 +12050,7 @@
       let decimalValues = decimalPrescision;
       let formatter;
       if (displayUnits === "Auto") {
-        if (Math.abs(measureValue) >= 1e9) {
-          Unit = 1e9;
-          displayUnitsPostFix = "B";
-        } else if (Math.abs(measureValue) >= 1e6) {
-          Unit = 1e6;
-          displayUnitsPostFix = "M";
-        } else if (Math.abs(measureValue) >= 1e3) {
-          Unit = 1e3;
-          displayUnitsPostFix = "K";
-        } else {
-          Unit = 1;
-          displayUnitsPostFix = "";
-        }
-        measureValue = measureValue / Unit;
+        return getAutoNumberWithFormat(measureValue);
       } else if (displayUnits != staticDisplayUnits.none) {
         displayUnits == staticDisplayUnits.thousands ? (Unit = 1e3, displayUnitsPostFix = "K") : null;
         displayUnits == staticDisplayUnits.millions ? (Unit = 1e6, displayUnitsPostFix = "M") : null;
@@ -12110,6 +12099,26 @@
       throw error;
     }
   }
+  function getAutoNumberWithFormat(value2) {
+    if (value2 === null || value2 === void 0 || isNaN(value2)) return "-";
+    const absValue = Math.abs(value2);
+    if (absValue >= 1e9) {
+      return format(".2s")(value2).replace("G", "B");
+    } else if (absValue >= 1e6) {
+      return format(".2s")(value2);
+    } else if (absValue >= 1e3) {
+      return format(".2s")(value2);
+    } else if (absValue >= 1) {
+      const formatted = format(".2f")(value2);
+      return +formatted === Math.floor(value2) ? format(".0f")(value2) : formatted;
+    } else if (absValue >= 0.01) {
+      return format(".2f")(value2);
+    } else if (absValue > 0) {
+      return format(".2e")(value2);
+    } else {
+      return "0";
+    }
+  }
   function responsiveYaxisMargin(maxNumber, yMax, formatOptions, isSecondaryAxis, isNormalizedChart) {
     try {
       {
@@ -12123,8 +12132,7 @@
         if (displayUnits != "None") {
           yMaxNumber = getNumberWithFormat(
             Math.floor(maxNumber) || Math.floor(yMax),
-            "Auto",
-            //displayUnits,
+            displayUnits,
             numberFormat,
             decimalPrecision ?? "2"
           ).toString();
@@ -12159,6 +12167,7 @@
   }
   function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptions, chartJSON) {
     try {
+      let autoLabelFlag = false;
       let secondaryCustomYaxisIntervalValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisIntervalText);
       let secondaryCustomYaxisMinValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText);
       let secondaryCustomYaxisMaxValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText);
@@ -12200,6 +12209,7 @@
           }
         }
       } else {
+        let autoLabelFlag2 = true;
         let labelWidthPx = calculateWidthHeightDynamically(
           (parseFloat(formatOptions.yAxisLabel.yAxisMaxText) || chartJSON.yMaxRight).toString(),
           formatOptions.yAxisLabel.yAxisLabelFontSize,
@@ -12213,7 +12223,7 @@
           labelWidthPx[0]
         );
       }
-      return { secondaryYAxisLabelArray, secondaryCustomTickValue };
+      return { secondaryYAxisLabelArray, secondaryCustomTickValue, autoLabelFlag };
     } catch (e) {
     }
   }
@@ -12255,11 +12265,17 @@
   }
   function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, barChart, innerWidth2) {
     try {
+      let autoLabelFlag = false;
       let customYaxisIntervalValue = parseFloat(
         formatOptions.yAxisLabel.yAxisIntervalText
       );
       let yAxisLabelArray = [];
       let customTickValue;
+      if (!customYaxisMaxValue && Ymax > 0) {
+        const range2 = Ymax - Ymin;
+        const padding = range2 * 0.05;
+        Ymax = Ymax + padding;
+      }
       if (customYaxisIntervalValue && customYaxisIntervalValue !== 0 && customYaxisIntervalValue !== void 0) {
         let minValue = customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : Ymin;
         let maxValue = customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : Ymax;
@@ -12299,6 +12315,7 @@
           }
         }
       } else {
+        autoLabelFlag = true;
         let labelWidthPx = calculateWidthHeightDynamically(
           (customYaxisMaxValue || chartJSON.yMaxLeft).toString(),
           formatOptions.yAxisLabel.yAxisLabelFontSize,
@@ -12307,13 +12324,14 @@
         );
         yAxisLabelArray = getLabelsFromAlgo(
           customYaxisMinValue || chartJSON.yMinLeft,
-          customYaxisMaxValue || chartJSON.yMaxLeft,
+          Ymax,
+          //Use updated Ymax with padding
           barChart ? innerWidth2 : innerHeight2,
           barChart ? labelWidthPx[1] : labelWidthPx[0]
         );
-        customTickValue = barChart ? innerWidth2 / 30 : innerHeight2 / 30;
+        customTickValue = barChart ? innerWidth2 / 80 : innerHeight2 / 80;
       }
-      return { yAxisLabelArray, customTickValue };
+      return { yAxisLabelArray, customTickValue, autoLabelFlag };
     } catch (e) {
       throw e;
     }
@@ -12346,9 +12364,7 @@
       labels.push(parseFloat(current.toFixed(10)));
       current += interval2;
     }
-    const reductionFactor = 4;
-    const reducedLabels = labels.filter((i) => i % reductionFactor === 0);
-    return reducedLabels;
+    return labels;
   }
   function initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight2) {
     try {
@@ -13032,7 +13048,7 @@
               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 === actualChartTypes.column) {
-              return xScale(d.x) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2;
+              return xScaleForLegends(d.currentLegend) ? xScale(d.x) + xScaleForLegends(d.currentLegend) - (columnWidth - xScaleForLegends.bandwidth()) / 2 : xScale(d.x);
             } else {
               return xScale(d.x);
             }
@@ -13050,7 +13066,7 @@
             } else {
               if (barChart) {
                 let actualColWidth = chartType === actualChartTypes.tornadoChart || chartType === actualChartTypes.layeredBarChart ? xScaleForLegends.bandwidth() : -columnWidth;
-                return (xScaleForLegends && xScaleForLegends(d.currentLegend) ? xScaleForLegends(d.currentLegend) : 0) + xScale(d.y) + (actualColWidth - 3) / 2;
+                return (xScaleForLegends && xScaleForLegends(d.currentLegend) ? xScaleForLegends(d.currentLegend) + xScaleForLegends.bandwidth() / 2 : 0) + xScale(d.y) - 5;
               } else
                 return dataLabelsPosition(
                   d.y.measure,
@@ -13600,7 +13616,7 @@
         parentTag.append("foreignObject").attr("x", (d) => 0).attr("y", tableStartY + yCordinate).attr("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).attr("height", cellHeight).style("justify-content", "center").append("xhtml:div").attr("class", "middlepart").style("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).style("height", `${cellHeight}px`).style("line-height", `${cellHeight}px`).style("border-width", (d, pos) => getBorderStyle(formatOptions, i, pos, dimensionCount, legendsCount, "width")).style("border-style", (d, pos) => getBorderStyle(formatOptions, i, pos, dimensionCount, legendsCount, "style")).style("border-color", (d, pos) => getBorderStyle(formatOptions, i, pos, dimensionCount, legendsCount, "color")).style("text-align", "center").style("white-space", "nowrap").style("text-overflow", "ellipsis").style("overflow", "hidden").style("padding-inline", "3px").style("font-size", formatOptions.dataTableProperties.dataTableFontSize + "px").style("font-family", formatOptions.dataTableProperties.dataTableFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
-        ).style("color", "black").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", (d) => getNumberWithFormat(
+        ).style("color", formatOptions.dataTableProperties.dataTableLabelColor).style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", (d) => getNumberWithFormat(
           chartType.includes("100stack") ? d.TooltipMeasure / d.TotalMeasure : d.TooltipMeasure || d.value,
           formatOptions.dataTableProperties.dataTableDisplayUnits,
           formatOptions.dataTableProperties.dataTableNumberFormat,
@@ -14449,16 +14465,18 @@
               y: d.data.dimension,
               x: d[1] > 0 ? d[1] : d[0],
               prevValue: d[0] >= 0 ? d[0] : d[1],
-              position: d.data.labelPosition,
+              position: formatOptions.annotation.annotationPosition == "4" ? d.data.labelPosition : JSON.parse(formatOptions.annotation.annotationPosition),
               currentLegend: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key,
-              isVisible: true
+              isVisible: true,
+              hoverId: d.properties.alias ? getHoverId(d.properties.alias) : getHoverId(d.key)
             } : {
               x: d.data.dimension,
               y: d[1] > 0 ? d[1] : d[0],
               prevValue: d[0] >= 0 ? d[0] : d[1],
-              position: d.data.labelPosition,
+              position: formatOptions.annotation.annotationPosition == "4" ? d.data.labelPosition : JSON.parse(formatOptions.annotation.annotationPosition),
               currentLegend: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key,
-              isVisible: true
+              isVisible: true,
+              hoverId: d.properties.alias ? getHoverId(d.properties.alias) : getHoverId(d.key)
             },
             dx: 0,
             dy: 0,
@@ -14580,7 +14598,7 @@
       }
     });
     annotations.selectAll("text").append("text").style("fill", formatOptions.annotation.annotationColor !== "#ffffff" ? formatOptions.annotation.annotationColor : "none");
-    annotations.selectAll("tspan").attr("hoverId", (d) => d.data.currentLegend.replaceAll(" ", "-")).style("visibility", (d) => parseFloat(d.data.y) == 0 && formatOptions.annotation.annotationHideZeroValues ? "hidden" : "visible");
+    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;
   };
   const initXaxisBar = (formatOptions, gTag, yLabel, innerHeight2, innerWidth2, xAxisBottom) => {
@@ -14601,7 +14619,10 @@
         "visibility",
         formatOptions.yAxisLabel.yAxisLabelVisibility ? "visible" : "hidden"
       );
-      xAxisG.select(".domain").style("shape-rendering", "crispEdges").style(
+      xAxisG.select(".domain").attr(
+        "visibility",
+        formatOptions.yAxisLabel.yAxisLabelVisibility ? "visible" : "hidden"
+      ).style("shape-rendering", "crispEdges").style(
         "stroke",
         formatOptions.yAxisLabel.yAxisColorInverted
       ).attr("stroke-width", formatOptions.yAxisLabel.yAxisWidth ? formatOptions.yAxisLabel.yAxisWidth : formatOptions.plotArea.plotAreaBorderThickness);
@@ -14613,7 +14634,7 @@
     try {
       let fontStyle = formatOptions.xAxisLabel.xAxisLabelFontStyle;
       let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
-      let responsiveDimList = responsiveXaxisLabel(dimensionList, innerWidth2);
+      let responsiveDimList = responsiveXaxisLabel(dimensionList, innerHeight2);
       let labelWidth = formatOptions.xAxisLabel.labelTextWrap ? dimensionHeightWidthArray[3] + 10 < width * 0.1 ? dimensionHeightWidthArray[3] + 10 : width * 0.1 : formatOptions.xAxisLabel.xAxisLabelRotation == 0 ? columnWidth : dimensionHeightWidthArray[0] + 5;
       let xLabelMargin = formatOptions.xAxisLabel.labelTextWrap ? xLabel : labelWidth;
       let formatedResponsiveDimList = isDateType ? setDateFormats(
@@ -14984,8 +15005,9 @@
     actualChartTypes.speedometerChart,
     actualChartTypes.radialBarChart
   ];
-  function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, legendShape) {
+  function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, inputSeries, chartId, legendShape) {
     try {
+      let seriesData = [...inputSeries].reverse();
       let position = formatOptions.legends.legendPosition;
       let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
       let verticalLegendAlignment = formatOptions.legends.legendAlignment;
@@ -16074,6 +16096,13 @@
     } catch (e) {
     }
   };
+  const getHoverId = (inputText) => {
+    try {
+      return inputText.includes("~$~") ? inputText.split("~$~")[1].replace(/ /g, "-") : inputText.replace(/ /g, "-");
+    } catch (error) {
+      return inputText;
+    }
+  };
   const ColumnChart = ({
     isDateType,
     formatOptions,
@@ -16402,6 +16431,15 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -16411,27 +16449,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -17136,6 +17154,15 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -17145,27 +17172,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -17934,6 +17941,15 @@
     const initAxis = () => {
       getXAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -17943,27 +17959,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -18163,7 +18159,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -18461,9 +18457,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(respParams.yAxisLabelArray).ticks(
-          respParams.customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(respParams.autoLabelFlag ? void 0 : respParams.yAxisLabelArray).ticks(respParams.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -18486,7 +18480,7 @@
       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) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
+        (d) => d[0]?.properties.alias ? getHoverId(d[0]?.properties.alias) : getHoverId(d.key)
       );
       columnGroups = columnGroupsEnter.merge(columnGroups);
       let rects = columnGroups.selectAll("rect").data((d) => d);
@@ -18538,14 +18532,14 @@
         );
         const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
         gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
-        let legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+        let legend = d?.properties.alias ? getHoverId(d?.properties.alias) : getHoverId(d.key);
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
       }).on("mouseout", (event2, d) => {
         hideTooltipOnMouseOut();
         const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
         gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-        let legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+        let legend = d?.properties.alias ? getHoverId(d?.properties.alias) : getHoverId(d.key);
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       });
@@ -18885,7 +18879,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    ).reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -19181,7 +19175,7 @@
         yAxisLeft = axisLeft(yScaleLeft).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
         ).ticks(
-          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
+          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
           "%"
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -20232,6 +20226,17 @@
     const initAxis = () => {
       getXAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue,
+          false,
+          innerWidth2
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -20241,19 +20246,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue,
-            false,
-            innerWidth2
-          ).yAxisLabelArray
-        ).ticks(innerHeight2 / 50).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -20735,6 +20728,15 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -20744,29 +20746,15 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
+        let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
+          chartJSON.yMinRight,
+          formatOptions,
+          chartJSON
+        );
         yAxisRight = axisRight(yScaleRight).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -20774,21 +20762,7 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
             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(
+        ).tickValues(responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -20975,7 +20949,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21284,6 +21258,15 @@
     const initAxis = () => {
       getXAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -21293,27 +21276,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -21526,7 +21489,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21800,7 +21763,7 @@
         yAxisLeft = axisLeft(yScaleLeft).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
         ).ticks(
-          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
+          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
           "%"
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -21828,7 +21791,7 @@
       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));
-      let lines = gTag.selectAll(".parentGroup").data([stackChartData.reverse()]);
+      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);
       let lineGroupsEnter = lineGroups.enter().append("g").attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
@@ -22315,6 +22278,15 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -22324,29 +22296,15 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? innerHeight2 / 30
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
+        let responsiveSecondaryLablesObj = responsiveSecondaryYaxisLabel(
+          secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight,
+          chartJSON.yMinRight,
+          formatOptions,
+          chartJSON
+        );
         xAxisTop = axisTop(xScaleTop).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -22354,21 +22312,7 @@
             formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat,
             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(
+        ).tickValues(responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -22545,7 +22489,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -22814,6 +22758,17 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue,
+          barChart,
+          innerWidth2
+        );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -22823,31 +22778,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue,
-            barChart,
-            innerWidth2
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue,
-            barChart,
-            innerWidth2
-          ).customTickValue ?? innerHeight2 / 30
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
@@ -23248,7 +23179,7 @@
     let columnWidth = 0;
     const chartType = actualChartTypes.stackBar100;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -23402,6 +23333,7 @@
         margin,
         yTitle,
         yLabel,
+        void 0,
         xTitle,
         xLabel
       );
@@ -23517,7 +23449,7 @@
       {
         xAxisBottom = axisBottom(xScaleBottom).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-        ).ticks(innerWidth2 / 30, "%").tickPadding(8).tickSizeOuter(0);
+        ).ticks(innerWidth2 / 80, "%").tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
@@ -23541,7 +23473,7 @@
       filteredDimension.forEach((dim) => {
         gTag.append("rect").attr("id", `dim-background-${dim}`).attr("class", "dimension-background").attr("y", yScale(dim) - yScale.bandwidth() / 2).attr("height", yScale.bandwidth()).attr("x", 0).attr("width", innerWidth2).attr("fill", "#E5E5E5").attr("visibility", "hidden").lower();
       });
-      let columns = gTag.selectAll(".parentGroup").data([stackChartData.reverse()]);
+      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(
@@ -23977,6 +23909,17 @@
     const initAxis = () => {
       getYAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue,
+          barChart,
+          innerWidth2
+        );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -23986,31 +23929,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue,
-            barChart,
-            innerWidth2
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue,
-            barChart,
-            innerWidth2
-          ).customTickValue ?? innerHeight2 / 30
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getYAxis = () => {
@@ -24744,6 +24663,15 @@
     const initAxis = () => {
       getYAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         xAxisBottom = axisBottom(xScaleBottom).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -24753,27 +24681,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         xAxisTop = axisTop(xScaleTop).tickFormat(
@@ -25309,6 +25217,15 @@
     const initAxis = () => {
       getXAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -25318,27 +25235,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -25545,7 +25442,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -25855,6 +25752,15 @@
     };
     const initAxis = () => {
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -25864,27 +25770,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
     const getXAxis = () => {
@@ -25909,7 +25795,7 @@
       ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined(
         (d) => d.data.hideZero ? Boolean(d.data.key) : true
       ).curve(getCurveType(formatOptions));
-      let areas = gTag.selectAll(".lineGroup").data([stackChartData.reverse()]);
+      let areas = gTag.selectAll(".lineGroup").data([stackChartData]);
       let focus = gTag.append("g").attr("class", "focusClass");
       areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
       let areaGroups = areas.selectAll(".area-group").data((d) => d);
@@ -26124,7 +26010,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -26412,7 +26298,7 @@
         yAxisLeft = axisLeft(yScaleLeft).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
         ).ticks(
-          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
+          dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
           "%"
         ).tickPadding(8).tickSizeOuter(0);
       }
@@ -26438,13 +26324,13 @@
       });
       const columnGenerator = area().x(
         (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
-      ).y0(() => yScaleLeft(0)).y1((d) => yScaleLeft(d[1])).defined((d) => d.data.hideZero ? Boolean(d[0]) : true).curve(curveLinear$1);
+      ).y0((d) => yScaleLeft(d[0])).y1((d) => yScaleLeft(d[1])).defined((d) => d.data.hideZero ? Boolean(d[0]) : true).curve(curveLinear$1);
       const columnGeneratorStart = area().x(
         (d) => xScale(d.data.dimension) ? xScale(d.data.dimension) : null
-      ).y0(() => yScaleLeft(0)).y1(() => yScaleLeft(0)).defined(
+      ).y0((d) => yScaleLeft(d[0])).y1((d) => yScaleLeft(d[1])).defined(
         (d) => d.data.hideZero ? Boolean(d.data.key) : true
       ).curve(getCurveType(formatOptions));
-      let areas = gTag.selectAll(".lineGroup").data([stackChartData.reverse()]);
+      let areas = gTag.selectAll(".lineGroup").data([stackChartData]);
       let focus = gTag.append("g").attr("class", "focusClass");
       areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
       let areaGroups = areas.selectAll(".area-group").data((d) => d);
@@ -26967,10 +26853,10 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.valueFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d)).attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", "1.00em").text((d) => {
+          ).attr("transform", (d) => getDataLabelTransformString(d)).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.dataLabelName && chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
+              if (chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
                 if (chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%") {
                   return (Math.abs(dataValue / pieTotalValue) * 100).toFixed(
                     convertStringToNumber(
@@ -27331,10 +27217,10 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.valueFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d)).attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", "1.00em").text((d) => {
+          ).attr("transform", (d) => getDataLabelTransformString(d)).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.dataLabelName && chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
+              if (chartFormatOptions.plotArea.dataLabelValue && dataValue !== void 0) {
                 if (chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%") {
                   return (Math.abs(dataValue / pieTotalValue) * 100).toFixed(
                     convertStringToNumber(
@@ -53749,6 +53635,15 @@
     const initAxis = () => {
       getXAxis();
       {
+        let responsiveLablesObj = responsiveYaxisLabel$1(
+          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMinLeft,
+          innerHeight2,
+          formatOptions,
+          chartJSON,
+          customYaxisMinValue,
+          customYaxisMaxValue
+        );
         yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
@@ -53758,27 +53653,7 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
-        ).tickValues(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).yAxisLabelArray
-        ).ticks(
-          responsiveYaxisLabel$1(
-            customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-            chartJSON.yMinLeft,
-            innerHeight2,
-            formatOptions,
-            chartJSON,
-            customYaxisMinValue,
-            customYaxisMaxValue
-          ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-        ).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       colorScale = ordinal().range([
         "#E25A42",