@fluentui/react-charts 9.2.1 → 9.2.3

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,17 +6,17 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, ChartPopover, Legends } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
-    CircleVisbility["show"] = "visibility";
-    CircleVisbility["hide"] = "hidden";
-    return CircleVisbility;
-}(CircleVisbility || {});
-export const VerticalStackedBarChart = (props)=>{
+export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
+    xAxisCategoryOrder: 'default',
+    yAxisCategoryOrder: 'default',
+    data: []
+}, forwardedRef)=>{
     var _props_legendProps;
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
@@ -40,6 +40,8 @@ export const VerticalStackedBarChart = (props)=>{
     const cartesianChartRef = React.useRef(null);
     const Y_ORIGIN = 0;
     const _legendsRef = React.useRef(null);
+    let _yAxisType;
+    let _yAxisLabels = [];
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
@@ -150,19 +152,29 @@ export const VerticalStackedBarChart = (props)=>{
             activeLegend
         ] : [];
     }
-    function _lineHoverOut() {
-        setPopoverOpen(false);
-        setXCalloutValue('');
-        setYCalloutValue('');
-        setActiveXAxisDataPoint('');
-        setColor('');
-    }
-    function _lineHoverFocus(lineData) {
-        setPopoverOpen(true);
-        setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
-        setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
-        setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
-        setColor(lineData.color);
+    function _lineHoverFocus(lineData, event) {
+        let clientX = 0;
+        let clientY = 0;
+        if ('clientX' in event) {
+            clientX = event.clientX;
+            clientY = event.clientY;
+        } else {
+            const boundingRect = event.target.getBoundingClientRect();
+            clientX = boundingRect.left + boundingRect.width / 2;
+            clientY = boundingRect.top + boundingRect.height / 2;
+        }
+        if (_getHighlightedLegend().length === 1) {
+            if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+                _updatePosition(clientX, clientY);
+                setPopoverOpen(true);
+                setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+                setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+                setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+                setColor(lineData.color);
+            }
+        } else {
+            _onStackHoverFocus(lineData.xItem, event);
+        }
     }
     function _onStackHoverFocus(stack, mouseEvent) {
         var _stack_lineData;
@@ -230,21 +242,26 @@ export const VerticalStackedBarChart = (props)=>{
         _lineObject = _getFormattedLineData(props.data);
         _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
+        _initYAxisParams();
     }
     function _createDataSetLayer() {
-        const tempArr = [];
         const dataset = _points.map((singlePointData)=>{
+            if (_yAxisType === YAxisType.StringAxis) {
+                return {
+                    x: singlePointData.xAxisPoint,
+                    y: 0
+                };
+            }
             let total = 0;
             singlePointData.chartData.forEach((point)=>{
                 total = total + point.data;
             });
-            tempArr.push(singlePointData.xAxisPoint);
             return {
                 x: singlePointData.xAxisPoint,
                 y: total
             };
         });
-        _xAxisLabels = tempArr;
+        _xAxisLabels = _getOrderedXAxisLabels();
         return dataset;
     }
     function _onLegendHover(legendTitle) {
@@ -269,7 +286,7 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getGraphData(xScale, yScale, containerHeight, containerWidth, xElement) {
         const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
-        return _bars = _createBar(xBarScale, yBarScale, containerHeight, xElement);
+        return _bars = _createBar(xBarScale, _yAxisType === YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement);
     }
     function _getAxisData(yAxisData) {
         if (yAxisData && yAxisData.yAxisDomainValues.length) {
@@ -279,19 +296,19 @@ export const VerticalStackedBarChart = (props)=>{
         }
     }
     /**
-   * This function checks if the given legend is highlighted or not.
-   * A legend can be highlighted in 2 ways:
-   * 1. selection: if the user clicks on it
-   * 2. hovering: if there is no selected legend and the user hovers over it
-   */ function _isLegendHighlighted(legendTitle) {
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */ function _isLegendHighlighted(legendTitle) {
         return _getHighlightedLegend().includes(legendTitle);
     }
     /**
-   * This function checks if none of the legends is selected or hovered.
-   */ function _noLegendHighlighted() {
+     * This function checks if none of the legends is selected or hovered.
+     */ function _noLegendHighlighted() {
         return _getHighlightedLegend().length === 0;
     }
-    function _getAriaLabel(singleChartData, point) {
+    function _getAriaLabel(singleChartData, point, isLinePoint) {
         var _point_callOutAccessibilityData;
         if (!point) {
             var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
@@ -299,19 +316,19 @@ export const VerticalStackedBarChart = (props)=>{
             const pointValues = singleChartData.chartData.map((pt)=>{
                 const legend = pt.legend;
                 const yValue = pt.yAxisCalloutData || pt.data;
-                return `${legend}, ${yValue}.`;
-            }).join(' ');
+                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
+            }).filter((str)=>str !== '').join(' ');
             const lineValues = (_singleChartData_lineData = singleChartData.lineData) === null || _singleChartData_lineData === void 0 ? void 0 : _singleChartData_lineData.map((ln)=>{
                 const legend = ln.legend;
                 const yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                return `${legend}, ${yValue}.`;
-            }).join(' ');
+                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
+            }).filter((str)=>str !== '').join(' ');
             return ((_singleChartData_stackCallOutAccessibilityData = singleChartData.stackCallOutAccessibilityData) === null || _singleChartData_stackCallOutAccessibilityData === void 0 ? void 0 : _singleChartData_stackCallOutAccessibilityData.ariaLabel) || `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '');
         }
-        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
         const legend = point.legend;
-        const yValue = point.yAxisCalloutData || point.data;
-        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
+        const yValue = point.yAxisCalloutData || (isLinePoint ? point.data || point.y : point.data);
+        return !isLinePoint && ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
     function _getCustomizedCallout() {
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -396,6 +413,7 @@ export const VerticalStackedBarChart = (props)=>{
                 const y1 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i - 1].y) : yScalePrimary(lineObject[item][i - 1].y);
                 const x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
                 const y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
+                const yScaleBandwidthTranslate = !useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                 if (lineBorderWidth > 0) {
                     borderForLines.push(/*#__PURE__*/ React.createElement("line", {
                         key: `${index}-${i}-BorderLine`,
@@ -408,7 +426,7 @@ export const VerticalStackedBarChart = (props)=>{
                         fill: "transparent",
                         strokeLinecap: "round",
                         stroke: tokens.colorNeutralBackground1,
-                        transform: `translate(${xScaleBandwidthTranslate}, 0)`
+                        transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`
                     }));
                 }
                 var _lineObject_item__lineOptions_strokeWidth, _lineObject_item__lineOptions_strokeLinecap;
@@ -423,11 +441,9 @@ export const VerticalStackedBarChart = (props)=>{
                     strokeLinecap: (_lineObject_item__lineOptions_strokeLinecap = (_lineObject_item__lineOptions1 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions1 === void 0 ? void 0 : _lineObject_item__lineOptions1.strokeLinecap) !== null && _lineObject_item__lineOptions_strokeLinecap !== void 0 ? _lineObject_item__lineOptions_strokeLinecap : 'round',
                     strokeDasharray: (_lineObject_item__lineOptions2 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions2 === void 0 ? void 0 : _lineObject_item__lineOptions2.strokeDasharray,
                     stroke: lineObject[item][i].color,
-                    transform: `translate(${xScaleBandwidthTranslate}, 0)`,
-                    ..._isLegendHighlighted(item) && {
-                        onMouseOver: _lineHover.bind(lineObject[item][i - 1]),
-                        onMouseLeave: _lineHoverOut
-                    }
+                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
+                    onMouseOver: (event)=>_lineHover(lineObject[item][i - 1], event),
+                    onMouseLeave: _handleMouseOut
                 }));
             }
         });
