pace-chart-lib 0.0.12 → 1.0.1

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

@@ -10,8 +10,9 @@ import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, dra
 // initYaxisRight,
 commonAnnotations, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const AreaChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.area;
     const svgRef = useRef();
@@ -103,7 +104,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -141,7 +142,7 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -168,14 +169,11 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {
@@ -483,7 +481,7 @@ const AreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, })
     };
     const drawAreaChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         commonAnnotations(seriesData, xScale, yScaleLeft, undefined, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

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

@@ -8,16 +8,15 @@ import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, lineMarkers, onHoverMarkerForAreaChartFamily, } from "../../Core/CommonFunctions";
 import { addDataTable, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const NormalizedStackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const NormalizedStackAreaChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackArea100;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -113,7 +112,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -198,13 +197,11 @@ const NormalizedStackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
         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"
+        const formatedDimensionList = isDateType
             ? 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]]));
+        chartJSON.formattedDimensionListMap = new Map(chartJSON.dimensionList.map((d, i) => [d, formatedDimensionList[i]]));
         // let secondaryAxisMinValue = 0;
         // let secondaryAxisMaxValue = 0;
         // if (isSecondaryAxisDrawn) {
@@ -481,7 +478,7 @@ const NormalizedStackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, fo
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

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

@@ -5,19 +5,18 @@ import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
 import { staticLegendShape } from "../../Core/Common.types";
-import { drawLegends, generalizedChartData, lineMarkers, onHoverMarkerForAreaChartFamily, } from "../../Core/CommonFunctions";
+import { drawLegends, generalizedChartData, lineMarkers, onHoverMarkerForAreaChartFamily } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, drawSeriesLabels, firstFunctionBeforeRender, getCurveType, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const StackAreaChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const barWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackArea;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -107,7 +106,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -186,13 +185,11 @@ const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
         }
         chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
         chartJSON.yMaxLeft = yMaxLeft;
-        let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;
@@ -481,7 +478,7 @@ const StackAreaChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

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

@@ -1,7 +1,7 @@
 import * as d3 from "d3";
 import { TSeries } from "../Core/Common.types";
 import { TDefaultChartFormatOptionsType } from "../Core/DefaultProperties.types";
-import { IXaxisData, TChartJSON, TMargin } from "./ChartsWithAxisTypes.types";
+import { TChartJSON, TMargin } from "./ChartsWithAxisTypes.types";
 /**
  * Dynamically calculates the width and height of a text element rendered with given styles.
  * Optionally supports text rotation and fixed width wrapping.
@@ -56,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, xAxisObject: any, isBarChart?: 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, isDateType: boolean, isBarChart?: boolean): {
     margin: TMargin;
     yLabel: any;
     xLabel: number;
@@ -332,7 +332,7 @@ export declare function responsiveXaxisLabel(dimensionList: string[], innerWidth
  *
  * @returns {any} The updated SVG group element (`gTag`) with the initialized X axis.
  */
-export declare function initXaxis(gTag: any, chartJSON: TChartJSON, xLabel: number, formatOptions: TDefaultChartFormatOptionsType, xAxisObj: IXaxisData, dataTableHeight: number, yScaleLeft: any, xAxis: any, dimensionHeightWidthArray: number[], height: number, barWidth: number, dataType: string, innerWidth: number, innerHeight: number, filteredDimensionList: string[]): any;
+export declare function initXaxis(gTag: any, chartJSON: TChartJSON, xLabel: number, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: number, yScaleLeft: any, xAxis: any, dimensionHeightWidthArray: number[], height: number, barWidth: number, isDateType: string, innerWidth: number, innerHeight: number, filteredDimensionList: string[]): any;
 export declare function detectBrowserName(): string;
 /**
  * Formats date dimension marks based on the specified format and datasource.
@@ -620,7 +620,7 @@ export declare const initXaxisBar: (formatOptions: TDefaultChartFormatOptionsTyp
  *
  * @returns {void} This function does not return a value; it modifies the chart by rendering or adjusting axes.
  */
