@fluentui/react-charts 9.3.7 → 9.3.9

package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {},\n    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","HighContrastSelector","getBarLabelStyle","getTooltipStyle","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","ojy3ng","Bj7tp1g","d","p","m","useVerticalBarChartStyles","props","baseStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAuCKwD,yBAAyB;;;IAlC7BlD,0BAA0B;;;;uBAJE,gBAAgB;AAIlD,mCAAmC;IACtCC,oBAAoB,EAAE,+BAA+B;IACrDC,OAAO,EAAE,kBAAkB;IAC3BC,QAAQ,EAAE,mBAAmB;IAC7BC,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE,EAAE;IAClBC,aAAa,EAAE,EAAE;IACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAG1B,eAAA,EAAA;IAAAO,oBAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAmB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvC,QAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAmB,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAxC,UAAA,EAAA;QAAAyC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHnB,oBAAoB,MAAEN,mBAAY,EAACK,0BAA0B,CAACC,oBAAoB,EAAEmD,UAAU,CAACnD,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QAC5JC,OAAO,MAAEP,mBAAY,EAACK,0BAA0B,CAACE,OAAO,EAAEkD,UAAU,CAAClD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACxGC,QAAQ,MAAER,mBAAY,EAACK,0BAA0B,CAACG,QAAQ,EAAEiD,UAAU,CAACjD,QAAQ,CAAC,wBAAA,EAA2B,CAAC;QAC5GC,UAAU,MAAET,mBAAY,EAACK,0BAA0B,CAACI,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,0BAAA,EAA6B;IACvH,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {},\n    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","HighContrastSelector","getBarLabelStyle","getTooltipStyle","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","ojy3ng","Bj7tp1g","d","p","m","useVerticalBarChartStyles","props","baseStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAuCKuD,yBAAyB;;;IAlC7BjD,0BAA0B;;;;uBAJE,gBAAgB;AAIlD,mCAAmC;IACtCC,oBAAoB,EAAE,+BAA+B;IACrDC,OAAO,EAAE,kBAAkB;IAC3BC,QAAQ,EAAE,mBAAmB;IAC7BC,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE,EAAE;IAClBC,aAAa,EAAE,EAAE;IACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAG1B,eAAA,EAAA;IAAAO,oBAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAmB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAtC,QAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAvC,UAAA,EAAA;QAAAwC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,MAAMC,UAAU,GAAG/B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHnB,oBAAoB,MAAEN,mBAAY,EAACK,0BAA0B,CAACC,oBAAoB,EAAEkD,UAAU,CAAClD,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QAC5JC,OAAO,MAAEP,mBAAY,EAACK,0BAA0B,CAACE,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACxGC,QAAQ,MAAER,mBAAY,EAACK,0BAA0B,CAACG,QAAQ,EAAEgD,UAAU,CAAChD,QAAQ,CAAC,wBAAA,EAA2B,CAAC;QAC5GC,UAAU,MAAET,mBAAY,EAACK,0BAA0B,CAACI,UAAU,EAAE+C,UAAU,CAAC/C,UAAU,CAAC,0BAAA,EAA6B;IACvH,CAAC;AACL,CAAC"}

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -12,11 +12,11 @@ Object.defineProperty(exports, "VerticalStackedBarChart", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _d3array = require("d3-array");
-const _d3selection = require("d3-selection");
 const _useVerticalStackedBarChartStylesstyles = require("./useVerticalStackedBarChartStyles.styles");
 const _d3scale = require("d3-scale");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
 const _index = require("../../index");
 const _index1 = require("../../utilities/index");
 const _chartutilities = require("@fluentui/chart-utilities");
@@ -34,8 +34,11 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     };
     const _isRtl = (0, _index1.useRtl)();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
-    const _tooltipId = (0, _reactutilities.useId)('VSBCTooltipId_');
     const _emptyChartId = (0, _reactutilities.useId)('_VSBC_empty');
+    const _arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'vertical',
+        circular: true
+    });
     let _points = [];
     let _dataset;
     let _xAxisLabels = [];
@@ -165,29 +168,27 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             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);
+        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+            _updatePosition(clientX, clientY);
+            setPopoverOpen(true);
+            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+            setCalloutLegend(lineData.legend);
+            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+            setColor(lineData.color);
         }
     }
