pace-chart-lib 1.0.7 → 1.0.9

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

@@ -11404,7 +11404,8 @@ const defaultChartFormatOptions = {
     dataTableFontStyle: [],
     dataTableNumberFormat: ",",
     dataTableDecimalPrecision: "2",
-    dataTableDisplayUnits: "None"
+    dataTableDisplayUnits: "None",
+    dataTableLabelColor: "#000000"
   },
   dataTableOuterBorder: {
     borderButtonVisibility: true,
@@ -11602,6 +11603,7 @@ function computeMarginMetrics(windowWidth, windowHeight, maxNumberForPrimaryAxis
   )[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,
@@ -11729,8 +11731,8 @@ function calculateVerticalMargins(windowWidth, windowHeight, maxNumberForPrimary
       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;
@@ -12045,20 +12047,7 @@ function getNumberWithFormat(measureValue, displayUnits, numberFormat, decimalPr
     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;
@@ -12107,6 +12096,26 @@ function getNumberWithFormat(measureValue, displayUnits, numberFormat, decimalPr
     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 {
     {
@@ -12120,8 +12129,7 @@ function responsiveYaxisMargin(maxNumber, yMax, formatOptions, isSecondaryAxis,
       if (displayUnits != "None") {
         yMaxNumber = getNumberWithFormat(
           Math.floor(maxNumber) || Math.floor(yMax),
-          "Auto",
-          //displayUnits,
+          displayUnits,
           numberFormat,
           decimalPrecision ?? "2"
         ).toString();
@@ -12156,6 +12164,7 @@ function responsiveYaxisMargin(maxNumber, yMax, formatOptions, isSecondaryAxis,
 }
 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);
@@ -12197,6 +12206,7 @@ function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptio
         }
       }
     } else {
+      let autoLabelFlag2 = true;
       let labelWidthPx = calculateWidthHeightDynamically(
         (parseFloat(formatOptions.yAxisLabel.yAxisMaxText) || chartJSON.yMaxRight).toString(),
         formatOptions.yAxisLabel.yAxisLabelFontSize,
@@ -12210,7 +12220,7 @@ function responsiveSecondaryYaxisLabel(secondaryYmax, secondaryYmin, formatOptio
         labelWidthPx[0]
       );
     }
-    return { secondaryYAxisLabelArray, secondaryCustomTickValue };
+    return { secondaryYAxisLabelArray, secondaryCustomTickValue, autoLabelFlag };
   } catch (e) {
   }
 }
@@ -12252,11 +12262,17 @@ function isVerticallyOverlapping(obj1, obj2) {
 }
 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;
@@ -12296,6 +12312,7 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
         }
       }
     } else {
+      autoLabelFlag = true;
       let labelWidthPx = calculateWidthHeightDynamically(
         (customYaxisMaxValue || chartJSON.yMaxLeft).toString(),
         formatOptions.yAxisLabel.yAxisLabelFontSize,
@@ -12304,13 +12321,14 @@ function responsiveYaxisLabel$1(Ymax, Ymin, innerHeight2, formatOptions, chartJS
       );
       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;
   }
@@ -12343,9 +12361,7 @@ function getLabelsFromAlgo(dataMin, dataMax, axisLengthPx, labelWidthPx = 80) {
     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 {
@@ -13029,7 +13045,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             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);
           }
@@ -13047,7 +13063,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           } 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,
@@ -13597,7 +13613,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
       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,
@@ -14446,16 +14462,18 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             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,
@@ -14577,7 +14595,7 @@ const appendAnnotations = (svg, formatOptions, margin, fontStyle, makeAnnotation
     }
   });
   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) => {
@@ -14598,7 +14616,10 @@ const initXaxisBar = (formatOptions, gTag, yLabel, innerHeight2, innerWidth2, xA
       "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);
@@ -14610,7 +14631,7 @@ const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yA
   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(
@@ -14981,8 +15002,9 @@ const fileName$b = "CommonFunctions.ts";
   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;
@@ -16071,6 +16093,13 @@ const connectorNumberFormat = (numerator, denominator, decimalValues, numberForm
   } 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,
@@ -16399,6 +16428,15 @@ const ColumnChart = ({
   };
   const initAxis = () => {
     {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
       yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
           d,
@@ -16408,27 +16446,7 @@ const ColumnChart = ({
         )
       ).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(
@@ -17133,6 +17151,15 @@ const CustomColumnChart = ({
   };
   const initAxis = () => {
     {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
       yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
           d,
@@ -17142,27 +17169,7 @@ const CustomColumnChart = ({
         )
       ).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(
@@ -17931,6 +17938,15 @@ const LayeredColumnChart = ({
   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,
@@ -17940,27 +17956,7 @@ const LayeredColumnChart = ({
         )
       ).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 = () => {
@@ -18160,7 +18156,7 @@ const StackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -18458,9 +18454,7 @@ const StackColumnChart = ({
         )
       ).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 = () => {
@@ -18483,7 +18477,7 @@ const StackColumnChart = ({
     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);
@@ -18535,14 +18529,14 @@ const StackColumnChart = ({
       );
       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);
     });
@@ -18882,7 +18876,7 @@ const NormalizedStackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  ).reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -19178,7 +19172,7 @@ const NormalizedStackColumnChart = ({
       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);
     }
@@ -20229,6 +20223,17 @@ const ColumnHistogramChart = ({
   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,
@@ -20238,19 +20243,7 @@ const ColumnHistogramChart = ({
         )
       ).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 = () => {
@@ -20732,6 +20725,15 @@ const LineChart = ({
   };
   const initAxis = () => {
     {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
       yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
           d,
@@ -20741,29 +20743,15 @@ const LineChart = ({
         )
       ).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,
@@ -20771,21 +20759,7 @@ const LineChart = ({
           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);
     }
@@ -20972,7 +20946,7 @@ const StackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21281,6 +21255,15 @@ const StackLineChart = ({
   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,
@@ -21290,27 +21273,7 @@ const StackLineChart = ({
         )
       ).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 = () => {
@@ -21523,7 +21486,7 @@ const NormalisedStackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21797,7 +21760,7 @@ const NormalisedStackLineChart = ({
       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);
     }
@@ -21825,7 +21788,7 @@ const NormalisedStackLineChart = ({
     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, "-"));
@@ -22312,6 +22275,15 @@ const HorizontalBarChart = ({
   };
   const initAxis = () => {
     {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
       xAxisBottom = axisBottom(xScaleBottom).tickFormat(
         (d) => getNumberWithFormat(
           d,
@@ -22321,29 +22293,15 @@ const HorizontalBarChart = ({
         )
       ).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,
@@ -22351,21 +22309,7 @@ const HorizontalBarChart = ({
           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);
     }
@@ -22542,7 +22486,7 @@ const StackHorizontalChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = true;
   const isSecondaryAxisDrawn = false;
@@ -22811,6 +22755,17 @@ const StackHorizontalChart = ({
   };
   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,
@@ -22820,31 +22775,7 @@ const StackHorizontalChart = ({
         )
       ).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 = () => {
@@ -23245,7 +23176,7 @@ const NormalizedStackHorizontalBarChart = ({
   let columnWidth = 0;
   const chartType = actualChartTypes.stackBar100;
   const svgRef = 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;
@@ -23399,6 +23330,7 @@ const NormalizedStackHorizontalBarChart = ({
       margin,
       yTitle,
       yLabel,
+      void 0,
       xTitle,
       xLabel
     );
@@ -23514,7 +23446,7 @@ const NormalizedStackHorizontalBarChart = ({
     {
       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 = () => {
@@ -23538,7 +23470,7 @@ const NormalizedStackHorizontalBarChart = ({
     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(
@@ -23974,6 +23906,17 @@ const LayeredHorizontalBarChart = ({
   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,
@@ -23983,31 +23926,7 @@ const LayeredHorizontalBarChart = ({
         )
       ).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 = () => {
@@ -24741,6 +24660,15 @@ const HorizontalHistogramChart = ({
   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,
@@ -24750,27 +24678,7 @@ const HorizontalHistogramChart = ({
         )
       ).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(
@@ -25306,6 +25214,15 @@ const AreaChart = ({
   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,
@@ -25315,27 +25232,7 @@ const AreaChart = ({
         )
       ).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 = () => {
@@ -25542,7 +25439,7 @@ const StackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -25852,6 +25749,15 @@ const StackAreaChart = ({
   };
   const initAxis = () => {
     {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue
+      );
       yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
           d,
@@ -25861,27 +25767,7 @@ const StackAreaChart = ({
         )
       ).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 = () => {
@@ -25906,7 +25792,7 @@ const StackAreaChart = ({
     ).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);
@@ -26121,7 +26007,7 @@ const NormalizedStackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -26409,7 +26295,7 @@ const NormalizedStackAreaChart = ({
       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);
     }
@@ -26435,13 +26321,13 @@ const NormalizedStackAreaChart = ({
     });
     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);
@@ -26964,10 +26850,10 @@ const PieChart = ({ data, formatOptions, chartId }) => {
         ).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(
@@ -27328,10 +27214,10 @@ const DonutChart = ({
         ).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(
@@ -53746,6 +53632,15 @@ const WaterfallChart = ({
   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,
@@ -53755,27 +53650,7 @@ const WaterfallChart = ({
         )
       ).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",