pace-chart-lib 0.0.9 → 0.0.11

package/dist/components/Charts/ChartsWithAxis/AreaFamily/AreaChart.js

@@ -103,7 +103,7 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -164,7 +164,7 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
         chartJSON.chartData = allChartData;
         chartJSON.legendList = legendList;
         chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
@@ -172,7 +172,7 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
         formatedDimesionList =
             (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
                 xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
                 : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
             chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
@@ -197,9 +197,10 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,

package/dist/components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart.js

@@ -113,7 +113,7 @@ const NormalizedStackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -195,13 +195,13 @@ const NormalizedStackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
                 yMinLeft = Math.min(yMinLeft, start);
             }
         }
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = 1; // as per your original override
         // Format dimensions
         const xAxisObject = xAxisObj[0];
         const formatedDimesionList = (xAxisObject.groupBy === "NA" || xAxisObject.groupBy === undefined) &&
             xAxisObject.dataType === "DATE"
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         // Assign formatted dimension list map (cleanest one-liner)
         chartJSON.formattedDimensionListMap = new Map(chartJSON.dimensionList.map((d, i) => [d, formatedDimesionList[i]]));

package/dist/components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart.js

@@ -107,7 +107,7 @@ const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -184,12 +184,12 @@ const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
                 yMaxLeft = Math.max(yMaxLeft, end);
             }
         }
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
         let xAxisObject = xAxisObj[0];
         let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
             xAxisObject.dataType === "DATE"
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
             chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
@@ -236,9 +236,10 @@ const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,

package/dist/components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.d.ts