-    function _onStackHoverFocus(stack, mouseEvent) {
+    function _onStackHoverFocus(stack, event) {
         var _stack_lineData;
         let clientX = 0;
         let clientY = 0;
-        if ('clientX' in mouseEvent) {
-            clientX = mouseEvent.clientX;
-            clientY = mouseEvent.clientY;
+        if ('clientX' in event) {
+            clientX = event.clientX;
+            clientY = event.clientY;
         } else {
-            // Handle case where mouseEvent is an SVGGElement
-            const boundingRect = mouseEvent.getBoundingClientRect();
+            // Handle React FocusEvent or SVGGElement
+            const element = 'target' in event ? event.target : event;
+            const boundingRect = element.getBoundingClientRect();
             clientX = boundingRect.left + boundingRect.width / 2;
             clientY = boundingRect.top + boundingRect.height / 2;
         }
@@ -338,19 +339,9 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
     }
-    function _toFocusWholeStack(_isHavingLines) {
+    function _toFocusWholeStack() {
         const { isCalloutForStack = false } = props;
-        let shouldFocusStackOnly = false;
-        if (_isHavingLines) {
-            if (_getHighlightedLegend().length === 1) {
-                shouldFocusStackOnly = false;
-            } else {
-                shouldFocusStackOnly = true;
-            }
-        } else {
-            shouldFocusStackOnly = isCalloutForStack;
-        }
-        return shouldFocusStackOnly;
+        return isCalloutForStack;
     }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
@@ -456,8 +447,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                 const circleRef = {
                     refElement: null
                 };
-                const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
                 const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === _index1.YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
+                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
                 dots.push(/*#__PURE__*/ _react.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
@@ -475,13 +466,11 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                     ref: (e)=>{
                         circleRef.refElement = e;
                     },
-                    ...noBarsAndLinesActive ? {
-                        tabIndex: !props.hideTooltip ? 0 : undefined,
-                        onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
-                        onBlur: _handleMouseOut,
-                        role: 'img',
-                        'aria-label': _getAriaLabel(circlePoint.xItem, circlePoint)
-                    } : {}
+                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
+                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
+                    onBlur: _handleMouseOut,
+                    role: "img",
+                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
                 }));
             });
         });
@@ -748,8 +737,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     const classes = (0, _useVerticalStackedBarChartStylesstyles.useVerticalStackedBarChartStyles)(props);
     function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
         const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         if (_xAxisType === _index1.XAxisTypes.StringAxis) {
             _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
         }
@@ -874,17 +862,28 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             };
             let showLabel = false;
             let barLabel = 0;
+            let selectedBarTotalValue = 0;
+            let customBarLabel = undefined;
             if (!props.hideLabels && _yAxisType !== _index1.YAxisType.StringAxis) {
+                // Collect all bars with barLabel that match the legend filter
+                const barLabelsToDisplay = barsToDisplay.filter((point)=>point.barLabel && (_noLegendHighlighted() || _isLegendHighlighted(point.legend)));
+                // For stacked bars, we want to show the total of the stack, not individual bar labels
+                // Only use customBarLabel if there's exactly one bar with a label in the stack
+                if (barLabelsToDisplay.length === 1) {
+                    customBarLabel = barLabelsToDisplay[0].barLabel;
+                }
                 if (_noLegendHighlighted()) {
                     showLabel = true;
-                    barLabel = barTotalValue;
+                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : barTotalValue;
+                    selectedBarTotalValue = barTotalValue;
                 } else {
                     barsToDisplay.forEach((point)=>{
                         if (_isLegendHighlighted(point.legend)) {
                             showLabel = true;
-                            barLabel += point.data;
+                            selectedBarTotalValue += point.data;
                         }
                     });
+                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : selectedBarTotalValue;
                 }
             }
             return /*#__PURE__*/ _react.createElement("g", {
@@ -898,7 +897,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             }, singleBar), !props.hideLabels && _barWidth >= 16 && showLabel && /*#__PURE__*/ _react.createElement("text", {
                 x: xPoint + _barWidth / 2,
                 //if total bar value >=0, show label above top bar, otherwise below bottom bar
-                y: barLabel >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
+                y: selectedBarTotalValue >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
                 textAnchor: "middle",
                 className: classes.barLabel,
                 "aria-label": `Total: ${barLabel}`,
@@ -908,27 +907,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                     direction: 'ltr',
                     unicodeBidi: 'isolate'
                 }
-            }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.formatScientificLimitWidth)(barLabel)));
+            }, typeof barLabel === 'string' ? barLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.formatScientificLimitWidth)(barLabel)));
         });
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = (0, _d3selection.select)(xElement).call(xBarScale);
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && (0, _index1.tooltipOfAxislabels)(tooltipProps);
-        }
         return bars.filter((bar)=>!!bar);
     }
     function _getMinMaxOfYAxis(dataset, yAxisType, useSecondaryYScale) {
@@ -1030,7 +1010,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         _dataset = _createDataSetLayer();
         const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
         const calloutProps = {
@@ -1044,7 +1024,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ...(0, _index1.getAccessibleDataObject)(callOutAccessibilityData),
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
-            isCalloutForStack: props.isCalloutForStack || _isHavingLines && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
+            isCalloutForStack: shouldFocusWholeStack,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
@@ -1089,7 +1069,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ],
             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)));
+                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
         });
     }