pace-chart-lib 1.0.8 → 1.0.10

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;
@@ -15770,6 +15777,7 @@
   const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, height, maxLegendDimensions, margins, isVennChart = false) => {
     try {
       let legendPosition = chartFormatOptions.legends.legendPosition;
+      legendPosition = chartFormatOptions.legends.legendVisibility ? chartFormatOptions.legends.legendPosition : staticLegendPosition.none;
       let width15Percent = width * 0.15 * 0.8;
       let legendListWidth = isVennChart ? maxLegendDimensions[0] : width15Percent < maxLegendDimensions[0] + 15 ? width15Percent : maxLegendDimensions[0] + 15;
       let chartTitleHeight = chartFormatOptions.chartTitle.chartTitleVisibility ? chartFormatOptions.chartTitle.dynamicTitleText.length !== 0 ? preCalculateTextDimensions(
@@ -15783,10 +15791,10 @@
       ).height : 5;
       switch (legendPosition) {
         case staticLegendPosition.none:
-          margins.top = chartTitleHeight + 20;
-          margins.bottom = 50;
-          margins.right = 50;
-          margins.left = 50;
+          margins.top = chartTitleHeight + 10;
+          margins.bottom = 15;
+          margins.right = 15;
+          margins.left = 15;
           break;
         case staticLegendPosition.top:
           margins.top = chartTitleHeight + 50;
@@ -16089,6 +16097,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,
@@ -16667,7 +16682,10 @@
     let stackChartData = [];
     const chartType = actualChartTypes.customColumnChart;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const seriesData = generalizedChartData(
+      data.ChartData,
+      data.DimensionList
+    );
     const dimensionList = data.DimensionList;
     const barChart = false;
     let isSecondaryAxisDrawn = false;
@@ -17158,7 +17176,9 @@
           )
         ).tickSize(
           formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+        ).tickValues(
+          responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+        ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
       if (isSecondaryAxisDrawn) {
         yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -18145,7 +18165,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -18466,7 +18486,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 +18538,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 +18885,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    ).reverse();
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -19888,7 +19908,7 @@
   function logError$1(fileName2, functionName, error) {
     console.error(`[${fileName2}] [${functionName}]`, error);
   }
-  const ColumnHistogramChart = ({
+  const ColumnHistogramChart$1 = ({
     isDateType,
     formatOptions,
     data
@@ -19897,7 +19917,7 @@
     const columnWidth = 0;
     const chartType = actualChartTypes.columnHistogram;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const seriesData = data.ChartData;
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -20191,7 +20211,8 @@
     };
     const initScale = () => {
       xScale = linear$1().domain([chartJSON.xMin, chartJSON.xMax]).range([0, innerWidth2]);
-      let histogram = bin().value((d) => d).domain(xScale.domain()).thresholds(periods && periods.length || xScale.ticks(thresholds));
+      const numberOfBins = periods.length > 0 ? periods : xScale.ticks(thresholds);
+      let histogram = bin().value((d) => d).domain(xScale.domain()).thresholds(numberOfBins);
       filteredData.forEach((d) => {
         let tempArray = histogram(d.data.map((val) => val.value));
         bins.push(tempArray);
@@ -20249,7 +20270,7 @@
         )
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : parseFloat(formatOptions.plotArea.ticksHeight) * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) : 0 : 0
-      ).tickValues(labelArray).ticks(innerWidth2 / 30).tickPadding(8).tickSizeOuter(0);
+      ).tickSizeOuter(0);
       formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
     };
     const getChartType = (lineData) => {
@@ -20281,6 +20302,7 @@
           event2
         );
       }).on("mouseout", hideTooltipOnMouseOut);
+      gTag.selectAll(".parentGroup").raise();
     };
     const setSVGContainer = (margin2) => {
       innerWidth2 = width - margin2.left - margin2.right;
@@ -20300,7 +20322,6 @@
             (d) => filteredDimension.includes(d.dimension)
           )
         );