@@ -40,6 +40,8 @@ export declare function getYAxisLabel(formatOptions: TDefaultChartFormatOptionsT
  * @param {string[]} dimensionList - Array of dimension labels used for X-axis.
  * @param {number} yMaxRight - Maximum value for scaling the secondary Y-axis.
  * @param {boolean} isSecondaryAxisDrawn - Flag indicating whether the secondary Y-axis is displayed.
+ * @param {any} xAxisObj - Object containing properties related to the X-axis.
+ * @param {boolean} isBarChart - Flag indicating whether the chart is a bar chart.
  *
  * @returns {{
  *   margin: TMargin,
@@ -54,7 +56,7 @@ export declare function getYAxisLabel(formatOptions: TDefaultChartFormatOptionsT
  *   secondaryAxisTitleWidth: number
  * }} Object containing calculated margins and supporting layout measurements.
  */
-export declare function marginCalculation(windowWidth: number, windowHeight: number, maxNumberForPrimaryAxis: number, maxNumberForSecondaryAxis: number, yMaxLeft: number, formatOptions: TDefaultChartFormatOptionsType, legendList: string[], dimensionList: string[], yMaxRight: number, isSecondaryAxisDrawn: boolean, isNormalizedChart: boolean): {
+export declare function marginCalculation(windowWidth: number, windowHeight: number, maxNumberForPrimaryAxis: number, maxNumberForSecondaryAxis: number, yMaxLeft: number, formatOptions: TDefaultChartFormatOptionsType, legendList: string[], dimensionList: string[], yMaxRight: number, isSecondaryAxisDrawn: boolean, isNormalizedChart: boolean, xAxisObject: any, isBarChart?: boolean): {
     margin: TMargin;
     yLabel: any;
     xLabel: number;
@@ -380,10 +382,11 @@ export declare function setXaxistitle(formatOptions: TDefaultChartFormatOptionsT
  * @param {TMargin} margin - Margins around the chart.
  * @param {number} yTitle - Height allocated for the Y-axis title element.
  * @param {number} yLabel - Offset for the Y-axis label, used for positioning.
+ * @param {number} width - Width allocated for the Y-axis title element.
  *
  * @returns {any} The SVG selection with the appended Y-axis title.
  */
-export declare function yAxistitle(innerHeight: number, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: number, barChart: boolean, svg: any, margin: TMargin, yTitle: number, yLabel: number): any;
+export declare function yAxistitle(innerHeight: number, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: number, barChart: boolean, svg: any, margin: TMargin, yTitle: number, yLabel: number, width?: number): any;
 /**
  * Adds a Y-axis title on the right side (secondary axis) of the chart,
  * handling visibility, positioning, rotation, and styling based on format options.

package/dist/components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.js

@@ -123,6 +123,8 @@ export function getYAxisLabel(formatOptions, maxLegendLength) {
  * @param {string[]} dimensionList - Array of dimension labels used for X-axis.
  * @param {number} yMaxRight - Maximum value for scaling the secondary Y-axis.
  * @param {boolean} isSecondaryAxisDrawn - Flag indicating whether the secondary Y-axis is displayed.
+ * @param {any} xAxisObj - Object containing properties related to the X-axis.
+ * @param {boolean} isBarChart - Flag indicating whether the chart is a bar chart.
  *
  * @returns {{
  *   margin: TMargin,
@@ -137,7 +139,7 @@ export function getYAxisLabel(formatOptions, maxLegendLength) {
  *   secondaryAxisTitleWidth: number
  * }} Object containing calculated margins and supporting layout measurements.
  */
-export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, yMaxLeft, formatOptions, legendList, dimensionList, yMaxRight, isSecondaryAxisDrawn, isNormalizedChart) {
+export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, yMaxLeft, formatOptions, legendList, dimensionList, yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObject, isBarChart) {
     try {
         // min svg height/width final values are yet to decide.
         let isDataTableDrawnWithAxis = formatOptions.dataTableProperties &&
@@ -146,8 +148,8 @@ export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimary
         // &&
         // chartsWithDataTableArray.includes(chartType);
         let isChartScrollable = !formatOptions.plotArea.fitChart;
-        let width = windowWidth < 200 ? 200 : windowWidth;
-        let height = windowHeight < 200 ? 200 : windowHeight;
+        let width = windowWidth < 200 ? 200 : isBarChart ? windowHeight : windowWidth;
+        let height = windowHeight < 200 ? 200 : isBarChart ? windowWidth : windowHeight;
         let margin = { top: 0, left: 0, right: 0, bottom: 0 };
         let width15Percent = width * 0.15 * 0.8;
         let maxLegendWidth = calculateMaxLegendWidth(legendList, formatOptions);
@@ -159,8 +161,10 @@ export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimary
             : legend?.includes("-")
                 ? legend?.slice(legend.indexOf("-") + 1).length
                 : legend?.length);
-        // (xAxisObject.GroupBy == "NA" || xAxisObject.GroupBy == undefined)  ? parentReference.dataModifierService.setDateFormats(xAxisObject.Name.nameformatOptions.xAxisLabel.xAxisNumberFormat,chartData.dimensionList.map(d=>[d]),xAxisObject.Name.dataSourceId).map(d=> d[0]): chartData.dimensionList;
-        let formatedDimesionList = dimensionList;
+        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
+            xAxisObject.dataType === "DATE"
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, dimensionList).map((d) => d)
+            : dimensionList;
         let maxDimension = formatedDimesionList
             ? formatedDimesionList[0] + ""
             : "";
@@ -227,38 +231,49 @@ export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimary
             legendPosition = "None";
         // if (chartType == "Waterfall" && !stackDataForTotals)
         //   legendPosition = "None";
+        let xAxisRelatedMargin = isBarChart ? (yTitle + yLabel) : (xTitle + xLabel);
+        let yAxisRelatedMargin = isBarChart ? (xTitle + xLabel) : (yTitle + yLabel);
+        // Swap xTitle <-> yTitle and xLabel <-> yLabel for bar charts
+        if (isBarChart) {
+            const tempTitle = xTitle;
+            xTitle = yTitle;
+            yTitle = tempTitle;
+            const tempLabel = xLabel;
+            xLabel = yLabel;
+            yLabel = tempLabel;
+        }
         switch (legendPosition) {
             case staticLegendPosition.none:
                 // margin.top = (formatOptions.type == "Waterfall") ? Ctitle + 10 : Ctitle + (normalizedChart ? 12 : 0);
                 margin.top = chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
-                margin.bottom = xTitle + xLabel + 5 + (isChartScrollable ? 20 : 0);
+                margin.bottom = xAxisRelatedMargin + 5 + (isChartScrollable ? 20 : 0);
                 margin.right =
                     15 + (isSecondaryAxisDrawn ? secondaryYLabel + secondaryAxisTitleWidth : 0);
-                margin.left = yTitle + yLabel + 5;
+                margin.left = yAxisRelatedMargin + 5;
                 break;
             case staticLegendPosition.top:
                 margin.top = 40 + chartTitleHeight + (isNormalizedChart ? 12 : 0);
-                margin.bottom = xTitle + xLabel + 5 + (isChartScrollable ? 20 : 0);
+                margin.bottom = xAxisRelatedMargin + 5 + (isChartScrollable ? 20 : 0);
                 margin.right =
                     15 + (isSecondaryAxisDrawn ? secondaryYLabel + secondaryAxisTitleWidth : 0);
-                margin.left = yTitle + yLabel + 5;
+                margin.left = yAxisRelatedMargin + 5;
                 break;
             case staticLegendPosition.right:
                 margin.right = legendMargin + (isSecondaryAxisDrawn ? secondaryYLabel + secondaryAxisTitleWidth : 0) + 35;
                 margin.top = chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
-                margin.bottom = xTitle + xLabel + 5 + (isChartScrollable ? 20 : 0);
-                margin.left = yTitle + yLabel + 5;
+                margin.bottom = xAxisRelatedMargin + 5 + (isChartScrollable ? 20 : 0);
+                margin.left = yAxisRelatedMargin + 5;
                 break;
             case staticLegendPosition.bottom:
-                margin.bottom = 40 + xLabel + xTitle + (isChartScrollable ? 20 : 0);
+                margin.bottom = 40 + xAxisRelatedMargin + (isChartScrollable ? 20 : 0);
                 margin.top = chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
                 margin.right = 15 + (isSecondaryAxisDrawn ? secondaryYLabel + secondaryAxisTitleWidth : 0);
-                margin.left = yTitle + yLabel + 5;
+                margin.left = yAxisRelatedMargin + 5;
                 break;
             case staticLegendPosition.left:
-                margin.left = legendMargin + yTitle + yLabel + 33;
+                margin.left = legendMargin + yAxisRelatedMargin + 33;
                 margin.top = chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
-                margin.bottom = xTitle + xLabel + 5 + (isChartScrollable ? 20 : 0);
+                margin.bottom = xAxisRelatedMargin + 5 + (isChartScrollable ? 20 : 0);
                 margin.right = 15 + (isSecondaryAxisDrawn ? secondaryYLabel + secondaryAxisTitleWidth : 0);
         }
         // margin.top = margin.top > 25 ? margin.top : 25;
@@ -487,7 +502,7 @@ export function customYscaleLabelFormatting(formatOptions, YminLeft, YmaxLeft, Y
         ? getNumberWithFormat(secondaryCustomYaxisMinValue, formatOptions.secondaryYAxisLabel.secondaryYAxisDisplayUnits, formatOptions.secondaryYAxisLabel.secondaryYAxisNumberFormat, formatOptions.secondaryYAxisLabel.secondaryYAxisLabelDecimalPrecision ?? "2").toString().length
         : 0;
     // primary scale : margin adjustments
-    let maxNumberForPrimaryAxis = yMinLength < yMaxLength ? YmaxLeft : YminLeft;
+    let maxNumberForPrimaryAxis = yMinLength < yMaxLength ? YmaxLeft : yMinLength === yMaxLength ? YmaxLeft : YminLeft;
     if (customYaxisMinValue) {
         let tempLength = customYaxisMinValueLength < yMaxLength ? YmaxLeft : customYaxisMinValue;
         maxNumberForPrimaryAxis =
@@ -1000,7 +1015,7 @@ export function getLabelsFromAlgo(dataMin, dataMax, axisLengthPx, labelWidthPx =
     if (dataRange === 0) {
         return [dataMin];
     }
-    const maxLabels = dataRange < 10 ? dataRange : Math.max(2, Math.floor(axisLengthPx / labelWidthPx));
+    const maxLabels = dataRange < 10 ? 10 : Math.max(2, Math.floor(axisLengthPx / labelWidthPx));
     const rawInterval = dataRange / maxLabels;
     const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
     const niceNumbers = [1, 1.5, 2, 2.5, 5, 10];
@@ -1233,7 +1248,7 @@ export function initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj, data
             formatedResponsiveDimList =
                 (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
                     dataType === "DATE"
-                    ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d[0])
+                    ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d)
                     : responsiveDimList;
         }
         else {
@@ -1623,10 +1638,11 @@ export function setXaxistitle(formatOptions, barChart, svg, margin, xLabel, heig
  * @param {TMargin} margin - Margins around the chart.
  * @param {number} yTitle - Height allocated for the Y-axis title element.
  * @param {number} yLabel - Offset for the Y-axis label, used for positioning.
+ * @param {number} width - Width allocated for the Y-axis title element.
  *
  * @returns {any} The SVG selection with the appended Y-axis title.
  */
-export function yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel) {
+export function yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel, width) {
     try {
         let currentInnerHeight = dataTableHeight > 0
             ? innerHeight - dataTableHeight
@@ -4341,10 +4357,10 @@ export function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight,
                     break;
                 case "6":
                     chartData.forEach((d) => {
-                        let annotationVisibility = d.properties.individualAnnotationVisibility;
+                        let annotationVisibility = d.individualAnnotationVisibility;
                         switch (annotationVisibility) {
                             case "1":
-                                for (let i = 0; i < chartData[0].data.length; i++) {
+                                for (let i = 0; i < chartData[0].length; i++) {
                                     labelData.push(d[i]);
                                 }
                                 break;
@@ -4355,11 +4371,11 @@ export function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight,
                                 labelData.push(d[0]);
                                 break;
                             case "4":
-                                labelData.push(d[chartData[0].data.length - 1]);
+                                labelData.push(d[chartData[0].length - 1]);
                                 break;
                             case "5":
                                 labelData.push(d[0]);
-                                labelData.push(d[chartData[0].data.length - 1]);
+                                labelData.push(d[chartData[0].length - 1]);
                                 break;
                         }
                     });
@@ -4683,19 +4699,20 @@ export const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight, innerWidt
         let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
         let responsiveDimList = responsiveXaxisLabel(dimensionList, innerWidth);
         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 = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
             xAxisObject.dataType === "DATE"
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d[0])
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d)
             : responsiveDimList;
         gTag
             .append("rect")
-            .attr("transform", chartType === actualChartTypes.tornadoChart ? `translate(${-xLabel - 20},0)` : `translate(${xaxisLabelPosition === 0
-            ? (-xLabel - 5)
+            .attr("transform", chartType === actualChartTypes.tornadoChart ? `translate(${-xLabelMargin - 20},0)` : `translate(${xaxisLabelPosition === 0
+            ? (-xLabelMargin - 5)
             : xaxisLabelPosition === 1
                 ? innerWidth
-                : (xScaleBottom(0) + (-xLabel - 5))},0)`)
+                : (xScaleBottom(0) + (-xLabelMargin - 5))},0)`)
             .attr("height", innerHeight)
-            .attr("width", chartType === actualChartTypes.tornadoChart ? xLabel + 20 : xLabel + 5)
+            .attr("width", chartType === actualChartTypes.tornadoChart ? xLabelMargin + 20 : xLabelMargin + 5)
             .attr("fill", formatOptions.xAxisLabel.xAxisLabelVisibility
             ? formatOptions.xAxisLabel.xAxisBackgroundColor
                 ? formatOptions.xAxisLabel.xAxisBackgroundColor !== "#ffffff"
@@ -4714,10 +4731,10 @@ export const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight, innerWidt
             let foreignObject = YaxisG.selectAll("g")
                 .append("foreignObject")
                 .attr("class", "testingoverflowing")
-                .attr("width", ((formatOptions.xAxisLabel.xAxisLabelRotation == 0) && !formatOptions.xAxisLabel.labelTextWrap) ? labelWidth : xLabel)
+                .attr("width", xLabelMargin)
                 .attr("height", "20px")
                 .attr("transform", `rotate(${90 - formatOptions.xAxisLabel.xAxisLabelRotation})
-          translate(${formatOptions.xAxisLabel.xAxisLabelRotation != 0 ? `${xaxisLabelPosition === 1 ? 10 : -xLabel},${-10}` : -labelWidth / 2 + " ,2"})`);
+          translate(${formatOptions.xAxisLabel.xAxisLabelRotation != 0 ? `${xaxisLabelPosition === 1 ? 10 : -xLabelMargin},${-10}` : -labelWidth / 2 + " ,2"})`);
             foreignObject
                 .append("xhtml:h3")
                 .style("white-space", "pre")

package/dist/components/Charts/ChartsWithAxis/ChartsWithAxisTypes.types.d.ts

@@ -57,7 +57,7 @@ export type TChartProps = {
     yAxisObj: IYaxisData[];
     xAxisObj: IXaxisData[];
     chartId: string;
-    formatOptions: TDefaultChartFormatOptionsType;
+    formatOptions?: TDefaultChartFormatOptionsType;
 };
 export type TChartJSON = {
     dimensionList: string[];

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/ColumnChart.js

@@ -102,7 +102,7 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -157,7 +157,7 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
         chartJSON.chartData = allChartData;
         chartJSON.legendList = legendList;
         chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
@@ -165,7 +165,7 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
         formatedDimesionList =
             (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
                 xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
                 : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
             chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
@@ -190,9 +190,10 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/ColumnHistogramChart.js

@@ -107,7 +107,7 @@ const ColumnHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, format
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -152,7 +152,7 @@ const ColumnHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, format
         chartJSON.chartData = allChartData;
         chartJSON.legendList = legendList;
         chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         filteredData = JSON.parse(JSON.stringify(seriesData));
         filteredData.forEach((d) => d.data.forEach((j) => cumulativeDataPoints.push(j.value)));
         let yMin = (customYaxisMinValue || customYaxisMinValue == 0) ? customYaxisMinValue : 0;

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/CustomColumnChart.js

@@ -116,7 +116,7 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -206,7 +206,7 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
         chartJSON.chartData = tempChartData;
         chartJSON.legendList = legendList;
         chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
@@ -214,7 +214,7 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
         formatedDimesionList =
             (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
                 xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
                 : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
             chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
@@ -325,9 +325,10 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/LayeredColumnChart.js

@@ -102,7 +102,7 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -162,7 +162,7 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
         chartJSON.chartData = allChartData;
         chartJSON.legendList = legendList;
         chartJSON.yMaxLeft = yMaxLeft;
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
@@ -170,7 +170,7 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
         formatedDimesionList =
             (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
                 xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
                 : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
             chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
@@ -201,9 +201,10 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/NormalizedStackColumnChart.js

@@ -107,7 +107,7 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -183,12 +183,12 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
                 yMinLeft = Math.min(yMinLeft, start);
             }
         }
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = 1; // as per your original override
         let xAxisObject = xAxisObj[0];
         let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
             xAxisObject.dataType === "DATE"
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
             chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
@@ -291,7 +291,7 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
             .scaleBand()
             .domain(filteredDimension)
             .range(calculatedRange)
-            .padding(0.5);
+            .padding(0.3 * parseFloat(formatOptions.plotArea.plotAreaGapWidth) / 100);
     };
     const initAxis = () => {
         getXAxis();
@@ -522,6 +522,7 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
         stackChartData.forEach((K, j) => K.forEach((d) => {
             d["key"] = K.key;
             K["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
+            K["individualAnnotationVisibility"] = JSON.parse(JSON.stringify(seriesData[j].properties.individualAnnotationVisibility));
             d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
             d.data["labelColor"] =
                 seriesColor == "2"

package/dist/components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart.js

@@ -107,7 +107,7 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -175,12 +175,12 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
                 yMaxLeft = Math.max(yMaxLeft, end);
             }
         }
-        chartJSON.yMinLeft = yMinLeft;
+        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
         let xAxisObject = xAxisObj[0];
         let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
             xAxisObject.dataType === "DATE"
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d[0])
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
             chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
@@ -227,9 +227,10 @@ const StackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpti
             yScaleLeft = d3
                 .scaleLinear()
                 .domain([
-                customYaxisMinValue !== undefined &&
-                    !Number.isNaN(customYaxisMinValue)
-                    ? customYaxisMinValue
+                chartJSON.yMinLeft >= 0 ?
+                    customYaxisMinValue !== undefined &&
+                        !Number.isNaN(customYaxisMinValue)
+                        ? customYaxisMinValue : 0
                     : chartJSON.yMinLeft < 0
                         ? chartJSON.yMinLeft * 1.1
                         : chartJSON.yMinLeft * 0.9,