pace-chart-lib 1.0.8 → 1.0.9

package/dist/Components/Charts/Core/CommonFunctions.d.ts

@@ -23,7 +23,7 @@ export declare function getRandomColor(): {
  *
  * @return {void} - This function does not return anything. It updates the SVG by rendering legends.
  */
-export declare function drawLegends(height: number, svg: any, maxLegendDimensions: number[], chartTitleHeight: number, width: number, legendMargin: number, formatOptions: TDefaultChartFormatOptionsType, seriesData: TSeries[], chartId: string, legendShape: string): void;
+export declare function drawLegends(height: number, svg: any, maxLegendDimensions: number[], chartTitleHeight: number, width: number, legendMargin: number, formatOptions: TDefaultChartFormatOptionsType, inputSeries: TSeries[], chartId: string, legendShape: string): void;
 /**
  * @param {string[]} list - Array of legend strings.
  * @param {TDefaultChartFormatOptionsType} formatOptions - Chart formatting options including legend font size and family.
@@ -236,3 +236,4 @@ export declare const convertStringToNumber: (value: any) => any;
 export declare function generalizedChartData(chartData: any, dimensionList?: any): any;
 export declare const getJQuerySelector: (strSeletor?: string) => string;
 export declare const connectorNumberFormat: (numerator: any, denominator: any, decimalValues: any, numberFormat: any, x: any, y: any, formatOptions: TDefaultChartFormatOptionsType) => any;
+export declare const getHoverId: (inputText: string) => string;

package/dist/Components/Charts/Core/DefaultProperties.types.d.ts

@@ -564,6 +564,7 @@ export declare const defaultChartFormatOptions: {
         dataTableNumberFormat: string;
         dataTableDecimalPrecision: string;
         dataTableDisplayUnits: string;
+        dataTableLabelColor: string;
     };
     dataTableOuterBorder: {
         borderButtonVisibility: boolean;

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,
@@ -11730,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;
@@ -13044,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);
           }
@@ -13062,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,
@@ -13612,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,
@@ -14461,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,
@@ -14592,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) => {
@@ -14613,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);
@@ -14625,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(
@@ -14996,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;
@@ -16086,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,
@@ -18142,7 +18156,7 @@ const StackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -18463,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);
@@ -18515,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);
     });
@@ -18862,7 +18876,7 @@ const NormalizedStackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  ).reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -20932,7 +20946,7 @@ const StackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21472,7 +21486,7 @@ const NormalisedStackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21774,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, "-"));
@@ -22472,7 +22486,7 @@ const StackHorizontalChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = true;
   const isSecondaryAxisDrawn = false;
@@ -23162,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;
@@ -23316,6 +23330,7 @@ const NormalizedStackHorizontalBarChart = ({
       margin,
       yTitle,
       yLabel,
+      void 0,
       xTitle,
       xLabel
     );
@@ -23455,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(
@@ -25424,7 +25439,7 @@ const StackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -25777,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);
@@ -25992,7 +26007,7 @@ const NormalizedStackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -26306,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);
@@ -26835,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(
@@ -27199,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(

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

@@ -11407,7 +11407,8 @@
       dataTableFontStyle: [],
       dataTableNumberFormat: ",",
       dataTableDecimalPrecision: "2",
-      dataTableDisplayUnits: "None"
+      dataTableDisplayUnits: "None",
+      dataTableLabelColor: "#000000"
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11733,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;
@@ -13047,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);
             }
@@ -13065,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,
@@ -13615,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,
@@ -14464,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,
@@ -14595,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) => {
@@ -14616,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);
@@ -14628,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(
@@ -14999,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;
@@ -16089,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,
@@ -18145,7 +18159,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -18466,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);
@@ -18518,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);
       });
@@ -18865,7 +18879,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    ).reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -20935,7 +20949,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21475,7 +21489,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21777,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, "-"));
@@ -22475,7 +22489,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -23165,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;
@@ -23319,6 +23333,7 @@
         margin,
         yTitle,
         yLabel,
+        void 0,
         xTitle,
         xLabel
       );
@@ -23458,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(
@@ -25427,7 +25442,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -25780,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);
@@ -25995,7 +26010,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -26309,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);
@@ -26838,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(
@@ -27202,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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS",
   "license": "MIT",
   "type": "module",