-export declare const initYaxisBar: (formatOptions: TDefaultChartFormatOptionsType, gTag: any, xLabel: number, innerHeight: number, innerWidth: number, yAxis: any, xAxisTop: any, xScaleBottom: any, yMaxLeft: number, dimensionList: string[], chartType: string, xAxisObject: any, width: number, dimensionHeightWidthArray: number[], columnWidth: number) => void;
+export declare const initYaxisBar: (formatOptions: TDefaultChartFormatOptionsType, gTag: any, xLabel: number, innerHeight: number, innerWidth: number, yAxis: any, xAxisTop: any, xScaleBottom: any, yMaxLeft: number, dimensionList: string[], chartType: string, isDateType: any, width: number, dimensionHeightWidthArray: number[], columnWidth: number) => void;
 export declare const dataLabelsPositionForBarChartFamily: (formatOptions: TDefaultChartFormatOptionsType, xCordinate: number, position: number, xScale: any, minValue: number, prevValue?: number, chartType?: string, isSensitivityChart?: boolean, axis?: string) => any;
 export declare const initXaxisTop: (formatOptions: TDefaultChartFormatOptionsType, gTag: any, xLabelSecondary: number, xAxisTop: any) => void;
 export declare const xAxisTitleTop: (formatOptions: TDefaultChartFormatOptionsType, svg: any, margin: TMargin, isSecondaryAxisDrawn: boolean, xLabelSecondary: number, xTitleSecondary: number) => void;

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

