pace-chart-lib 0.0.7 → 0.0.8

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

@@ -0,0 +1,1014 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//#region Imports
+import * as d3 from "d3";
+import * as d3Annotation from "d3-svg-annotation";
+import { useEffect, useRef } from "react";
+import { logError } from "../../../../Services/ErrorLog";
+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 { actualChartTypes, } from "../ChartsWithAxisTypes.types";
+import { staticLineStyle, } from "../../Core/Common.types";
+const CustomColumnChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+    // adding variables as per requirement
+    let columnWidth = 0; // for column width calculation
+    let stackChartData = [];
+    const chartType = actualChartTypes.customColumnChart;
+    const svgRef = useRef();
+    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
+    const dimensionList = data.DimensionList;
+    const barChart = false;
+    let isSecondaryAxisDrawn = false;
+    const isNormalizedChart = false;
+    let isPrimaryAxisDrawn = true;
+    let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
+    let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
+    let secondaryCustomYaxisMinValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText);
+    let secondaryCustomYaxisMaxValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText);
+    let margin;
+    let yLabel;
+    let xLabel;
+    let yTitle;
+    let xTitle;
+    let dimensionHeightWidthArray;
+    let chartTitleHeight;
+    let secondaryAxisTitleWidth;
+    let legendMargin;
+    let secondaryYLabel;
+    let maxNumberForPrimaryAxis;
+    let maxNumberForSecondaryAxis;
+    let innerWidth;
+    let innerHeight;
+    let width;
+    let height;
+    let dataTable;
+    let dataTableHeight;
+    let svg;
+    let gTag;
+    let yScaleLeft;
+    let yScaleRight;
+    let xScale;
+    let xScaleForLegends;
+    let seriesLabels;
+    let calculatedRange;
+    let seriesLabelWidth;
+    let stackAreaChartDataForPrimaryAxis = [];
+    let stackAreaChartDataForSecondaryAxis = [];
+    let stackColumnChartDataForPrimaryAxis = [];
+    let stackColumnChartDataForSecondaryAxis = [];
+    let primaryStackAxisData = [];
+    let secondaryStackAxisData = [];
+    let primaryStackAreaAxisData = [];
+    let primaryStackColumnAxisData = [];
+    let secondaryStackAreaAxisData = [];
+    let secondaryStackColumnAxisData = [];
+    let stackColumnData = [];
+    let stackAreaData = [];
+    let yAxisLeft;
+    let xAxis;
+    let yAxisRight;
+    let filteredDimension;
+    let filteredData = [];
+    let requiredData = [];
+    let scrollPosition = 0;
+    const visibleBars = 2;
+    let chartJSON = {
+        dimensionList: dimensionList,
+        chartType: chartType,
+        chartData: [],
+        formatOptions: formatOptions,
+        legendList: [],
+        secondaryAxisDrawn: false,
+        yMaxLeft: 0,
+        yMaxRight: 0,
+        yMinLeft: 0,
+        yMinRight: 0,
+        hideZeroValues: false,
+        formattedDimensionListMap: new Map(),
+    };
+    //#region UseEffect
+    useEffect(() => {
+        try {
+            createCustomColumnChart();
+        }
+        catch (error) {
+            logError("CustomColumnchart", "createCustomColumnChart", error);
+        }
+    }, [formatOptions]);
+    //#endregion
+    const createCustomColumnChart = () => {
+        ({ formatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
+        preProcessChartData(); // preaparing data related to chart creation
+        // Applies custom Y-axis label formatting and calculates the necessary margin based on axis extremes.
+        ({ maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } =
+            customYscaleLabelFormatting(
+            // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
+            formatOptions, chartJSON.yMinLeft, chartJSON.yMaxLeft, chartJSON.yMinRight, chartJSON.yMaxRight));
+        ({
+            margin,
+            yLabel,
+            xLabel,
+            yTitle,
+            xTitle,
+            dimensionHeightWidthArray,
+            chartTitleHeight,
+            secondaryAxisTitleWidth,
+            legendMargin,
+            secondaryYLabel,
+        } = marginCalculation(
+        // for all margin related calculations
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart));
+        setSVGContainer(margin); // for innerWidth/height static width/height
+        ({ dataTable, dataTableHeight } = dataTablePreCalculation(
+        // calculations for data tables
+        formatOptions, yLabel, yTitle, seriesData, chartJSON.dimensionList));
+        initSvg(
+        // for svg creation
+        svg, width, height, formatOptions);
+        gTag = initChartArea(svg, margin); // creating chart area
+        initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
+        initScale();
+        initAxis();
+        initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight);
+        if (isSecondaryAxisDrawn) {
+            initYaxisRight(gTag, formatOptions, dataTableHeight, secondaryYLabel, yAxisRight, innerHeight, innerWidth);
+        }
+        horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
+        if (formatOptions.dataTableProperties &&
+            formatOptions.dataTableProperties.dataTable) {
+            if (formatOptions.xAxisLabel.xAxisPosition != "1")
+                formatOptions.xAxisLabel.xAxisLabelVisibility = false;
+            addDataTable(formatOptions.plotArea.fitChart, svg, gTag, dataTable, columnWidth, yScaleLeft, xScale, xScaleForLegends, undefined, undefined, dataTableHeight, chartType, formatOptions, yLabel, yTitle, chartJSON.dimensionList, innerWidth, calculatedRange, chartJSON.formattedDimensionListMap, chartId, margin, innerHeight);
+        }
+        setXaxistitle(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartJSON.chartType, yLabel, innerWidth, innerHeight);
+        yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel);
+        yAxistitleRight(svg, isSecondaryAxisDrawn, margin, formatOptions, dataTableHeight, innerHeight, innerWidth, secondaryYLabel, secondaryAxisTitleWidth); // to be added later
+        setChartTitle(svg, formatOptions, width, chartTitleHeight);
+        drawLegends(height, svg, dimensionHeightWidthArray, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, null
+        // legendShape.rectangle
+        );
+    };
+    const preProcessChartData = () => {
+        const allChartData = [];
+        const legendList = [];
+        let formatedDimesionList = [];
+        let yMaxLeft = -Infinity;
+        let yMinLeft = Infinity;
+        let yMaxRight = -Infinity;
+        let yMinRight = Infinity;
+        let tempChartData = [];
+        seriesData.forEach((series, i) => {
+            if (![actualChartTypes.stackColumn, actualChartTypes.stackArea].includes(series.properties.type)) {
+                tempChartData.push(series);
+                series.properties.type !== actualChartTypes.line &&
+                    legendList.push(series.legend);
+            }
+            else if (!legendList.includes("stackLegend")) {
+                legendList.push(`stackLegend`);
+            }
+            // Determine stack chart data for both axes
+            if (series.properties.axis === "Secondary") {
+                secondaryStackAxisData.push(series);
+                if (series.properties.type == actualChartTypes.stackColumn) {
+                    secondaryStackColumnAxisData.push(series);
+                }
+                if (series.properties.type == actualChartTypes.stackArea) {
+                    secondaryStackAreaAxisData.push(series);
+                }
+            }
+            if (series.properties.axis === "Primary") {
+                primaryStackAxisData.push(series);
+                if (series.properties.type == actualChartTypes.stackColumn) {
+                    primaryStackColumnAxisData.push(series);
+                }
+                if (series.properties.type == actualChartTypes.stackArea) {
+                    primaryStackAreaAxisData.push(series);
+                }
+            }
+            //to determine Y min/max values
+            series.data.forEach((point) => {
+                // add chart type for individual series
+                point.type = series.properties.type;
+                point.axis = series.properties.axis;
+                point.labelPosition = series.properties.dataLabelPosition;
+                point.labelColor = series.properties.labelColor;
+                allChartData.push(point);
+                if (series.properties.axis === "Secondary") {
+                    isSecondaryAxisDrawn = true;
+                    yMaxRight = Math.max(yMaxRight, point.value);
+                    yMinRight = Math.min(yMinRight, point.value);
+                }
+                else {
+                    yMaxLeft = Math.max(yMaxLeft, point.value);
+                    yMinLeft = Math.min(yMinLeft, point.value);
+                }
+            });
+        });
+        chartJSON.chartData = tempChartData;
+        chartJSON.legendList = legendList;
+        chartJSON.yMaxLeft = yMaxLeft;
+        chartJSON.yMinLeft = yMinLeft;
+        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[0])
+                : chartJSON.dimensionList;
+        chartJSON.dimensionList.forEach((dim, i) => {
+            chartJSON.formattedDimensionListMap.set(dim, formatedDimesionList[i]);
+        });
+        if (!formatOptions.plotArea.fitChart) {
+            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
+        }
+        else {
+            filteredDimension = chartJSON.dimensionList;
+        }
+        if (formatOptions.plotArea.hideZeroValues) {
+            chartJSON.hideZeroValues = true;
+        }
+        // check and add data to filteredData for stack type charts
+        checkAndupdateInputData(primaryStackAreaAxisData, primaryStackColumnAxisData, secondaryStackAreaAxisData, secondaryStackColumnAxisData);
+        // check and update ymax values if stack chart is present w.r.t axes
+        if (primaryStackAxisData.length > 0) {
+            let valueArray = [];
+            let stackDataForPrimaryAxis = getStackedData(filteredDimension, primaryStackAxisData, false);
+            stackDataForPrimaryAxis.forEach((d) => {
+                valueArray.push(d.total);
+            });
+            chartJSON.yMaxLeft = Math.max(chartJSON.yMaxLeft, Math.max(...valueArray));
+            chartJSON.yMinLeft = Math.min(chartJSON.yMinLeft, Math.min(...valueArray));
+        }
+        if (secondaryStackAxisData.length > 0) {
+            let valueArray = [];
+            let stackDataForSecondaryAxis = getStackedData(filteredDimension, secondaryStackAxisData, false);
+            stackDataForSecondaryAxis.forEach((d) => {
+                valueArray.push(d.total);
+            });
+            chartJSON.yMaxRight = Math.max(chartJSON.yMaxRight, Math.max(...valueArray));
+            chartJSON.yMinRight = Math.min(chartJSON.yMinRight, Math.min(...valueArray));
+        }
+    };
+    const checkAndupdateInputData = (primaryStackAreaAxisData, primaryStackColumnAxisData, secondaryStackAreaAxisData, secondaryStackColumnAxisData) => {
+        let tempStackAreaChartDataForPrimaryAxis = getStackedData(filteredDimension, primaryStackAreaAxisData, false);
+        let tempStackAreaChartDataForSecondaryAxis = getStackedData(filteredDimension, secondaryStackAreaAxisData, false);
+        let tempStackColumnChartDataForPrimaryAxis = getStackedData(filteredDimension, primaryStackColumnAxisData, false);
+        let tempStackColumnChartDataForSecondaryAxis = getStackedData(filteredDimension, secondaryStackColumnAxisData, false);
+        requiredData = [];
+        stackAreaChartDataForPrimaryAxis = [];
+        stackAreaChartDataForSecondaryAxis = [];
+        stackColumnChartDataForPrimaryAxis = [];
+        stackColumnChartDataForSecondaryAxis = [];
+        // appending addtional properties to stack area chart data
+        if (primaryStackAreaAxisData.length) {
+            primaryStackAreaAxisData.forEach((d) => {
+                stackAreaChartDataForPrimaryAxis.push({
+                    properties: {
+                        axis: d.properties.axis,
+                        type: d.properties.type,
+                        legend: d.properties.legend,
+                    },
+                    stackData: tempStackAreaChartDataForPrimaryAxis,
+                    data: primaryStackAreaAxisData,
+                });
+            });
+        }
+        if (secondaryStackAreaAxisData.length) {
+            secondaryStackAreaAxisData.forEach((d) => {
+                stackAreaChartDataForSecondaryAxis.push({
+                    properties: {
+                        axis: d.properties.axis,
+                        type: d.properties.type,
+                        legend: d.properties.legend,
+                    },
+                    stackData: tempStackAreaChartDataForSecondaryAxis,
+                    data: secondaryStackAreaAxisData,
+                });
+            });
+        }
+        if (primaryStackColumnAxisData.length) {
+            primaryStackColumnAxisData.forEach((d) => {
+                stackAreaChartDataForSecondaryAxis.push({
+                    properties: {
+                        axis: d.properties.axis,
+                        type: d.properties.type,
+                        legend: d.properties.legend,
+                    },
+                    stackData: tempStackColumnChartDataForPrimaryAxis,
+                    data: primaryStackColumnAxisData,
+                });
+            });
+        }
+        if (secondaryStackColumnAxisData.length) {
+            secondaryStackColumnAxisData.forEach((d) => {
+                stackColumnChartDataForSecondaryAxis.push({
+                    properties: {
+                        axis: d.properties.axis,
+                        type: d.properties.type,
+                        legend: d.properties.legend,
+                    },
+                    stackData: tempStackColumnChartDataForSecondaryAxis,
+                    data: secondaryStackColumnAxisData,
+                });
+            });
+        }
+        // push these results in filteredData
+        requiredData.push(...chartJSON.chartData, ...stackAreaChartDataForPrimaryAxis, ...stackAreaChartDataForSecondaryAxis, ...stackColumnChartDataForPrimaryAxis, ...stackColumnChartDataForSecondaryAxis);
+    };
+    const initScale = () => {
+        // rounding the ymin & ymax
+        let yAxisLabelArray = responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).yAxisLabelArray;
+        chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
+        chartJSON.yMinLeft = yAxisLabelArray[0];
+        if (isPrimaryAxisDrawn) {
+            yScaleLeft = d3
+                .scaleLinear()
+                .domain([
+                customYaxisMinValue !== undefined &&
+                    !Number.isNaN(customYaxisMinValue)
+                    ? customYaxisMinValue
+                    : chartJSON.yMinLeft < 0
+                        ? chartJSON.yMinLeft * 1.1
+                        : chartJSON.yMinLeft * 0.9,
+                chartJSON.yMaxLeft <= 0
+                    ? 0
+                    : customYaxisMaxValue !== undefined &&
+                        !Number.isNaN(customYaxisMaxValue)
+                        ? customYaxisMaxValue
+                        : chartJSON.yMaxLeft * 1.1,
+            ])
+                .range([
+                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
+                0,
+            ]);
+        }
+        if (isSecondaryAxisDrawn) {
+            // rounding the ymin & ymax
+            let secondaryYAxisLabelArray = responsiveSecondaryYaxisLabel(secondaryCustomYaxisMaxValue
+                ? secondaryCustomYaxisMaxValue
+                : chartJSON.yMaxRight, secondaryCustomYaxisMinValue
+                ? secondaryCustomYaxisMinValue
+                : chartJSON.yMinRight, formatOptions, chartJSON).secondaryYAxisLabelArray;
+            chartJSON.yMaxRight =
+                secondaryYAxisLabelArray[secondaryYAxisLabelArray.length - 1];
+            chartJSON.yMinRight = secondaryYAxisLabelArray[0];
+            yScaleRight = d3
+                .scaleLinear()
+                .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) &&
+                        !Number.isNaN(secondaryCustomYaxisMaxValue)
+                        ? secondaryCustomYaxisMaxValue
+                        : 0
+                    : (secondaryCustomYaxisMaxValue ||
+                        secondaryCustomYaxisMaxValue == 0) &&
+                        !Number.isNaN(secondaryCustomYaxisMaxValue)
+                        ? secondaryCustomYaxisMaxValue
+                        : chartJSON.yMaxRight * 1.1,
+            ])
+                .range([
+                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
+                0,
+            ]);
+        }
+        calculatedRange = [0, innerWidth];
+        if (formatOptions.seriesLabel.seriesLabelVisibility) {
+            let labelObj = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, yScaleRight, isSecondaryAxisDrawn);
+            seriesLabels = labelObj.labelArray;
+            formatOptions.seriesLabel.seriesLabelPosition == "Right" &&
+                (seriesLabelWidth = labelObj.heightWidth[0]);
+            formatOptions.seriesLabel.seriesLabelPosition == "Right"
+                ? (calculatedRange = [0, innerWidth - labelObj.heightWidth[0]])
+                : (calculatedRange = [labelObj.heightWidth[0], innerWidth]);
+        }
+        getXScale();
+    };
+    const getXScale = () => {
+        columnWidth =
+            (0.51 +
+                (0.61 * (100 - parseFloat(formatOptions.plotArea.plotAreaGapWidth))) /
+                    100) *
+                (innerWidth / filteredDimension.length);
+        xScaleForLegends = d3
+            .scaleBand()
+            // .domain(barLegendList.map((d) => d.legend))
+            .domain(chartJSON.legendList)
+            .range([0, columnWidth])
+            .paddingInner(chartJSON.legendList.length > 1
+            ? (0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth)) / 100
+            : 0);
+        xScale = d3
+            .scalePoint()
+            .domain(filteredDimension)
+            .range(calculatedRange)
+            .padding(0.5);
+    };
+    const initAxis = () => {
+        getXAxis();
+        if (isPrimaryAxisDrawn) {
+            yAxisLeft = d3
+                .axisLeft(yScaleLeft)
+                .tickFormat((d) => getNumberWithFormat(d, formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision))
+                .tickSize(formatOptions.plotArea.gridLinesVisibility
+                ? formatOptions.plotArea.gridLinesHorizontal
+                    ? -innerWidth + (seriesLabelWidth ? seriesLabelWidth : 0)
+                    : 0
+                : 0)
+                .tickValues(responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).yAxisLabelArray)
+                .ticks(responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue).customTickValue ??
+                (dataTableHeight > 0
+                    ? (innerHeight - dataTableHeight) / 30
+                    : innerHeight / 30))
+                .tickSizeOuter(0);
+        }
+        if (isSecondaryAxisDrawn) {
+            yAxisRight = d3
+                .axisRight(yScaleRight)
+                .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 ?? innerHeight / 30)
+                .tickSize(formatOptions.plotArea.gridLinesVisibility
+                ? formatOptions.plotArea.gridLinesHorizontal
+                    ? -innerWidth
+                    : 0
+                : 0)
+                .tickSizeOuter(0);
+        }
+    };
+    const getXAxis = () => {
+        xAxis = d3
+            .axisBottom(xScale)
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesVertical
+                ? formatOptions.plotArea.gridLinesVertical
+                    ? -(dataTableHeight > 0
+                        ? innerHeight - dataTableHeight
+                        : innerHeight)
+                    : parseFloat(formatOptions.plotArea.ticksHeight) *
+                        ((dataTableHeight > 0
+                            ? innerHeight - dataTableHeight
+                            : innerHeight) /
+                            100) *
+                        (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
+                : 0
+            : 0)
+            .tickSizeOuter(0)
+            .tickValues(responsiveXaxisLabel(filteredDimension, innerWidth));
+    };
+    const getChartType = (lineData) => {
+        // Bind dummy data to ensure a single group is created
+        lineData.forEach((data) => {
+            switch (data.properties.type) {
+                case actualChartTypes.column:
+                    drawColumnChart(data);
+                    break;
+                case actualChartTypes.line:
+                    drawLineChart([data]);
+                    break;
+                case actualChartTypes.area:
+                    drawAreaChart([data]);
+                    break;
+                case actualChartTypes.stackColumn:
+                    stackColumnData = createStackData(data);
+                    drawStackColumnChart();
+                    break;
+                case actualChartTypes.stackArea:
+                    stackAreaData = createStackData(data);
+                    drawStackAreaChart(data);
+                    break;
+            }
+        });
+    };
+    const drawColumnChart = (data) => {
+        // Step 1: Outer group for the whole chart
+        let column = gTag.selectAll(".parentGroup").data([data], (d) => d.legend); // use key so exit works
+        column = column
+            .enter()
+            .append("g")
+            .attr("class", `column parentGroup`)
+            .merge(column);
+        // Step 2: JOIN each data point inside the series
+        let columnGroups = column
+            .selectAll(".column-group")
+            .data(data.data, (d) => d.legend + d.dimension); // key on dimension + legend
+        // Step 3: ENTER - one group per bar (optional if you need transform)
+        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(${xScale(d.dimension)}, 0)`);
+        // // ✨ Add this to handle UPDATE:
+        columnGroups.attr("transform", (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`);
+        // // Merge ENTER + UPDATE
+        columnGroupsEnter
+            .merge(columnGroups)
+            .attr("transform", (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`);
+        // Step 4: Draw the rects
+        columnGroupsEnter
+            .append("rect")
+            .attr("x", (d) => xScaleForLegends(d.legend))
+            .attr("width", xScaleForLegends.bandwidth())
+            .attr("y", (d) => {
+            const yScale = data.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+            return d.value > 0 ? yScale(d.value) : yScale(0);
+        })
+            .attr("height", (d) => {
+            const yScale = data.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
+            return Math.abs(yScale(d.value) - yScale(0));
+        })
+            .attr("fill", data.properties.color)
+            .attr("stroke-dasharray", (d) => (d.stackBorderStyle === 2 ? "5,3" : "0"))
+            .attr("stroke-width", (d) => `${d.stackBorderWidth}px`)
+            .attr("stroke", (d) => data.properties.stackBorderStyle === 0
+            ? "none"
+            : formatOptions.column.stackBorderVisibility
+                ? data.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", (event, 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, event);
+        })
+            .on("mouseout", hideTooltipOnMouseOut);
+        // Step 5: EXIT - remove old bars
+        columnGroups.exit().remove();
+    };
+    const drawLineChart = (lineData) => {
+        lineData.forEach((lData) => {
+            lData.data.forEach((cData) => {
+                cData.hideZero = lData.properties.hideZeroValues;
+                cData.axis = lData.properties.axis;
+            });
+        });
+        const lineGenerator = d3
+            .line()
+            .x((d) => xScale(d.dimension)
+            ? xScale(d.dimension)
+            : null)
+            .y((d) => d.axis == "Primary"
+            ? yScaleLeft(d.value)
+            : yScaleRight(d.value))
+            .defined((d) => (d.hideZero ? Boolean(d.value) : true))
+            .curve(getCurveType(formatOptions));
+        // Bind dummy data to ensure a single group is created
+        let lines = gTag.selectAll(".parentGroup").data([lineData]);
+        lines = lines
+            .enter()
+            .append("g")
+            .attr("class", "lines parentGroup")
+            .merge(lines);
+        // JOIN: one group per line
+        let lineGroups = lines.selectAll(".line-group").data((d) => d);
+        // ENTER: create group for each new line
+        let lineGroupsEnter = lineGroups
+            .enter()
+            .append("g")
+            .attr("class", "line-group");
+        // Append path to new groups
+        lineGroupsEnter
+            .attr("hoverId", (d) => d.legend.replace(/ /g, "-"))
+            .append("path")
+            .attr("class", "line")
+            .attr("fill", "none");
+        // ENTER + UPDATE
+        lineGroupsEnter
+            .merge(lineGroups)
+            .select("path")
+            .attr("d", (d) => lineGenerator(d.data))
+            .attr("stroke", (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none")
+            .attr("stroke-dasharray", (d) => {
+            switch (d.properties.lineStyle) {
+                case staticLineStyle.dotted:
+                    return "0,3";
+                case staticLineStyle.dashed:
+                    return "20,10,5,5,5,10";
+                default:
+                    return "";
+            }
+        })
+            .attr("stroke-linecap", (d) => d.properties.lineStyle === staticLineStyle.dotted ? "round" : "")
+            .attr("stroke-width", (d) => d.properties.lineStyle !== "None" ? d.properties.lineWidth : "0");
+        // EXIT: remove old groups
+        lineGroups.exit().remove();
+        //Markers
+        lineMarkers(lines, lineData, "CombiLine", xScale, yScaleLeft, yScaleRight, null, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, false);
+    };
+    const drawAreaChart = (lineData) => {
+        const areaGenerator = d3
+            .area()
+            .x((d) => xScale(d.dimension)
+            ? xScale(d.dimension)
+            : null)
+            .y0((d) => 
+        // d.axis == "Primary" ?
+        yScaleLeft(0)
+        // : yScaleRight(0)
+        )
+            .y1((d) => 
+        // d.axis == "Primary" ?
+        yScaleLeft(d.value)
+        // : yScaleRight((d as TDataPoint).value)
+        )
+            .defined((d) => (d.hideZero ? Boolean(d.value) : true))
+            .curve(getCurveType(formatOptions));
+        // Bind dummy data to ensure a single group is created
+        let areas = gTag.selectAll(".parentGroup").data([lineData]);
+        let focus = gTag.append("g").attr("class", "focusClass");
+        areas = areas
+            .enter()
+            .append("g")
+            .attr("class", "areas parentGroup")
+            .merge(areas);
+        // JOIN: one group per line
+        let areaGroups = areas.selectAll(".area-group").data((d) => d);
+        // ENTER: create group for each new line
+        let areaGroupsEnter = areaGroups
+            .enter()
+            .append("g")
+            .attr("class", "area-group");
+        // Append path to new groups
+        areaGroupsEnter
+            .attr("hoverId", (d) => d.legend.replace(/ /g, "-"))
+            .append("path")
+            .attr("class", "area")
+            .attr("fill", (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none")
+            .style("fill-opacity", formatOptions.plotArea.fillOpacity);
+        // ENTER + UPDATE
+        areaGroupsEnter
+            .merge(areaGroups)
+            .select("path")
+            .attr("d", (d) => areaGenerator(d.data))
+            .attr("stroke", (d) => d.properties.areaBorderColor !== "#ffffff"
+            ? d.properties.areaBorderColor
+            : "none")
+            .attr("stroke-dasharray", (d) => {
+            switch (d.properties.lineStyle) {
+                case "dotted":
+                    return "0,3";
+                case "dashed":
+                    return "20,10,5,5,5,10";
+                default:
+                    return "";
+            }
+        })
+            .attr("stroke-linecap", (d) => d.properties.lineStyle === "dotted" ? "round" : "")
+            .attr("stroke-width", (d) => d.properties.lineStyle !== "None" &&
+            formatOptions.plotArea.plotAreaHideLineAndMarkers
+            ? d.properties.lineWidth
+            : "0");
+        onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType);
+        // EXIT: remove old groups
+        areaGroups.exit().remove();
+        //Markers
+        // lineMarkers(
+        //     areas,
+        //     lineData,
+        //     chartType,
+        //     xScale,
+        //     yScaleLeft,
+        //     undefined,
+        //     null,
+        //     formatOptions,
+        //     chartJSON,
+        //     secondaryCustomYaxisMaxValue,
+        //     secondaryCustomYaxisMinValue,
+        //     customYaxisMinValue,
+        //     customYaxisMaxValue
+        // );
+    };
+    const drawStackAreaChart = (data) => {
+        const areaGenerator = d3
+            .area()
+            .x((d) => xScale(d.data.dimension)
+            ? xScale(d.data.dimension)
+            : null)
+            .y0((d) => d.data.axis == "Primary" ? yScaleLeft(0) : yScaleRight(0))
+            .y1((d) => d.data.axis == "Primary"
+            ? d[1] > 0
+                ? yScaleLeft(d[1])
+                : yScaleLeft(d[0])
+            : d[1] > 0
+                ? yScaleRight(d[1])
+                : yScaleRight(d[0]))
+            .defined((d) => (d.hideZero ? Boolean(d.key) : true))
+            .curve(getCurveType(formatOptions));
+        // Bind dummy data to ensure a single group is created
+        let areas = gTag.selectAll(".parentGroup").data([stackAreaData]);
+        let focus = gTag.append("g").attr("class", "focusClass");
+        areas = areas
+            .enter()
+            .append("g")
+            .attr("class", "areas parentGroup")
+            .merge(areas);
+        // JOIN: one group per line
+        let areaGroups = areas.selectAll(".area-group").data((d) => d);
+        // ENTER: create group for each new line
+        let areaGroupsEnter = areaGroups
+            // .data((d) => d.stackData)
+            .enter()
+            .append("g")
+            .attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
+        // .attr("class", (d) => d.key.replace(/ /g, "-"));
+        areaGroupsEnter
+            .attr("hoverId", (d) => d.key.includes("~$~")
+            ? d.key.split("~$~")[1].replace(/ /g, "-")
+            : d.key.replace(/ /g, "-"))
+            .append("path")
+            .attr("class", "area")
+            .attr("fill", (d) => (d.color !== "#ffffff" ? d.color : "none"));
+        // ENTER + UPDATE
+        areaGroupsEnter
+            .merge(areaGroups)
+            .select("path")
+            .attr("d", (d, i) => areaGenerator(d))
+            .style("opacity", formatOptions.plotArea.fillOpacity)
+            .attr("stroke", (d) => (d.color !== "#ffffff" ? d.color : "none"))
+            // .style("visibility", (d,i) => (this.individualLegendStyle[i].hideZero && d[i].data[d.key] === 0) ? "hidden" : "visible")
+            .attr("stroke-dasharray", (d, i) => seriesData[i].properties.lineStyle === "dotted"
+            ? "0,3"
+            : seriesData[i].properties.lineStyle === "dashed"
+                ? "20,10,5,5,5,10"
+                : "")
+            .attr("stroke-linecap", (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "round" : "")
+            .attr("stroke-width", (d, i) => seriesData[i].properties.lineStyle !== "None"
+            ? seriesData[i].properties.lineWidth
+            : "0");
+        // onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType);
+        // EXIT: remove old groups
+        areaGroups.exit().remove();
+        // Markers
+        lineMarkers(areas, data.data, "CombiStackArea", xScale, yScaleLeft, yScaleRight, null, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, false);
+    };
+    const drawStackColumnChart = () => {
+        let stackColumns = gTag.selectAll(".parentGroup").data([stackColumnData]);
+        stackColumns = stackColumns
+            .enter()
+            .append("g")
+            .attr("class", "stackcolumns parentGroup")
+            .merge(stackColumns);
+        // JOIN: one group per stack series
+        let stackColumnGroups = stackColumns
+            .selectAll(".stackcolumns-group")
+            .data((d) => d);
+        // ENTER
+        let stackColumnGroupsEnter = stackColumnGroups
+            .enter()
+            .append("g")
+            .attr("class", (d) => "stackcolumns-group ");
+        stackColumnGroups = stackColumnGroupsEnter.merge(stackColumnGroups);
+        // JOIN rects inside each series
+        let rects = stackColumnGroups.selectAll("rect").data((d) => d);
+        // ENTER
+        rects
+            .enter()
+            .append("rect")
+            .attr("transform", (d) => `translate(${xScale(d.data.dimension) - columnWidth / 2},0)`)
+            .merge(rects)
+            .attr("hoverId", (d) => d.key.includes("~$~")
+            ? d.key.split("~$~")[1].replace(/ /g, "-")
+            : d.key.replace(/ /g, "-"))
+            .attr("x", (d) => xScaleForLegends("stackLegend"))
+            .attr("y", (d) => d.data.axis === "Primary" ? yScaleLeft(d[1]) : yScaleRight(d[1]))
+            .attr("height", (d) => d.data.axis === "Primary"
+            ? customYaxisMaxValue && d[1] > customYaxisMaxValue
+                ? yScaleLeft(d[0]) - yScaleLeft(customYaxisMaxValue)
+                : yScaleLeft(d[0]) - yScaleLeft(d[1])
+            : secondaryCustomYaxisMaxValue && d[1] > secondaryCustomYaxisMaxValue
+                ? yScaleRight(d[0]) - yScaleRight(secondaryCustomYaxisMaxValue)
+                : yScaleRight(d[0]) - yScaleRight(d[1]))
+            .attr("width", xScaleForLegends.bandwidth())
+            .attr("fill", (d, i, nodes) => {
+            // `nodes[i]` gives access to parent node so we can infer which group (series) we're in
+            const seriesIndex = Array.from(seriesData).findIndex((sdata) => sdata.legend === d.key);
+            return seriesData[seriesIndex]?.properties?.color || "gray";
+        })
+            .attr("stroke", (d, i, nodes) => {
+            const seriesIndex = Array.from(seriesData).findIndex((sdata) => sdata.legend === d.key);
+            const props = seriesData[seriesIndex]?.properties;
+            return props?.stackBorderStyle === 0
+                ? "none"
+                : formatOptions.column.stackBorderVisibility
+                    ? props.stackBorderColor
+                    : "none";
+        })
+            .attr("stroke-dasharray", (d, i, nodes) => {
+            const seriesIndex = Array.from(seriesData).findIndex((sdata) => sdata.legend === d.key);
+            return seriesData[seriesIndex]?.properties.stackBorderStyle === 2
+                ? "5,3"
+                : "0";
+        })
+            .attr("stroke-width", (d, i, nodes) => {
+            const seriesIndex = Array.from(seriesData).findIndex((sdata) => sdata.legend === d.key);
+            return ((seriesData[seriesIndex]?.properties.stackBorderWidth || 0) + "px");
+        })
+            .on("mousemove", (event, d) => {
+            showTooltipOnMouseMove([
+                {
+                    key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~")
+                        ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1]
+                        : formatOptions.xAxisTitle.xAxisTitleText,
+                    value: chartJSON.formattedDimensionListMap.get(d.data.dimension),
+                },
+                {
+                    key: formatOptions.yAxisTitle.yAxisTitleText || d.value,
+                    value: getNumberWithFormat(d.data[d.key], formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision),
+                },
+                {
+                    key: "Legend",
+                    value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key,
+                },
+            ], formatOptions, event);
+        })
+            .on("mouseout", hideTooltipOnMouseOut);
+        // EXIT: remove old groups
+        stackColumnGroups.exit().remove();
+    };
+    const setSVGContainer = (margin) => {
+        innerWidth = width - margin.left - margin.right;
+        innerHeight = height - margin.bottom - margin.top;
+    };
+    const horizontalScrollBar = (seriesData, height, svg, margin, innerWidth) => {
+        if (!formatOptions.plotArea.fitChart) {
+            // Scrollbar parameters
+            const scrollMax = seriesData[0].data.length - visibleBars;
+            // Scrollbar track & handle
+            const scrollbarY = height - 20;
+            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
+            // check and add data to filteredData for stack type charts
+            checkAndupdateInputData(primaryStackAreaAxisData, primaryStackColumnAxisData, secondaryStackAreaAxisData, secondaryStackColumnAxisData);
+            getXScale();
+            filteredData = JSON.parse(JSON.stringify(requiredData));
+            filteredData.forEach((data, i) => {
+                if (data.properties.type === actualChartTypes.stackColumn ||
+                    data.properties.type === actualChartTypes.stackArea) {
+                    data.data.forEach((stackData, pos) => {
+                        filteredData[i].data[pos]["data"] = stackData.data.filter((d) => filteredDimension.includes(d.dimension));
+                    });
+                }
+                else {
+                    filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension));
+                }
+            });
+            getXAxis();
+            svg
+                .append("rect")
+                .attr("x", margin.left)
+                .attr("y", scrollbarY)
+                .attr("width", innerWidth)
+                .attr("height", 8)
+                .attr("fill", "#ddd")
+                .attr("rx", 4);
+            const handleWidth = (innerWidth * visibleBars) / chartJSON.dimensionList.length;
+            const handle = svg
+                .append("rect")
+                .attr("x", margin.left)
+                .attr("y", scrollbarY)
+                .attr("width", handleWidth)
+                .attr("height", 8)
+                .attr("fill", "#999")
+                .attr("rx", 4)
+                .style("cursor", "ew-resize")
+                .call(d3.drag().on("drag", (event) => {
+                let x = Math.min(Math.max(event.x, margin.left), margin.left + innerWidth - handleWidth);
+                handle.attr("x", x);
+                scrollPosition = Math.round(((x - margin.left) / (innerWidth - handleWidth)) * scrollMax);
+                filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
+                // check and add data to filteredData for stack type charts
+                checkAndupdateInputData(primaryStackAreaAxisData, primaryStackColumnAxisData, secondaryStackAreaAxisData, secondaryStackColumnAxisData);
+                getXScale();
+                filteredData = JSON.parse(JSON.stringify(requiredData));
+                filteredData.forEach((data, i) => {
+                    if (data.properties.type === actualChartTypes.stackColumn ||
+                        data.properties.type === actualChartTypes.stackArea) {
+                        data.data.forEach((stackData, pos) => (filteredData[i].data[pos]["data"] = stackData.data.filter((d) => filteredDimension.includes(d.dimension))));
+                    }
+                    else {
+                        filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension));
+                    }
+                });
+                getXAxis();
+                drawCustomChart();
+            }));
+            svg.on("wheel", (event) => {
+                event.preventDefault();
+                const scrollDelta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
+                    ? event.deltaX
+                    : event.deltaY;
+                scrollPosition += scrollDelta > 0 ? 1 : -1;
+                scrollPosition = Math.max(0, Math.min(scrollPosition, scrollMax));
+                const x = margin.left +
+                    ((innerWidth - handleWidth) * scrollPosition) / scrollMax;
+                handle.attr("x", x);
+                filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
+                // check and add data to filteredData for stack type charts
+                checkAndupdateInputData(primaryStackAreaAxisData, primaryStackColumnAxisData, secondaryStackAreaAxisData, secondaryStackColumnAxisData);
+                getXScale();
+                filteredData = JSON.parse(JSON.stringify(requiredData));
+                filteredData.forEach((data, i) => {
+                    if (data.properties.type === actualChartTypes.stackColumn ||
+                        data.properties.type === actualChartTypes.stackArea) {
+                        data.data.forEach((stackData, pos) => (filteredData[i].data[pos]["data"] = stackData.data.filter((d) => filteredDimension.includes(d.dimension))));
+                    }
+                    else {
+                        filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension));
+                    }
+                });
+                getXAxis();
+                drawCustomChart();
+            });
+        }
+        else {
+            filteredData = JSON.parse(JSON.stringify(requiredData));
+        }
+        drawCustomChart();
+    };
+    const drawCustomChart = () => {
+        getChartType(filteredData);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, 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
+        columnWidth, [], //old annotation list
+        formatOptions, height, width, innerWidth, filteredDimension, innerHeight, chartId, svg, xScaleForLegends);
+    };
+    const createStackData = (requiredStackChatData) => {
+        let legendList = requiredStackChatData.data.map((d) => d.legend);
+        stackChartData = d3
+            .stack()
+            .keys(legendList)
+            .offset(d3.stackOffsetDiverging)(requiredStackChatData.stackData);
+        requiredStackChatData.data.forEach((data, index) => data.data.forEach((axisData, position) => {
+            axisData["0"] = stackChartData[index][position][0];
+            axisData["1"] = stackChartData[index][position][1];
+        }));
+        //Appending Extra key for tooltip color
+        let seriesColor = formatOptions.annotation.annotationSetLabelColor;
+        stackChartData.forEach((stackData, j) => {
+            stackData.forEach((d) => {
+                d["key"] = stackData.key;
+                stackData["color"] = JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.color));
+                d.data.labelPosition =
+                    requiredStackChatData.data[j].properties.dataLabelPosition;
+                d.data["labelColor"] =
+                    seriesColor == "2"
+                        ? JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.color))
+                        : JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.labelColor));
+                d["hideZero"] = JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.hideZeroValues));
+                d.data["axis"] = JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.axis));
+                d.data["color"] = JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.color));
+                d.data["legend"] = `stackLegend`;
+                d.data["type"] = JSON.parse(JSON.stringify(requiredStackChatData.data[j].properties.type));
+            });
+        });
+        return stackChartData;
+    };
+    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
+};
+export default CustomColumnChart;