@@ -437,20 +453,21 @@ export const VerticalStackedBarChart = (props)=>{
                     refElement: null
                 };
                 const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
+                const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                 dots.push(/*#__PURE__*/ React.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
                     cy: circlePoint.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(circlePoint.y) : yScalePrimary(circlePoint.y),
-                    onMouseOver: _isLegendHighlighted(item) ? (event)=>_lineHover(circlePoint, event) : (event)=>_onStackHover(circlePoint.xItem, event),
-                    ..._isLegendHighlighted(item) && {
-                        onMouseLeave: _lineHoverOut
-                    },
-                    r: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
+                    onMouseOver: (event)=>_lineHover(circlePoint, event),
+                    onMouseLeave: _handleMouseOut,
+                    r: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
                     stroke: circlePoint.color,
                     fill: tokens.colorNeutralBackground1,
                     strokeWidth: 3,
-                    visibility: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility,
-                    transform: `translate(${xScaleBandwidthTranslate}, 0)`,
+                    // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
+                    // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
+                    opacity: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity,
+                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
                     ref: (e)=>circleRef.refElement = e,
                     ...noBarsAndLinesActive ? {
                         tabIndex: !props.hideTooltip ? 0 : undefined,
@@ -464,27 +481,27 @@ export const VerticalStackedBarChart = (props)=>{
         });
         return /*#__PURE__*/ React.createElement(React.Fragment, null, borderForLines, lines, dots);
     }