@@ -139,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, xAxisObject, isBarChart) {
+export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, yMaxLeft, formatOptions, legendList, dimensionList, yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, isBarChart) {
     try {
         // min svg height/width final values are yet to decide.
         let isDataTableDrawnWithAxis = formatOptions.dataTableProperties &&
@@ -161,16 +161,15 @@ export function marginCalculation(windowWidth, windowHeight, maxNumberForPrimary
             : legend?.includes("-")
                 ? legend?.slice(legend.indexOf("-") + 1).length
                 : legend?.length);
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, dimensionList).map((d) => d)
             : dimensionList;
-        let maxDimension = formatedDimesionList
-            ? formatedDimesionList[0] + ""
+        let maxDimension = formatedDimensionList
+            ? formatedDimensionList[0] + ""
             : "";
         let maxDimensionLength = maxDimension.length;
-        formatedDimesionList &&
-            formatedDimesionList.forEach((dim) => {
+        formatedDimensionList &&
+            formatedDimensionList.forEach((dim) => {
                 dim = dim + "";
                 let length = dim.trim()?.length || 0;
                 if (length > maxDimensionLength) {
@@ -1237,19 +1236,16 @@ export function responsiveXaxisLabel(dimensionList, innerWidth) {
  *
  * @returns {any} The updated SVG group element (`gTag`) with the initialized X axis.
  */
-export function initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, dataType, innerWidth, innerHeight, filteredDimensionList) {
+export function initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, isDateType, innerWidth, innerHeight, filteredDimensionList) {
     try {
         let responsiveDimList = chartJSON.chartType !== actualChartTypes.columnHistogram ? responsiveXaxisLabel(filteredDimensionList, innerWidth) : [];
-        let xAxisObject = xAxisObj;
         let formatedResponsiveDimList = [];
         let actualDimesionWidth = dimensionHeightWidthArray[0] + 5;
         let maxDimensionWidth = dimensionHeightWidthArray[3] + 10;
         if (chartJSON.chartType != actualChartTypes.waterfall && chartJSON.chartType != actualChartTypes.columnHistogram) {
-            formatedResponsiveDimList =
-                (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                    dataType === "DATE"
-                    ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d)
-                    : responsiveDimList;
+            formatedResponsiveDimList = isDateType
+                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d)
+                : responsiveDimList;
         }
         else {
             responsiveDimList.forEach((item) => {
@@ -4693,15 +4689,14 @@ export const initXaxisBar = (formatOptions, gTag, yLabel, innerHeight, innerWidt
  *
  * @returns {void} This function does not return a value; it modifies the chart by rendering or adjusting axes.
  */
-export const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, yMaxLeft, dimensionList, chartType, xAxisObject, width, dimensionHeightWidthArray, columnWidth) => {
+export const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, xAxisTop, xScaleBottom, yMaxLeft, dimensionList, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth) => {
     try {
         let fontStyle = formatOptions.xAxisLabel.xAxisLabelFontStyle;
         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"
+        let formatedResponsiveDimList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => d)).map((d) => d)
             : responsiveDimList;
         gTag

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

@@ -52,11 +52,9 @@ export declare enum actualChartTypes {
     radialBarChart = "RadialBarChart"
 }
 export type TChartProps = {
-    title?: string;
     data: TData;
-    yAxisObj: IYaxisData[];
-    xAxisObj: IXaxisData[];
-    chartId: string;
+    isDateType: any;
+    chartId?: string;
     formatOptions?: TDefaultChartFormatOptionsType;
 };
 export type TChartJSON = {

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

@@ -8,8 +8,9 @@ import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOn
 import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, initYaxisRight, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
 import { staticLegendShape, } from "../../Core/Common.types";
-const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const ColumnChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.column;
     const svgRef = useRef();
@@ -102,7 +103,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -134,7 +135,7 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -161,14 +162,11 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {
@@ -487,7 +485,7 @@ const ColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions,
     };
     const drawColumnChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         commonAnnotations(seriesData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

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

@@ -3,13 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as d3 from "d3";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { responsiveXaxisLabelForNumericValue } from "../../ChartsWithoutAxis/ChartsWithoutAxisFunctions";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, responsiveYaxisLabel, setChartTitle, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
+import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, responsiveYaxisLabel, setChartTitle, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-import { responsiveXaxisLabelForNumericValue } from "../../ChartsWithoutAxis/ChartsWithoutAxisFunctions";
-const ColumnHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const ColumnHistogramChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     const columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.columnHistogram;
     const svgRef = useRef();
@@ -107,7 +108,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -137,7 +138,7 @@ const ColumnHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, format
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let cumulativeDataPoints = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
@@ -388,7 +389,7 @@ const ColumnHistogramChart = ({ title, data, yAxisObj, xAxisObj, chartId, format
     };
     const drawColumnChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         // commonAnnotations(
         //     seriesData,
         //     xScale,

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

@@ -4,12 +4,13 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLineStyle } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, lineMarkers, onHoverMarkerForAreaChartFamily, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, initYaxisRight, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, getCurveType, getStackedData, commonAnnotationsForCustomChart, } from "../ChartsWithAxisFunctions";
+import { addDataTable, commonAnnotationsForCustomChart, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getCurveType, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, initYaxisRight, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLineStyle, } from "../../Core/Common.types";
-const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const CustomColumnChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // for column width calculation
     let stackChartData = [];
     const chartType = actualChartTypes.customColumnChart;
@@ -116,7 +117,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -150,7 +151,7 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -210,14 +211,11 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         if (!formatOptions.plotArea.fitChart) {
             filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
@@ -972,7 +970,7 @@ const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOpt
     };
     const drawCustomChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         commonAnnotationsForCustomChart(filteredData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, stackColumnData, stackAreaData, [], //labelExcludeList
         [], // individualLabelColor

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

@@ -4,12 +4,13 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, commonAnnotations, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
+import { addDataTable, commonAnnotations, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveSecondaryYaxisLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const LayeredColumnChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chartO
     const chartType = actualChartTypes.layeredColumnChart;
     const svgRef = useRef();
@@ -102,7 +103,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -140,7 +141,7 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
     const preProcessChartData = () => {
         const allChartData = [];
         const legendList = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         let yMaxLeft = -Infinity;
         let yMinLeft = Infinity;
         let yMaxRight = -Infinity;
@@ -166,14 +167,11 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
         chartJSON.yMaxRight = yMaxRight;
         chartJSON.yMinRight = yMinRight;
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((dim, i) => {
-            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
         });
         filteredData = JSON.parse(JSON.stringify(seriesData));
         if (!formatOptions.plotArea.fitChart) {
@@ -468,7 +466,7 @@ const LayeredColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOp
     };
     const drawColumnChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         commonAnnotations(seriesData, xScale, yScaleLeft, undefined, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,

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

@@ -4,20 +4,19 @@ import * as d3 from "d3";
 import * as d3Annotation from "d3-svg-annotation";
 import { useEffect, useRef } from "react";
 import { logError } from "../../../../Services/ErrorLog";
+import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle, yAxistitleRight, } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-import { staticLegendShape } from "../../Core/Common.types";
-const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const NormalizedStackColumnChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID();
     let columnWidth = 0; // coz line chart
     const chartType = actualChartTypes.stackColumn100;
     const svgRef = useRef();
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
     const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
     const isSecondaryAxisDrawn = false;
     let isPrimaryAxisDrawn = true;
     let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
@@ -107,7 +106,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, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -185,13 +184,11 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
         }
         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"
+        let formatedDimensionList = isDateType
             ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
             : chartJSON.dimensionList;
         chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
         });
         if (formatOptions.plotArea.hideZeroValues) {
             chartJSON.hideZeroValues = true;
@@ -499,7 +496,7 @@ const NormalizedStackColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId,
     const drawLineChart = () => {
         // filteredData.forEach((data) => getChartType([data]));
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, filteredDimension);
         stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // need to pass secondary axis scale if secondary axis is drawn
         margin, d3Annotation, [], //this.labelExcludeList,
         [], //this.individualLabelColor,