@fluentui/react-charts 9.2.1 → 9.2.2

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -4,14 +4,11 @@ import { select as d3Select } from 'd3-selection';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleBand as d3ScaleBand } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
-import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl } from '../../utilities/index';
-import { CartesianChart, Legends, DataVizPalette, getColorFromToken } from '../../index';
+import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl, calcRequiredWidth, calcTotalWidth, calcBandwidth, calcTotalBandUnits } from '../../utilities/index';
+import { CartesianChart, Legends } from '../../index';
 import { toImage } from '../../utilities/image-export-utils';
 const MIN_DOMAIN_MARGIN = 8;
 const X1_INNER_PADDING = 0.1;
-// x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
-// => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
-/** Rate at which the space between the bars in a group changes wrt the bar width */ const BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
 const VERTICAL_BAR_GAP = 1;
 const MIN_BAR_HEIGHT = 1;
 export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
@@ -22,7 +19,6 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
     const _emptyChartId = useId('_GVBC_empty');
     const _useRtl = useRtl();
     let _domainMargin = MIN_DOMAIN_MARGIN;
-    let _keys = [];
     let _xAxisLabels = [];
     let _datasetForBars = [];
     let _margins = {
@@ -32,13 +28,14 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         left: 0
     };
     let _groupedVerticalBarGraph = [];
-    let _refArray = [];
     let _yMax = 0;
     let _calloutAnchorPoint = null;
     let _barWidth = 0;
     let _groupWidth = 0;
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
+    let _legends = [];
+    let _legendColorMap = {};
     const cartesianChartRef = React.useRef(null);
     const Y_ORIGIN = 0;
     const _legendsRef = React.useRef(null);
@@ -82,44 +79,53 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
         // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
         // space_between_groups = 2 * bar_width