-    function _getCircleVisibilityAndRadius(xAxisPoint, legend) {
+    function _getCircleOpacityAndRadius(xAxisPoint, legend) {
         if (!_noLegendHighlighted()) {
             if (xAxisPoint === activeXAxisDataPoint && _isLegendHighlighted(legend)) {
                 return {
-                    visibility: "visibility",
+                    opacity: 1,
                     radius: 8
                 };
             } else if (_isLegendHighlighted(legend)) {
                 return {
-                    visibility: "visibility",
+                    opacity: 1,
                     radius: 0.3
                 };
             } else {
                 return {
-                    visibility: "hidden",
+                    opacity: 0,
                     radius: 0
                 };
             }
         } else {
             return {
-                visibility: activeXAxisDataPoint === xAxisPoint ? "visibility" : "hidden",
+                opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
                 radius: 8
             };
         }
@@ -522,14 +539,15 @@ export const VerticalStackedBarChart = (props)=>{
         if ((_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.chartDataPoint) !== point || (_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.xAxisDataPoint) !== xAxisPoint) {
             _calloutAnchorPoint = {
                 chartDataPoint: point,
-                xAxisDataPoint: `${xAxisPoint}`
+                xAxisDataPoint: xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString()
             };
+            const xCalloutValue = point.xAxisCalloutData || (xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString());
             _updatePosition(clientX, clientY);
             setPopoverOpen(_noLegendHighlighted() || _isLegendHighlighted(point.legend));
             setCalloutLegend(point.legend);
             setDataForHoverCard(point.data);
             setColor(color);
-            setXCalloutValue(point.xAxisCalloutData ? point.xAxisCalloutData : `${xAxisPoint}`);
+            setXCalloutValue(xCalloutValue);
             setYCalloutValue(point.yAxisCalloutData);
             setDataPointCalloutProps(point);
             setCallOutAccessibilityData(point.callOutAccessibilityData);
@@ -537,11 +555,11 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _lineHover(lineData, mouseEvent) {
         mouseEvent.persist();
-        _lineHoverFocus(lineData);
+        _lineHoverFocus(lineData, mouseEvent);
     }
     function _lineFocus(event, lineData, ref) {
         if (ref.refElement) {
-            _lineHoverFocus(lineData);
+            _lineHoverFocus(lineData, event);
         }
     }
     function _onStackHover(stack, mouseEvent) {
@@ -563,22 +581,29 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
         const { barGapMax = 0 } = props;
-        // When displaying gaps between the bars, the height of each bar is
-        // adjusted so that the total of all bars is not changed by the gaps
-        const totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
-        const totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
+        let totalData = 0;
+        let totalHeight;
         let sumOfPercent = 0;
-        bars.forEach((point)=>{
-            let value = Math.abs(point.data) / totalData * 100;
-            if (value < 1 && value !== 0) {
-                value = 1;
-            }
-            sumOfPercent += value;
-        });
-        const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        let scalingRatio;
+        if (_yAxisType === YAxisType.StringAxis) {
+            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : bars.reduce((total, bar)=>total + yBarScale(bar.data), 0);
+        } else {
+            // When displaying gaps between the bars, the height of each bar is
+            // adjusted so that the total of all bars is not changed by the gaps
+            totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
+            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
+            bars.forEach((point)=>{
+                let value = Math.abs(point.data) / totalData * 100;
+                if (value < 1 && value !== 0) {
+                    value = 1;
+                }
+                sumOfPercent += value;
+            });
+            scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        }
         const gaps = barGapMax && bars.length - 1;
         const gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, totalHeight * barGapMultiplier / gaps));
-        const heightValueScale = (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
+        const heightValueScale = _yAxisType === YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
         return {
             gapHeight,
             heightValueScale,
@@ -669,8 +694,7 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getDomainMargins(containerWidth) {
         _domainMargin = MIN_DOMAIN_MARGIN;
-        /** 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 bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        const totalWidth = calcTotalWidth(containerWidth, _margins, MIN_DOMAIN_MARGIN);
         if (_xAxisType === XAxisTypes.StringAxis) {
             if (isScalePaddingDefined(props.xAxisOuterPadding, props.xAxisPadding)) {
                 // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -680,16 +704,16 @@ export const VerticalStackedBarChart = (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);
-                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * _barWidth;
+                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = calcRequiredWidth(_barWidth, _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 bars at their maximum allowable width
-                const bandwidth = totalWidth / (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate);
+                const bandwidth = calcBandwidth(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
-                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                let reqWidth = calcRequiredWidth(barWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const margin1 = (totalWidth - reqWidth) / 2;
                 let margin2 = Number.POSITIVE_INFINITY;
                 if (!props.hideTickOverlap) {
@@ -729,7 +753,7 @@ export const VerticalStackedBarChart = (props)=>{
             const xPoint = xBarScale(_xAxisType === XAxisTypes.NumericAxis ? singleChartData.xAxisPoint : _xAxisType === XAxisTypes.DateAxis ? singleChartData.xAxisPoint : singleChartData.xAxisPoint);
             const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? -_barWidth / 2 : (xBarScale.bandwidth() - _barWidth) / 2;
             let barTotalValue = 0;
-            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0);
+            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0 && point.data !== '' && !(_yAxisType === YAxisType.StringAxis && typeof yBarScale(point.data) === 'undefined'));
             if (!barsToDisplay.length) {
                 return undefined;
             }
@@ -737,7 +761,7 @@ export const VerticalStackedBarChart = (props)=>{
             if (heightValueScale < 0) {
                 return undefined;
             }
-            const yBaseline = containerHeight - _margins.bottom - yBarScale(Y_ORIGIN);
+            const yBaseline = containerHeight - _margins.bottom - (_yAxisType === YAxisType.StringAxis ? 0 : yBarScale(Y_ORIGIN));
             let yPositiveStart = yBaseline;
             let yNegativeStart = yBaseline;
             let yPoint = 0;
@@ -746,7 +770,7 @@ export const VerticalStackedBarChart = (props)=>{
                 const startColor = point.color ? point.color : _colors[index];
                 const ref = {};
                 const shouldHighlight = _isLegendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
-                const rectFocusProps = !shouldFocusWholeStack && {
+                const rectFocusProps = !shouldFocusWholeStack && shouldHighlight && {
                     'aria-label': _getAriaLabel(singleChartData, point),
                     onMouseOver: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
                     onMouseMove: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
@@ -757,22 +781,29 @@ export const VerticalStackedBarChart = (props)=>{
                     role: 'img',
                     tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined
                 };
-                let barHeight = Math.abs(heightValueScale * point.data);
-                // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
-                const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
-                if (barHeight < minHeight) {
-                    barHeight = minHeight;
-                }
+                let barHeight;
                 const gapOffset = index ? gapHeight : 0;
-                if (point.data >= Y_ORIGIN) {
+                if (_yAxisType === YAxisType.StringAxis) {
+                    barHeight = Math.max(containerHeight - _margins.bottom - (yBarScale(point.data) + yBarScale.bandwidth() / 2) - gapOffset, barMinimumHeight, 1);
                     yPositiveStart -= barHeight + gapOffset;
                     yPoint = yPositiveStart;
                 } else {
-                    yPoint = yNegativeStart + gapOffset;
-                    yNegativeStart = yPoint + barHeight;
+                    barHeight = Math.abs(heightValueScale * point.data);
+                    // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
+                    const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
+                    if (barHeight < minHeight) {
+                        barHeight = minHeight;
+                    }
+                    if (point.data >= Y_ORIGIN) {
+                        yPositiveStart -= barHeight + gapOffset;
+                        yPoint = yPositiveStart;
+                    } else {
+                        yPoint = yNegativeStart + gapOffset;
+                        yNegativeStart = yPoint + barHeight;
+                    }
+                    barTotalValue += point.data;
+                    heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                 }
-                barTotalValue += point.data;
-                heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                 if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
                     return /*#__PURE__*/ React.createElement(React.Fragment, {
                         key: index + indexNumber + `${shouldFocusWholeStack}`
@@ -818,7 +849,11 @@ export const VerticalStackedBarChart = (props)=>{
                 }));
             });
             const groupRef = {};
-            const stackFocusProps = shouldFocusWholeStack && {
+            const someBarsActive = singleChartData.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length > 0;
+            // FIXME: Making the entire stack focusable when stack callout is enabled adds unnecessary complexity
+            // and can reduce usability in certain scenarios. Instead, each individual element within the stack
+            // should be focusable on its own, with its own aria-label. This behavior is also seen in Highcharts.
+            const stackFocusProps = shouldFocusWholeStack && someBarsActive && {
                 'aria-label': _getAriaLabel(singleChartData),
                 onMouseOver: (event)=>_onStackHover(singleChartData, event),
                 onMouseMove: (event)=>_onStackHover(singleChartData, event),
@@ -831,7 +866,7 @@ export const VerticalStackedBarChart = (props)=>{
             };
             let showLabel = false;
             let barLabel = 0;
-            if (!props.hideLabels) {
+            if (!props.hideLabels && _yAxisType !== YAxisType.StringAxis) {
                 if (_noLegendHighlighted()) {
                     showLabel = true;
                     barLabel = barTotalValue;
@@ -901,6 +936,83 @@ export const VerticalStackedBarChart = (props)=>{
             endValue: d3Max(values)
         };
     }
+    function _initYAxisParams() {
+        if (_points[0].chartData.length > 0) {
+            _yAxisType = getTypeOfAxis(_points[0].chartData[0].data, false);
+        } else {
+            Object.keys(_lineObject).forEach((lineLegend)=>{
+                if (!_lineObject[lineLegend][0].useSecondaryYScale) {
+                    _yAxisType = getTypeOfAxis(_lineObject[lineLegend][0].y, false);
+                }
+            });
+        }
+        _yAxisLabels = _getOrderedYAxisLabels();
+    }
+    function _getYDomainMargins(containerHeight) {
+        /**
+       * Specifies the extra top margin to apply above the highest y-axis tick label.
+       * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
+       */ let yAxisTickMarginTop = 0;
+        /** Total height available to render the bars */ const totalHeight = containerHeight - _margins.bottom - _margins.top;
+        if (_yAxisType === YAxisType.StringAxis) {
+            /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;
+            _points.forEach((xPoint)=>{
+                /** Height of the stacked bar, expressed in multiples of the height of a y-axis label (or category) */ let barHeightInLabels = 0;
+                xPoint.chartData.forEach((bar)=>{
+                    barHeightInLabels += _yAxisLabels.indexOf(`${bar.data}`) + 1;
+                });
+                maxBarHeightInLabels = Math.max(maxBarHeightInLabels, barHeightInLabels);
+            });
+            /** Height of a y-axis label (or category) */ const yAxisLabelHeight = maxBarHeightInLabels === 0 ? 0 : totalHeight / maxBarHeightInLabels;
+            yAxisTickMarginTop += yAxisLabelHeight * (maxBarHeightInLabels - _yAxisLabels.length);
+        }
+        return {
+            ..._margins,
+            top: _margins.top + yAxisTickMarginTop
+        };
+    }
+    function _getOrderedXAxisLabels() {
+        if (_xAxisType !== XAxisTypes.StringAxis) {
+            return [];
+        }
+        return sortAxisCategories(_mapCategoryToValues(), props.xAxisCategoryOrder);
+    }
+    function _getOrderedYAxisLabels() {
+        if (_yAxisType !== YAxisType.StringAxis) {
+            return [];
+        }
+        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
+    }
+    function _mapCategoryToValues(isYAxis = false) {
+        const categoryToValues = {};
+        _points.forEach((point)=>{
+            var _point_lineData;
+            point.chartData.forEach((bar)=>{
+                const category = isYAxis ? bar.data : point.xAxisPoint;
+                const value = isYAxis ? point.xAxisPoint : bar.data;
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                if (typeof value === 'number') {
+                    categoryToValues[category].push(value);
+                }
+            });
+            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((linePoint)=>{
+                if (isYAxis && linePoint.useSecondaryYScale) {
+                    return;
+                }
+                const category = isYAxis ? linePoint.y : point.xAxisPoint;
+                const value = isYAxis ? point.xAxisPoint : linePoint.y;
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                if (typeof value === 'number') {
+                    categoryToValues[category].push(value);
+                }
+            });
+        });
+        return categoryToValues;
+    }
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -956,6 +1068,12 @@ export const VerticalStackedBarChart = (props)=>{
             },
             componentRef: cartesianChartRef,
             showRoundOffXTickValues: !isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding),
+            yAxisType: _yAxisType,
+            stringDatasetForYAxisDomain: [
+                '',
+                ..._yAxisLabels
+            ],
+            getYDomainMargins: _getYDomainMargins,
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
                 return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
@@ -969,5 +1087,5 @@ export const VerticalStackedBarChart = (props)=>{
         },
         "aria-label": 'Graph has no data to display'
     });
-};
+});
 VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';