-        getXAxis();
         svg2.append("rect").attr("x", margin2.left).attr("y", scrollbarY).attr("width", innerWidth22).attr("height", 8).attr("fill", "#ddd").attr("rx", 4);
         const handleWidth = innerWidth22 * visibleBars / chartJSON.dimensionList.length;
         const handle = svg2.append("rect").attr("x", margin2.left).attr("y", scrollbarY).attr("width", handleWidth).attr("height", 8).attr("fill", "#999").attr("rx", 4).style("cursor", "ew-resize").call(
@@ -20347,7 +20368,6 @@
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      getChartType();
       initXaxis$1(
         gTag,
         chartJSON,
@@ -20364,6 +20384,7 @@
         innerHeight2,
         filteredDimension
       );
+      getChartType();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
@@ -20935,7 +20956,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21475,7 +21496,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -21777,7 +21798,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 +22496,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse();
     const dimensionList = data.DimensionList;
     const barChart = true;
     const isSecondaryAxisDrawn = false;
@@ -23165,7 +23186,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 +23340,7 @@
         margin,
         yTitle,
         yLabel,
+        void 0,
         xTitle,
         xLabel
       );
@@ -23458,7 +23480,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(
@@ -24298,26 +24320,28 @@
       }
     ) });
   };
-  const HorizontalHistogramChart = ({
+  const ColumnHistogramChart = ({
     isDateType,
     formatOptions,
     data
   }) => {
     const chartId = crypto.randomUUID();
-    let columnWidth = 0;
-    const chartType = actualChartTypes.horizontalBar;
+    const columnWidth = 0;
+    const chartType = actualChartTypes.columnHistogram;
     const svgRef = require$$0$1.useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const seriesData = data.ChartData;
     const dimensionList = data.DimensionList;
-    const barChart = true;
-    let isSecondaryAxisDrawn = false;
+    const barChart = false;
+    const isSecondaryAxisDrawn = false;
     const isNormalizedChart = false;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
     let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
-    let secondaryCustomYaxisMinValue = parseFloat(
+    let customXaxisMinValue = parseFloat(formatOptions.xAxisLabel.xAxisMinText);
+    let customXaxisMaxValue = parseFloat(formatOptions.xAxisLabel.xAxisMaxText);
+    parseFloat(
       formatOptions.secondaryYAxisLabel.secondaryYAxisMinText
     );
-    let secondaryCustomYaxisMaxValue = parseFloat(
+    parseFloat(
       formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText
     );
     let margin;
@@ -24334,21 +24358,21 @@
     let maxNumberForSecondaryAxis;
     let innerWidth2;
     let innerHeight2;
+    let thresholds;
+    let periods = [];
+    let bins = [];
     let width;
     let height;
     let dataTable;
     let dataTableHeight;
     let svg;
     let gTag;
-    let yScale;
-    let yScaleLegends;
-    let xScaleBottom;
-    let xScaleTop;
+    let yScaleLeft;
+    let xScale;
+    let xScaleForLegends;
     let calculatedRange;
-    let seriesLabelWidth;
-    let xAxisBottom;
-    let xAxisTop;
-    let yAxis;
+    let yAxisLeft;
+    let xAxis;
     let filteredDimension;
     let filteredData = [];
     let scrollPosition = 0;
@@ -24369,12 +24393,12 @@
     };
     require$$0$1.useEffect(() => {
       try {
-        createHorizontalBarChart();
+        createColumnChart();
       } catch (error) {
-        logError$2("HorizontalBarchart", "createHorizontalBarChart", error);
+        logError$2("Columnchart", "createColumnChart", error);
       }
     }, [formatOptions]);
-    const createHorizontalBarChart = () => {
+    const createColumnChart = () => {
       ({ formatOptions, svg, width, height } = firstFunctionBeforeRender$1(
         svgRef,
         formatOptions
@@ -24412,8 +24436,7 @@
         chartJSON.yMaxRight,
         isSecondaryAxisDrawn,
         isNormalizedChart,
-        isDateType,
-        barChart
+        isDateType
       ));
       setSVGContainer(margin);
       ({ dataTable, dataTableHeight } = dataTablePreCalculation(
@@ -24440,33 +24463,17 @@
         innerHeight2,
         chartType
       );
+      binsCalculation();
       initScale();
       initAxis();
-      initYaxisBar(
-        formatOptions,
+      initYaxis$1(
         gTag,
-        xLabel,
-        innerHeight2,
-        innerWidth2,
-        yAxis,
-        xAxisTop,
-        xScaleBottom,
-        chartJSON.yMaxLeft,
-        filteredDimension,
-        chartType,
-        isDateType,
-        width,
-        dimensionHeightWidthArray,
-        columnWidth
+        formatOptions,
+        dataTableHeight,
+        yLabel,
+        yAxisLeft,
+        innerHeight2
       );
-      if (isSecondaryAxisDrawn) {
-        initXaxisTop(
-          formatOptions,
-          gTag,
-          secondaryYLabel,
-          xAxisTop
-        );
-      }
       horizontalScrollBar2(seriesData, height, svg, margin, innerWidth2);
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         if (formatOptions.xAxisLabel.xAxisPosition != "1")
@@ -24477,9 +24484,9 @@
           gTag,
           dataTable,
           columnWidth,
-          xAxisBottom,
-          yScale,
-          yScaleLegends,
+          yScaleLeft,
+          xScale,
+          xScaleForLegends,
           void 0,
           void 0,
           dataTableHeight,
@@ -24547,117 +24554,109 @@
     const preProcessChartData = () => {
       const allChartData = [];
       const legendList = [];
-      let formatedDimensionList = [];
+      let cumulativeDataPoints = [];
       let yMaxLeft = -Infinity;
       let yMinLeft = Infinity;
-      let yMaxRight = -Infinity;
-      let yMinRight = Infinity;
       seriesData.forEach((series) => {
         legendList.push(series.legend);
         series.data.forEach((point2) => {
           allChartData.push(point2);
-          if (series.properties.axis === "Secondary") {
-            isSecondaryAxisDrawn = true;
-            yMaxRight = Math.max(yMaxRight, point2.value);
-            yMinRight = Math.min(yMinRight, point2.value);
-          } else {
-            yMaxLeft = Math.max(yMaxLeft, point2.value);
-            yMinLeft = Math.min(yMinLeft, point2.value);
-          }
+          yMaxLeft = Math.max(yMaxLeft, point2.value);
+          yMinLeft = Math.min(yMinLeft, point2.value);
         });
       });
       chartJSON.chartData = allChartData;
       chartJSON.legendList = legendList;
       chartJSON.yMaxLeft = yMaxLeft;
       chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
-      chartJSON.yMaxRight = yMaxRight;
-      chartJSON.yMinRight = yMinRight;
-      formatedDimensionList = isDateType ? setDateFormats(
-        formatOptions.xAxisLabel.xAxisNumberFormat,
-        chartJSON.dimensionList
-      ).map((d) => d) : chartJSON.dimensionList;
-      chartJSON.dimensionList.forEach((dim, i) => {
-        chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
-      });
       filteredData = JSON.parse(JSON.stringify(seriesData));
-      if (!formatOptions.plotArea.fitChart) {
-        filteredDimension = chartJSON.dimensionList.slice(
-          scrollPosition,
-          scrollPosition + visibleBars
-        );
-      } else {
-        filteredDimension = chartJSON.dimensionList;
-      }
-      if (formatOptions.plotArea.hideZeroValues) {
-        chartJSON.hideZeroValues = true;
-      }
+      filteredData.forEach(
+        (d) => d.data.forEach((j) => cumulativeDataPoints.push(j.value))
+      );
+      let yMin = customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0;
+      let yMax = customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : filteredData[0]?.data?.length;
+      chartJSON.yMaxLeft = parseFloat((yMin + "").length > (yMax + "").length ? yMin + "" : yMax + "");
+      chartJSON.xMax = max$2(cumulativeDataPoints);
+      chartJSON.xMin = min$2(cumulativeDataPoints);
     };
-    const initScale = () => {
-      let yAxisLabelArray = responsiveYaxisLabel$1(
-        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-        chartJSON.yMinLeft,
-        innerHeight2,
-        formatOptions,
-        chartJSON,
-        customYaxisMinValue,
-        customYaxisMaxValue
-      ).yAxisLabelArray;
-      chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
-      chartJSON.yMinLeft = yAxisLabelArray[0];
-      {
-        xScaleBottom = linear$1().domain([
-          chartJSON.yMinLeft >= 0 ? customYaxisMinValue !== void 0 && !Number.isNaN(customYaxisMinValue) ? customYaxisMinValue : 0 : chartJSON.yMinLeft < 0 ? chartJSON.yMinLeft * 1.1 : chartJSON.yMinLeft * 0.9,
-          chartJSON.yMaxLeft <= 0 ? 0 : customYaxisMaxValue !== void 0 && !Number.isNaN(customYaxisMaxValue) ? customYaxisMaxValue : chartJSON.yMaxLeft * 1.1
-        ]).range([
-          0,
-          dataTableHeight > 0 ? innerWidth2 - dataTableHeight : innerWidth2
-        ]);
+    const binsCalculation = () => {
+      switch (formatOptions.bins.binsCalculation) {
+        case "Automatic":
+          thresholds = innerWidth2 / 50;
+          break;
+        case "Number of Bins":
+          calculatingPeriodsWithBins(false);
+          break;
+        case "Bin Width":
+          calculatingPeriodsWithBins(true);
       }
-      if (isSecondaryAxisDrawn) {
-        xScaleTop = linear$1().domain([
-          chartJSON.yMinRight >= 0 ? (secondaryCustomYaxisMinValue || secondaryCustomYaxisMinValue == 0) && !Number.isNaN(secondaryCustomYaxisMinValue) ? secondaryCustomYaxisMinValue : 0 : (secondaryCustomYaxisMinValue || secondaryCustomYaxisMinValue == 0) && !Number.isNaN(secondaryCustomYaxisMinValue) ? secondaryCustomYaxisMinValue : chartJSON.yMinRight * 1.1,
-          chartJSON.yMaxRight <= 0 ? secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : 0 : secondaryCustomYaxisMaxValue ? secondaryCustomYaxisMaxValue : chartJSON.yMaxRight * 1.1
-        ]).range([
-          0,
-          dataTableHeight > 0 ? innerWidth2 - dataTableHeight : innerWidth2
-        ]);
+    };
+    const calculatingPeriodsWithBins = (isWithWidth) => {
+      filteredData.forEach(
+        (d) => d.data.sort(function(a2, b) {
+          return a2.value - b.value;
+        })
+      );
+      let range2 = chartJSON.xMax - chartJSON.xMin;
+      let tempPeriod;
+      if (isWithWidth) {
+        parseFloat(formatOptions.bins.binsCalculationValue) <= 2 && (formatOptions.bins.binsCalculationValue = "3");
+        tempPeriod = range2 / parseFloat(formatOptions.bins.binsCalculationValue);
+      } else {
+        parseFloat(formatOptions.bins.binsCalculationValue) <= 1 && (formatOptions.bins.binsCalculationValue = "1");
+        tempPeriod = range2 / parseFloat(formatOptions.bins.binsCalculationValue);
       }
-      calculatedRange = [innerHeight2, 0];
-      if (formatOptions.seriesLabel.seriesLabelVisibility) {
-        let labelObj = prepareDataForSeriesLabel(
-          innerWidth2,
-          xScaleBottom,
-          formatOptions,
-          filteredData,
-          xScaleTop,
-          isSecondaryAxisDrawn
-        );
-        labelObj.labelArray;
-        formatOptions.seriesLabel.seriesLabelPosition == "Right" && (seriesLabelWidth = labelObj.heightWidth[0]);
-        formatOptions.seriesLabel.seriesLabelPosition == "Right" ? calculatedRange = [0, innerHeight2 - labelObj.heightWidth[0]] : calculatedRange = [labelObj.heightWidth[0], innerHeight2];
+      let currentElement = chartJSON.xMin;
+      if (isWithWidth) {
+        periods = [currentElement];
+        while (currentElement < chartJSON.xMax) {
+          currentElement += tempPeriod;
+          periods.push(currentElement);
+        }
+      } else {
+        periods = [currentElement];
+        while (Math.round(currentElement) < Math.round(chartJSON.xMax)) {
+          currentElement += tempPeriod;
+          periods.push(Math.round(currentElement));
+        }
       }
-      getYScale();
     };
-    const getYScale = () => {
-      columnWidth = (0.51 + 0.61 * (100 - parseFloat(formatOptions.plotArea.plotAreaGapWidth)) / 100) * (innerHeight2 / filteredDimension.length);
-      yScaleLegends = band().domain(chartJSON.legendList).range([0, columnWidth]).paddingInner(
-        chartJSON.legendList.length > 1 ? 0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth) / 100 : 0
+    const initScale = () => {
+      xScale = linear$1().domain([chartJSON.xMin, chartJSON.xMax]).range([0, innerWidth2]);
+      const numberOfBins = periods.length > 0 ? periods : xScale.ticks(thresholds);
+      let histogram = bin().value((d) => d).domain(xScale.domain()).thresholds(numberOfBins);
+      filteredData.forEach((d) => {
+        let tempArray = histogram(d.data.map((val) => val.value));
+        bins.push(tempArray);
+      });
+      filteredData.forEach(
+        (d, i) => bins[i].forEach((j) => {
+          j["name"] = d.properties["legend"];
+          j["color"] = d.properties["color"];
+          j["opacity"] = d.properties["opacity"];
+        })
       );
-      yScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
+      let cumulativeLength = [];
+      bins.forEach((d) => d.forEach((j) => cumulativeLength.push(j.length)));
+      chartJSON.yMaxLeft = max$2(cumulativeLength);
+      chartJSON.yMinLeft = min$2(cumulativeLength);
+      yScaleLeft = linear$1().range([innerHeight2, 0]).domain([customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0, customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft]);
     };
     const initAxis = () => {
-      getYAxis();
+      getXAxis();
       {
         let responsiveLablesObj = responsiveYaxisLabel$1(
-          customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+          chartJSON.yMaxLeft,
           chartJSON.yMinLeft,
           innerHeight2,
           formatOptions,
           chartJSON,
           customYaxisMinValue,
-          customYaxisMaxValue
+          customYaxisMaxValue,
+          false,
+          innerWidth2
         );
-        xAxisBottom = axisBottom(xScaleBottom).tickFormat(
+        yAxisLeft = axisLeft(yScaleLeft).tickFormat(
           (d) => getNumberWithFormat(
             d,
             formatOptions.yAxisLabel.yAxisDisplayUnits,
@@ -24665,116 +24664,57 @@
             formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
           )
         ).tickSize(
-          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
         ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
-      if (isSecondaryAxisDrawn) {
-        xAxisTop = axisTop(xScaleTop).tickFormat(
-          (d) => getNumberWithFormat(
-            d,
-            formatOptions.secondaryYAxisLabel.secondaryYAxisDisplayUnits,
-            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(
-          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-        ).tickPadding(8).tickSizeOuter(0);
-      }
     };
-    const getYAxis = () => {
-      yAxis = axisLeft(yScale).tickSize(
+    const getXAxis = () => {
+      let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
+      let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerWidth2, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight2, false).xAxisLabelArray;
+      labelArray.shift();
+      xAxis = (xaxisLabelPosition == 1 ? axisTop(xScale) : axisBottom(xScale)).tickFormat(
+        (d) => getNumberWithFormat(
+          d,
+          formatOptions.xAxisLabel.xAxisDisplayUnits,
+          formatOptions.xAxisLabel.xAxisNumberFormat,
+          formatOptions.xAxisLabel.xAxisLabelDecimalPrecision,
+          false
+        )
+      ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : parseFloat(formatOptions.plotArea.ticksHeight) * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) : 0 : 0
-      ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerHeight2));
+      ).tickSizeOuter(0);
+      formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
     };
     const getChartType = (lineData) => {
-      lineData.forEach((lData) => {
-        lData.data.forEach((cData) => {
-          cData.hideZero = lData.properties.hideZeroValues;
-          cData.axis = lData.properties.axis;
-        });
-      });
-      lineData.forEach((data2) => {
-        let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
-        column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
-        let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-        let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
-          "hoverId",
-          (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
-        ).attr(
-          "transform",
-          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
-        );
-        columnGroups.attr(
-          "transform",
-          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
-        );
-        columnGroupsEnter.merge(columnGroups).attr(
-          "transform",
-          (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`
+      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor).attr(
+        "stroke-width",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness
+      ).attr(
+        "stroke-opacity",
+        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity
+      ).attr("x", 1).attr("transform", function(d) {
+        return "translate(" + xScale(d.x0) + "," + (yScaleLeft(d.length) > 0 ? yScaleLeft(d.length) : 0) + ")";
+      }).attr("width", function(d) {
+        return xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth) < 0 ? 0 : xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth);
+      }).attr("height", function(d) {
+        return innerHeight2 - yScaleLeft(d.length);
+      }).style("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+        showTooltipOnMouseMove(
+          [
+            {
+              key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~") ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1] : formatOptions.xAxisTitle.xAxisTitleText,
+              value: `${d["x0"]}-${d["x1"]}`
+            },
+            {
+              key: formatOptions.yAxisTitle.yAxisTitleText,
+              value: getNumberWithFormat(formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, false)
+            }
+          ],
+          formatOptions,
+          event2
         );
-        columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legend)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
-          const requiredXScale = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
-          return d.value > 0 ? requiredXScale(0) : requiredXScale(d.value);
-        }).attr("width", (d) => {
-          const requiredXScale = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
-          const requiredCustomValue = data2.properties.axis === "Primary" ? customYaxisMaxValue : secondaryCustomYaxisMaxValue;
-          return d.value > 0 ? requiredCustomValue && d.value > requiredCustomValue ? requiredXScale(requiredCustomValue) - requiredXScale(0) : requiredXScale(d.value) - requiredXScale(0) : Math.abs(requiredXScale(0) - requiredXScale(d.value));
-        }).attr("fill", data2.properties.color).attr(
-          "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
-          "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
-        ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
-          "visibility",
-          (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-        ).on("mousemove", (event2, d) => {
-          showTooltipOnMouseMove(
-            [
-              {
-                key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~") ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1] : formatOptions.xAxisTitle.xAxisTitleText,
-                value: chartJSON.formattedDimensionListMap.get(
-                  Array.isArray(d.dimension) ? d.dimension[0] : d.dimension
-                )
-              },
-              {
-                key: formatOptions.yAxisTitle.yAxisTitleText || d.value,
-                value: getNumberWithFormat(
-                  [
-                    actualChartTypes.stackLine100,
-                    actualChartTypes.stackArea100,
-                    ""
-                  ].includes(chartType) ? d[1] - d[0] : d.value,
-                  formatOptions.toolTip.toolTipDisplayUnits,
-                  formatOptions.toolTip.toolTipNumberFormat,
-                  formatOptions.toolTip.toolTipDecimalPrecision
-                )
-              },
-              {
-                key: "Legend",
-                value: d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend
-              }
-            ],
-            formatOptions,
-            event2
-          );
-        }).on("mouseout", hideTooltipOnMouseOut);
-        columnGroups.exit().remove();
-      });
+      }).on("mouseout", hideTooltipOnMouseOut);
+      gTag.selectAll(".parentGroup").raise();
     };
     const setSVGContainer = (margin2) => {
       innerWidth2 = width - margin2.left - margin2.right;
@@ -24788,14 +24728,12 @@
           scrollPosition,
           scrollPosition + visibleBars
         );
-        getYScale();
         filteredData = JSON.parse(JSON.stringify(seriesData2));
         filteredData.forEach(
           (data2, i) => filteredData[i].data = data2.data.filter(
             (d) => filteredDimension.includes(d.dimension)
           )
         );
-        getYAxis();
         svg2.append("rect").attr("x", margin2.left).attr("y", scrollbarY).attr("width", innerWidth22).attr("height", 8).attr("fill", "#ddd").attr("rx", 4);
         const handleWidth = innerWidth22 * visibleBars / chartJSON.dimensionList.length;
         const handle = svg2.append("rect").attr("x", margin2.left).attr("y", scrollbarY).attr("width", handleWidth).attr("height", 8).attr("fill", "#999").attr("rx", 4).style("cursor", "ew-resize").call(
@@ -24812,14 +24750,13 @@
               scrollPosition,
               scrollPosition + visibleBars
             );
-            getYScale();
             filteredData = JSON.parse(JSON.stringify(seriesData2));
             filteredData.forEach(
               (data2, i) => filteredData[i].data = data2.data.filter(
                 (d) => filteredDimension.includes(d.dimension)
               )
             );
-            getYAxis();
+            getXAxis();
             drawColumnChart();
           })
         );
@@ -24830,57 +24767,36 @@
           scrollPosition = Math.max(0, Math.min(scrollPosition, scrollMax));
           const x2 = margin2.left + (innerWidth22 - handleWidth) * scrollPosition / scrollMax;
           handle.attr("x", x2);
-          getYScale();
           filteredData = JSON.parse(JSON.stringify(seriesData2));
           filteredData.forEach(
             (data2, i) => filteredData[i].data = data2.data.filter(
               (d) => filteredDimension.includes(d.dimension)
             )
           );
-          getYAxis();
+          getXAxis();
           drawColumnChart();
         });
       }
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      getChartType(filteredData);
-      initXaxisBar(
-        formatOptions,
+      initXaxis$1(
         gTag,
-        yLabel,
-        innerHeight2,
-        innerWidth2,
-        xAxisBottom
-      );
-      commonAnnotations(
-        filteredData,
-        yScale,
-        xScaleBottom,
-        xScaleTop,
-        // need to pass secondary axis scale if secondary axis is drawn
-        margin,
-        d3Annotation,
-        [],
-        //this.labelExcludeList,
-        [],
-        //this.individualLabelColor,
-        [],
-        //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
+        chartJSON,
+        xLabel,
         formatOptions,
-        chartType,
+        dataTableHeight,
+        yScaleLeft,
+        xAxis,
+        dimensionHeightWidthArray,
         height,
-        width,
+        columnWidth,
+        isDateType,
         innerWidth2,
-        filteredDimension,
         innerHeight2,
-        chartId,
-        svg,
-        yScaleLegends,
-        columnWidth,
-        false,
-        barChart
+        filteredDimension
       );
+      getChartType();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
@@ -25427,7 +25343,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -25780,7 +25696,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 +25911,7 @@
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
-    );
+    )?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
     const isSecondaryAxisDrawn = false;
@@ -26309,13 +26225,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);
@@ -26703,7 +26619,7 @@
     };
     const defineChartRadius = () => {
       try {
-        radius = Math.min(innerHeight2 * 0.4, innerWidth2 * 0.4);
+        radius = Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5);
         outsideDataLabelFlag ? radius = radius * 0.9 : null;
       } catch (error) {
         logError$2(fileName$8, "defineChartRadius", error);
@@ -26777,16 +26693,20 @@
         return "";
       }
     };
-    const getDataLabelTransformString = (d) => {
+    const getDataLabelTransformString = (d, isSingleDataLabel) => {
       try {
-        const midAngle = (d.startAngle + d.endAngle) / 2;
-        const x2 = Math.cos(midAngle - Math.PI / 2) * (radius * 0.65);
-        const y2 = Math.sin(midAngle - Math.PI / 2) * (radius * 0.65);
-        let rotate = midAngle * 180 / Math.PI % 360;
-        let angle = 0;
-        rotate > 180 && rotate < 360 ? angle = 90 : angle = -90;
-        rotate += angle;
-        return `translate(${x2},${y2}) rotate(${rotate})`;
+        if (isSingleDataLabel) {
+          return `translate(0 0)`;
+        } else {
+          const midAngle = (d.startAngle + d.endAngle) / 2;
+          const x2 = Math.cos(midAngle - Math.PI / 2) * (radius * 0.65);
+          const y2 = Math.sin(midAngle - Math.PI / 2) * (radius * 0.65);
+          let rotate = midAngle * 180 / Math.PI % 360;
+          let angle = 0;
+          rotate > 180 && rotate < 360 ? angle = 90 : angle = -90;
+          rotate += angle;
+          return `translate(${x2},${y2}) rotate(${rotate})`;
+        }
       } catch (error) {
         logError$2(fileName$8, "getDataLabelTransformString", error);
         return "";
@@ -26795,6 +26715,7 @@
     const drawPieDataLabels = () => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
+          const isSingleDataLabel = pieChartData && pieChartData.length === 1;
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
@@ -26813,7 +26734,7 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.labelFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d)).attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
+          ).attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
             const { plotArea } = chartFormatOptions;
             if (plotArea.dataLabelName) {
               return d.data.legend;
@@ -26838,10 +26759,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, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0").text((d) => {
             if (chartFormatOptions.plotArea.dataLabelValue) {
               const dataValue = d.data.data[0].value;
-              if (chartFormatOptions.plotArea.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(
@@ -27050,7 +26971,7 @@
     };
     const defineChartRadius = () => {
       try {
-        radius = Math.min(innerHeight2 * 0.4, innerWidth2 * 0.4);
+        radius = Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5);
         outsideDataLabelFlag ? radius = radius * 0.9 : null;
         innerRadius = Math.min(
           convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100 * radius,
@@ -27140,17 +27061,21 @@
         return "";
       }
     };
-    const getDataLabelTransformString = (d) => {
+    const getDataLabelTransformString = (d, isSingleDataLabel) => {
       try {
-        const midAngle = (d.startAngle + d.endAngle) / 2;
-        const labelRadius = (innerRadius + radius) / 2;
-        const x2 = Math.cos(midAngle - Math.PI / 2) * labelRadius;
-        const y2 = Math.sin(midAngle - Math.PI / 2) * labelRadius;
-        let rotate = midAngle * 180 / Math.PI % 360;
-        let angle = 0;
-        rotate > 180 && rotate < 360 ? angle = 90 : angle = -90;
-        rotate += angle;
-        return `translate(${x2},${y2}) rotate(${rotate})`;
+        if (isSingleDataLabel) {
+          return `translate(0 0)`;
+        } else {
+          const midAngle = (d.startAngle + d.endAngle) / 2;
+          const labelRadius = (innerRadius + radius) / 2;
+          const x2 = Math.cos(midAngle - Math.PI / 2) * labelRadius;
+          const y2 = Math.sin(midAngle - Math.PI / 2) * labelRadius;
+          let rotate = midAngle * 180 / Math.PI % 360;
+          let angle = 0;
+          rotate > 180 && rotate < 360 ? angle = 90 : angle = -90;
+          rotate += angle;
+          return `translate(${x2},${y2}) rotate(${rotate})`;
+        }
       } catch (error) {
         logError$2(fileName$7, "getDataLabelTransformString", error);
         return "";
@@ -27159,6 +27084,7 @@
     const drawDonutDataLabels = () => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
+          const isSingleDataLabel = pieChartData && pieChartData.length === 1;
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
             pieChartData.filter(
               (d) => d.data.properties.dataLabelPosition == "1"
@@ -27177,7 +27103,7 @@
           ).attr(
             "font-family",
             (d) => d.data.properties?.labelFont ?? "Helvetica"
-          ).attr("transform", (d) => getDataLabelTransformString(d)).attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
+          ).attr("transform", (d) => getDataLabelTransformString(d, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("dy", "-0.35em").attr("text-anchor", "middle").attr("alignment-baseline", "middle").text((d) => {
             const { plotArea } = chartFormatOptions;
             if (plotArea.dataLabelName) {
               return d.data.legend;
@@ -27202,10 +27128,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, isSingleDataLabel)).attr("visibility", (d) => d.endAngle - d.startAngle < 0.17 ? "hidden" : "visible").attr("text-anchor", "middle").attr("alignment-baseline", "middle").attr("dy", chartFormatOptions.plotArea.dataLabelName ? "1.00em" : "0").text((d) => {
             if (chartFormatOptions.plotArea.dataLabelValue) {
               const dataValue = d.data.data[0].value;
-              if (chartFormatOptions.plotArea.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(
@@ -54393,11 +54319,11 @@
   exports2.AreaChart = AreaChart;
   exports2.BubbleChart = BubbleChart;
   exports2.ColumnChart = ColumnChart;
-  exports2.ColumnHistogramChart = ColumnHistogramChart;
+  exports2.ColumnHistogramChart = ColumnHistogramChart$1;
   exports2.CustomColumnChart = CustomColumnChart;
   exports2.DonutChart = DonutChart;
   exports2.HorizontalBarChart = HorizontalBarChart;
-  exports2.HorizontalHistogramChart = HorizontalHistogramChart;
+  exports2.HorizontalHistogramChart = ColumnHistogramChart;
   exports2.LayeredColumnChart = LayeredColumnChart;
   exports2.LayeredHorizontalBarChart = LayeredHorizontalBarChart;
   exports2.LineChart = LineChart;