pace-chart-lib 1.0.8 → 1.0.10

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;
@@ -15767,6 +15774,7 @@ const firstFunctionBeforeRender = (svgRef, formatOptions) => {
 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(
@@ -15780,10 +15788,10 @@ const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, heigh
     ).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;
@@ -16086,6 +16094,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,
@@ -16664,7 +16679,10 @@ const CustomColumnChart = ({
   let stackChartData = [];
   const chartType = actualChartTypes.customColumnChart;
   const svgRef = 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;
@@ -17155,7 +17173,9 @@ const CustomColumnChart = ({
         )
       ).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(
@@ -18142,7 +18162,7 @@ const StackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -18463,7 +18483,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 +18535,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 +18882,7 @@ const NormalizedStackColumnChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  ).reverse();
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -19885,7 +19905,7 @@ const setnumberOfBubbles = (svg, legendPosition, chartFormatOptions, height, wid
 function logError$1(fileName2, functionName, error) {
   console.error(`[${fileName2}] [${functionName}]`, error);
 }
-const ColumnHistogramChart = ({
+const ColumnHistogramChart$1 = ({
   isDateType,
   formatOptions,
   data
@@ -19894,7 +19914,7 @@ const ColumnHistogramChart = ({
   const columnWidth = 0;
   const chartType = actualChartTypes.columnHistogram;
   const svgRef = useRef();
-  const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+  const seriesData = data.ChartData;
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -20188,7 +20208,8 @@ const ColumnHistogramChart = ({
   };
   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);
@@ -20246,7 +20267,7 @@ const ColumnHistogramChart = ({
       )
     ).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) => {
@@ -20278,6 +20299,7 @@ const ColumnHistogramChart = ({
         event2
       );
     }).on("mouseout", hideTooltipOnMouseOut);
+    gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
     innerWidth2 = width - margin2.left - margin2.right;
@@ -20297,7 +20319,6 @@ const ColumnHistogramChart = ({
           (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(
@@ -20344,7 +20365,6 @@ const ColumnHistogramChart = ({
     drawColumnChart();
   };
   const drawColumnChart = () => {
-    getChartType();
     initXaxis$1(
       gTag,
       chartJSON,
@@ -20361,6 +20381,7 @@ const ColumnHistogramChart = ({
       innerHeight2,
       filteredDimension
     );
+    getChartType();
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
@@ -20932,7 +20953,7 @@ const StackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21472,7 +21493,7 @@ const NormalisedStackLineChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -21774,7 +21795,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 +22493,7 @@ const StackHorizontalChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse();
   const dimensionList = data.DimensionList;
   const barChart = true;
   const isSecondaryAxisDrawn = false;
@@ -23162,7 +23183,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 +23337,7 @@ const NormalizedStackHorizontalBarChart = ({
       margin,
       yTitle,
       yLabel,
+      void 0,
       xTitle,
       xLabel
     );
@@ -23455,7 +23477,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(
@@ -24295,26 +24317,28 @@ const LayeredHorizontalBarChart = ({
     }
   ) });
 };
-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 = 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;
@@ -24331,21 +24355,21 @@ const HorizontalHistogramChart = ({
   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;
@@ -24366,12 +24390,12 @@ const HorizontalHistogramChart = ({
   };
   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
@@ -24409,8 +24433,7 @@ const HorizontalHistogramChart = ({
       chartJSON.yMaxRight,
       isSecondaryAxisDrawn,
       isNormalizedChart,
-      isDateType,
-      barChart
+      isDateType
     ));
     setSVGContainer(margin);
     ({ dataTable, dataTableHeight } = dataTablePreCalculation(
@@ -24437,33 +24460,17 @@ const HorizontalHistogramChart = ({
       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")
@@ -24474,9 +24481,9 @@ const HorizontalHistogramChart = ({
         gTag,
         dataTable,
         columnWidth,
-        xAxisBottom,
-        yScale,
-        yScaleLegends,
+        yScaleLeft,
+        xScale,
+        xScaleForLegends,
         void 0,
         void 0,
         dataTableHeight,
@@ -24544,117 +24551,109 @@ const HorizontalHistogramChart = ({
   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,
@@ -24662,116 +24661,57 @@ const HorizontalHistogramChart = ({
           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;
@@ -24785,14 +24725,12 @@ const HorizontalHistogramChart = ({
         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(
@@ -24809,14 +24747,13 @@ const HorizontalHistogramChart = ({
             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();
         })
       );
@@ -24827,57 +24764,36 @@ const HorizontalHistogramChart = ({
         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",
@@ -25424,7 +25340,7 @@ const StackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -25777,7 +25693,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 +25908,7 @@ const NormalizedStackAreaChart = ({
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
-  );
+  )?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
   const isSecondaryAxisDrawn = false;
@@ -26306,13 +26222,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);
@@ -26700,7 +26616,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
   };
   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);
@@ -26774,16 +26690,20 @@ const PieChart = ({ data, formatOptions, chartId }) => {
       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 "";
@@ -26792,6 +26712,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
   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"
@@ -26810,7 +26731,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
         ).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;
@@ -26835,10 +26756,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, 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(
@@ -27047,7 +26968,7 @@ const DonutChart = ({
   };
   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,
@@ -27137,17 +27058,21 @@ const DonutChart = ({
       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 "";
@@ -27156,6 +27081,7 @@ const DonutChart = ({
   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"
@@ -27174,7 +27100,7 @@ const DonutChart = ({
         ).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;
@@ -27199,10 +27125,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, 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(
@@ -54391,11 +54317,11 @@ export {
   AreaChart,
   BubbleChart,
   ColumnChart,
-  ColumnHistogramChart,
+  ColumnHistogramChart$1 as ColumnHistogramChart,
   CustomColumnChart,
   DonutChart,
   HorizontalBarChart,
-  HorizontalHistogramChart,
+  ColumnHistogramChart as HorizontalHistogramChart,
   LayeredColumnChart,
   LayeredHorizontalBarChart,
   LineChart,