-        // group_width = keys.length * bar_width + (keys.length - 1) * space_between_bars
-        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, undefined, 2 / (2 + keys.length + (keys.length - 1) * BAR_GAP_RATE));
+        // group_width = _legends.length * bar_width + (_legends.length - 1) * space_between_bars
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, undefined, 2 / (2 + calcTotalBandUnits(_legends.length, X1_INNER_PADDING)));
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding);
     };
     const _createDataset = (points)=>{
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const datasetForBars = [];
-        const dataset = [];
         points.forEach((point, index)=>{
-            const singleDatasetPoint = {};
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const singleDatasetPointForBars = {};
-            const singleDataSeries = [];
-            point.series.forEach((seriesPoint, seriesIndex)=>{
-                singleDatasetPoint[seriesPoint.key] = seriesPoint.data;
-                singleDatasetPointForBars[seriesPoint.key] = {
-                    ...seriesPoint
-                };
-                singleDataSeries.push(seriesPoint);
+            const legendToBarPoint = {};
+            point.series.forEach((seriesPoint)=>{
+                if (!singleDatasetPointForBars[seriesPoint.legend]) {
+                    singleDatasetPointForBars[seriesPoint.legend] = [
+                        {
+                            ...seriesPoint
+                        }
+                    ];
+                    legendToBarPoint[seriesPoint.legend] = {
+                        ...seriesPoint
+                    };
+                } else {
+                    singleDatasetPointForBars[seriesPoint.legend].push({
+                        ...seriesPoint
+                    });
+                    legendToBarPoint[seriesPoint.legend].data += seriesPoint.data;
+                }
             });
             singleDatasetPointForBars.xAxisPoint = point.name;
             singleDatasetPointForBars.indexNum = index;
-            singleDatasetPointForBars.groupSeries = singleDataSeries;
+            singleDatasetPointForBars.groupSeries = Object.values(legendToBarPoint);
             singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
             datasetForBars.push(singleDatasetPointForBars);
-            dataset.push(singleDatasetPoint);
         });
         return datasetForBars;
     };
     const _createDataSetOfGVBC = (points)=>{
-        const keys = [];
+        const legends = new Set();
         const xAxisLabels = points.map((singlePoint)=>singlePoint.name);
-        points[0].series.forEach((singleKey)=>{
-            keys.push(singleKey.key);
+        points.forEach((point)=>{
+            point.series.forEach((seriesPoint)=>{
+                legends.add(seriesPoint.legend);
+            });
         });
         const datasetForBars = _createDataset(points);
         return {
-            keys,
+            legends: Array.from(legends),
             xAxisLabels,
             datasetForBars
         };
@@ -135,36 +141,22 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
             props.legendProps.onChange(selectedLegends, event, currentLegend);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const _getLegendData = (points)=>{
-        const data = points;
-        const defaultPalette = [
-            getColorFromToken(DataVizPalette.color1),
-            getColorFromToken(DataVizPalette.color2),
-            getColorFromToken(DataVizPalette.color3),
-            getColorFromToken(DataVizPalette.color4),
-            getColorFromToken(DataVizPalette.color5)
-        ];
         const actions = [];
-        data.forEach((singleChartData)=>{
-            singleChartData.series.forEach((point)=>{
-                let color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
-                const checkSimilarLegends = actions.filter((leg)=>leg.title === point.legend && leg.color === color);
-                if (checkSimilarLegends.length > 0) {
-                    return;
+        _legends.forEach((legendTitle)=>{
+            const legend = {
+                title: legendTitle,
+                color: _legendColorMap[legendTitle][0],
+                hoverAction: ()=>{
+                    _handleChartMouseLeave();
+                    _onLegendHover(legendTitle);
+                },
+                onMouseOutAction: ()=>{
+                    _onLegendLeave();
                 }
-                const legend = {
-                    title: point.legend,
-                    color,
-                    hoverAction: ()=>{
-                        _handleChartMouseLeave();
-                        _onLegendHover(point.legend);
-                    },
-                    onMouseOutAction: ()=>{
-                        _onLegendLeave();
-                    }
-                };
-                actions.push(legend);
-            });
+            };
+            actions.push(legend);
         });
         return /*#__PURE__*/ React.createElement(Legends, {
             legends: actions,
@@ -175,13 +167,40 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
             legendRef: _legendsRef
         });
     };
-    const points = props.data;
-    const { keys, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points);
-    _keys = keys;
+    const _addDefaultColors = (data)=>{
+        _legendColorMap = {};
+        let colorIndex = 0;
+        var _data_map;
+        return (_data_map = data === null || data === void 0 ? void 0 : data.map((point)=>{
+            var _point_series;
+            var _point_series_map;
+            return {
+                ...point,
+                series: (_point_series_map = (_point_series = point.series) === null || _point_series === void 0 ? void 0 : _point_series.map((seriesPoint)=>{
+                    if (!_legendColorMap[seriesPoint.legend]) {
+                        let startColor = seriesPoint.color ? seriesPoint.color : getNextColor(colorIndex, 0);
+                        let endColor = startColor;
+                        _legendColorMap[seriesPoint.legend] = [
+                            startColor,
+                            endColor
+                        ];
+                        colorIndex += 1;
+                    }
+                    return {
+                        ...seriesPoint,
+                        color: _legendColorMap[seriesPoint.legend][0]
+                    };
+                })) !== null && _point_series_map !== void 0 ? _point_series_map : []
+            };
+        })) !== null && _data_map !== void 0 ? _data_map : [];
+    };
+    const points = _addDefaultColors(props.data);
+    const { legends, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points);
+    _legends = legends;
     _xAxisLabels = xAxisLabels;
     _datasetForBars = datasetForBars;
     const _xAxisType = getTypeOfAxis(points[0].name, true);
-    const legends = _getLegendData(points);
+    const legendBars = _getLegendData(points);
     _adjustProps();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Add commentMore actions
     function _getMinMaxOfYAxis(datasetForBars, yAxisType, useSecondaryYScale) {
@@ -241,8 +260,8 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         const xScale0 = _createX0Scale(containerWidth);
         // Setting the bar width here is safe because there are no dependencies earlier in the code
         // that rely on the width of bars in vertical bar charts with string x-axis.
-        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xScale0.bandwidth() / (_keys.length + (_keys.length - 1) * BAR_GAP_RATE));
-        _groupWidth = (_keys.length + (_keys.length - 1) * BAR_GAP_RATE) * _barWidth;
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calcBandwidth(xScale0.bandwidth(), _legends.length, X1_INNER_PADDING));
+        _groupWidth = calcRequiredWidth(_barWidth, _legends.length, X1_INNER_PADDING);
         const xScale1 = _createX1Scale();
         const allGroupsBars = [];
         _datasetForBars.forEach((singleSet)=>{
@@ -253,10 +272,6 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
     const _getMargins = (margins)=>{
         _margins = margins;
     };
-    const _getOpacity = (legendTitle)=>{
-        const opacity = _legendHighlighted(legendTitle) || _noLegendHighlighted() ? '' : '0.1';
-        return opacity;
-    };
     function updatePosition(newX, newY) {
         const threshold = 1; // Set a threshold for movement
         const { x, y } = clickPosition;
@@ -295,96 +310,102 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         setPopoverOpen(false);
     };
     const onBarFocus = (event, pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    groupData, refArrayIndexNumber)=>{
+    groupData)=>{
         let x = 0;
         let y = 0;
         const targetRect = event.target.getBoundingClientRect();
         x = targetRect.left + targetRect.width / 2;
         y = targetRect.top + targetRect.height / 2;
         updatePosition(x, y);
-        _refArray.forEach((obj, index)=>{
-            if (obj.index === pointData.legend && refArrayIndexNumber === index) {
-                setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
-                setCalloutLegend(pointData.legend);
-                setDataForHoverCard(pointData.data);
-                setColor(pointData.color);
-                setXCalloutValue(pointData.xAxisCalloutData);
-                setYCalloutValue(pointData.yAxisCalloutData);
-                setCallOutAccessibilityData(props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData);
-                setYValueHover(groupData.groupSeries);
-                setHoverXValue(pointData.xAxisCalloutData);
-            }
-        });
-    };
-    const _refCallback = (element, legendTitle, refIndexNumber)=>{
-        _refArray[refIndexNumber] = {
-            index: legendTitle,
-            refElement: element
-        };
+        setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
+        setCalloutLegend(pointData.legend);
+        setDataForHoverCard(pointData.data);
+        setColor(pointData.color);
+        setXCalloutValue(pointData.xAxisCalloutData);
+        setYCalloutValue(pointData.yAxisCalloutData);
+        setCallOutAccessibilityData(props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData);
+        setYValueHover(groupData.groupSeries);
+        setHoverXValue(pointData.xAxisCalloutData);
     };
     const _buildGraph = (// eslint-disable-next-line @typescript-eslint/no-explicit-any
     singleSet, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     xScale0, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     xScale1, yScalePrimary, yScaleSecondary, containerHeight, xElement)=>{
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         const singleGroup = [];
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         const barLabelsForGroup = [];
-        const tempDataSet = Object.keys(datasetForBars[0]).splice(0, keys.length);
-        tempDataSet.forEach((datasetKey, index)=>{
-            const refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
-            const pointData = singleSet[datasetKey];
-            const yBarScale = pointData.useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
-            if (pointData) {
-                // To align the centers of the generated bandwidth and the calculated one when they differ,
-                // use the following addend.
-                const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _barWidth) / 2;
-                const startColor = pointData.color ? pointData.color : getNextColor(index, 0);
+        // Get the actual legends present at this x-axis point
+        const presentLegends = Object.keys(singleSet).filter((key)=>key in _legendColorMap);
+        const effectiveGroupWidth = calcRequiredWidth(_barWidth, presentLegends.length, X1_INNER_PADDING);
+        // For stacked bars, center the single bar group in the available space
+        // Instead of using the global legend position, use the local position within present legends
+        const localScale = d3ScaleBand().domain(presentLegends).range(_useRtl ? [
+            effectiveGroupWidth,
+            0
+        ] : [
+            0,
+            effectiveGroupWidth
+        ]).paddingInner(X1_INNER_PADDING);
+        _legends.forEach((legendTitle, legendIndex)=>{
+            const barPoints = singleSet[legendTitle];
+            if (barPoints) {
+                const yBarScale = barPoints[0].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+                var _localScale;
+                const xPoint = ((_localScale = localScale(legendTitle)) !== null && _localScale !== void 0 ? _localScale : 0) + (localScale.bandwidth() - _barWidth) / 2;
+                const isLegendActive = _legendHighlighted(legendTitle) || _noLegendHighlighted();
+                const barOpacity = isLegendActive ? '' : '0.1';
+                let barTotalValue = 0;
                 const yBaseline = yBarScale(Y_ORIGIN);
                 let yPositiveStart = yBaseline;
                 let yNegativeStart = yBaseline;
                 let yPoint = Y_ORIGIN;
-                const barGap = VERTICAL_BAR_GAP / 2 * (index > 0 ? 2 : 0);
-                const height = Math.max(yBarScale(Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
-                if (pointData.data >= Y_ORIGIN) {
-                    yPositiveStart -= height + barGap;
-                    yPoint = yPositiveStart;
-                } else {
-                    yPoint = yNegativeStart + barGap;
-                    yNegativeStart = yPoint + height;
-                }
-                // Not rendering data with 0.
-                pointData.data && singleGroup.push(/*#__PURE__*/ React.createElement(React.Fragment, {
-                    key: `${singleSet.indexNum}-${index}`
-                }, /*#__PURE__*/ React.createElement("rect", {
-                    className: classes.opacityChangeOnHover,
-                    height: height,
-                    width: _barWidth,
-                    x: xPoint,
-                    y: yPoint,
-                    opacity: _getOpacity(pointData.legend),
-                    ref: (e)=>{
-                        _refCallback(e, pointData.legend, refIndexNumber);
-                    },
-                    fill: startColor,
-                    rx: 0,
-                    onMouseOver: (event)=>onBarHover(pointData, singleSet, event),
-                    onMouseMove: (event)=>onBarHover(pointData, singleSet, event),
-                    onMouseOut: _onBarLeave,
-                    onFocus: (event)=>onBarFocus(event, pointData, singleSet, refIndexNumber),
-                    onBlur: _onBarLeave,
-                    onClick: pointData.onClick,
-                    "aria-label": getAriaLabel(pointData, singleSet.xAxisPoint),
-                    tabIndex: _legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined,
-                    role: "img"
-                })));
-                if (pointData.data && !props.hideLabels && _barWidth >= 16 && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())) {
+                barPoints.forEach((pointData, pointIndex)=>{
+                    if (!pointData.data) {
+                        // Not rendering data with 0.
+                        return;
+                    }
+                    const barGap = VERTICAL_BAR_GAP / 2 * (pointIndex > 0 ? 2 : 0);
+                    const height = Math.max(yBarScale(Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
+                    const pointColor = pointData.color; // Use the color of the current point
+                    if (pointData.data >= Y_ORIGIN) {
+                        yPositiveStart -= height + barGap;
+                        yPoint = yPositiveStart;
+                    } else {
+                        yPoint = yNegativeStart + barGap;
+                        yNegativeStart = yPoint + height;
+                    }
+                    singleGroup.push(/*#__PURE__*/ React.createElement("rect", {
+                        key: `${singleSet.indexNum}-${legendIndex}-${pointIndex}`,
+                        className: classes.opacityChangeOnHover,
+                        height: height,
+                        width: _barWidth,
+                        x: xPoint,
+                        y: yPoint,
+                        opacity: barOpacity,
+                        fill: pointColor,
+                        rx: 0,
+                        onMouseOver: (event)=>onBarHover(pointData, singleSet, event),
+                        onMouseMove: (event)=>onBarHover(pointData, singleSet, event),
+                        onMouseOut: _onBarLeave,
+                        onFocus: (event)=>onBarFocus(event, pointData, singleSet),
+                        onBlur: _onBarLeave,
+                        onClick: pointData.onClick,
+                        "aria-label": getAriaLabel(pointData, singleSet.xAxisPoint),
+                        tabIndex: _legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined,
+                        role: "img"
+                    }));
+                    barTotalValue += pointData.data;
+                });
+                if (barTotalValue !== null && !props.hideLabels && _barWidth >= 16 && isLegendActive) {
                     barLabelsForGroup.push(/*#__PURE__*/ React.createElement("text", {
-                        key: `${singleSet.indexNum}-${index}`,
+                        key: `${singleSet.indexNum}-${legendIndex}`,
                         x: xPoint + _barWidth / 2,
-                        y: pointData.data >= Y_ORIGIN ? yPositiveStart - 6 : yNegativeStart + 12,
+                        y: barTotalValue >= Y_ORIGIN ? yPositiveStart - 6 : yNegativeStart + 12,
                         textAnchor: "middle",
                         className: classes.barLabel,
                         "aria-hidden": true
-                    }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(pointData.data) : formatScientificLimitWidth(pointData.data)));
+                    }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barTotalValue) : formatScientificLimitWidth(barTotalValue)));
                 }
             }
         });
@@ -404,7 +425,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         }
         return /*#__PURE__*/ React.createElement("g", {
             key: singleSet.indexNum,
-            transform: `translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - _groupWidth) / 2}, 0)`
+            transform: `translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - effectiveGroupWidth) / 2}, 0)`
         }, singleGroup, barLabelsForGroup);
     };
     // For grouped vertical bar chart, First need to define total scale (from start to end)
@@ -421,7 +442,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _createX1Scale = ()=>{
-        return d3ScaleBand().domain(keys)// When there is only one group, xScale0 adds padding around it,
+        return d3ScaleBand().domain(_legends)// When there is only one group, xScale0 adds padding around it,
         // causing the bandwidth to become smaller than the actual group width.
         // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.
         .range(_useRtl ? [
@@ -472,8 +493,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     };
     const _getDomainMargins = (containerWidth)=>{
-        /** Total width available to render the bars */ const totalWidth = containerWidth - (_margins.left + MIN_DOMAIN_MARGIN) - (_margins.right + MIN_DOMAIN_MARGIN);
-        /** Rate at which the space between the groups changes wrt the group width */ const groupGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        /** Total width available to render the bars */ const totalWidth = calcTotalWidth(containerWidth, _margins, MIN_DOMAIN_MARGIN);
         if (_xAxisType === XAxisTypes.StringAxis) {
             if (isScalePaddingDefined(props.xAxisOuterPadding)) {
                 // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -483,19 +503,19 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
                 // Update the bar width so that when CartesianChart rerenders,
                 // the following calculations don't use the previous bar width.
                 _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
-                const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * _barWidth;
-                /** Total width required to render the groups. Directly proportional to group width */ const reqWidth = (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                const groupWidth = calcRequiredWidth(_barWidth, _legends.length, X1_INNER_PADDING);
+                /** Total width required to render the groups. Directly proportional to group width */ const reqWidth = calcRequiredWidth(groupWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 if (totalWidth >= reqWidth) {
                     // Center align the chart by setting equal left and right margins for domain
                     _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
                 }
             } else if (props.mode === 'plotly' && xAxisLabels.length > 1) {
                 // Calculate the remaining width after rendering groups at their maximum allowable width
-                const groupBandwidth = totalWidth / (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate);
-                const barBandwidth = groupBandwidth / (keys.length + (keys.length - 1) * BAR_GAP_RATE);
+                const groupBandwidth = calcBandwidth(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
+                const barBandwidth = calcBandwidth(groupBandwidth, _legends.length, X1_INNER_PADDING);
                 const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, barBandwidth);
-                const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * barWidth;
-                let reqWidth = (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                const groupWidth = calcRequiredWidth(barWidth, _legends.length, X1_INNER_PADDING);
+                let reqWidth = calcRequiredWidth(groupWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const margin1 = (totalWidth - reqWidth) / 2;
                 let margin2 = Number.POSITIVE_INFINITY;
                 if (!props.hideTickOverlap) {
@@ -517,7 +537,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         return !(props.data && props.data.length > 0 && props.data.filter((item)=>item.series.length).length > 0);
     };
     const _getChartTitle = ()=>{
-        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Vertical bar chart with ${_xAxisLabels.length} groups of ${_keys.length} bars each. `;
+        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Vertical bar chart with ${_xAxisLabels.length} groups of ${_legends.length} bars each. `;
     };
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
@@ -528,7 +548,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
         getMinMaxOfYAxis: _getMinMaxOfYAxis,
         createStringYAxis: createStringYAxis,
         calloutProps: calloutProps,
-        legendBars: legends,
+        legendBars: legendBars,
         xAxisType: _xAxisType,
         createYAxis: createNumericYAxis,
         datasetForXAxisDomain: _xAxisLabels,