@fluentui/react-charting 5.23.97 → 5.24.1

package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../Legends/index", "../../index", "@fluentui/react-focus", "../../utilities/index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, index_1, index_2, react_focus_1, index_3, image_export_utils_1) {
+define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../Legends/index", "../../index", "@fluentui/react-focus", "@fluentui/chart-utilities", "../../utilities/index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, index_1, index_2, react_focus_1, chart_utilities_1, index_3, image_export_utils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.VerticalStackedBarChartBase = void 0;
@@ -17,6 +17,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
             _this.Y_ORIGIN = 0;
+            _this._yAxisLabels = [];
             _this.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.toImage)((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
@@ -113,13 +114,20 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         var useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && yScaleSecondary;
                         var y1 = useSecondaryYScale
                             ? yScaleSecondary(lineObject[item][i - 1].y)
-                            : yScalePrimary(lineObject[item][i - 1].y);
+                            : //eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                yScalePrimary(lineObject[item][i - 1].y);
                         var x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
-                        var y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
+                        var y2 = useSecondaryYScale
+                            ? yScaleSecondary(lineObject[item][i].y)
+                            : //eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                yScalePrimary(lineObject[item][i].y);
+                        var yScaleBandwidthTranslate = !useSecondaryYScale && _this._yAxisType === index_3.YAxisType.StringAxis
+                            ? yScalePrimary.bandwidth() / 2
+                            : 0;
                         if (lineBorderWidth > 0) {
-                            borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }));
+                            borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", ").concat(yScaleBandwidthTranslate, ")") }));
                         }
-                        lines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]), onMouseLeave: _this._handleMouseOut }));
+                        lines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", ").concat(yScaleBandwidthTranslate, ")"), onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]), onMouseLeave: _this._handleMouseOut }));
                     }
                 });
                 Object.keys(lineObject).forEach(function (item, index) {
@@ -127,12 +135,16 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                         var circleRef = { refElement: null };
                         var noBarsActive = circlePoint.xItem.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length === 0;
+                        var yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _this._yAxisType === index_3.YAxisType.StringAxis
+                            ? yScalePrimary.bandwidth() / 2
+                            : 0;
                         dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && yScaleSecondary
                                 ? yScaleSecondary(circlePoint.y)
-                                : yScalePrimary(circlePoint.y), onMouseOver: _this._lineHover.bind(_this, circlePoint), onMouseLeave: _this._handleMouseOut, r: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, 
+                                : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    yScalePrimary(circlePoint.y), onMouseOver: _this._lineHover.bind(_this, circlePoint), onMouseLeave: _this._handleMouseOut, r: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, 
                             // 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: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), ref: function (e) { return (circleRef.refElement = e); } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
+                            opacity: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", ").concat(yScaleBandwidthTranslate, ")"), ref: function (e) { return (circleRef.refElement = e); } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
                             ? {
                                 'data-is-focusable': !_this.props.hideTooltip,
                                 onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef),
@@ -235,7 +247,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     var xScaleBandwidthTranslate = _this._xAxisType !== index_3.XAxisTypes.StringAxis ? -_this._barWidth / 2 : (xBarScale.bandwidth() - _this._barWidth) / 2;
                     var barTotalValue = 0;
                     // Removing datapoints with zero data
-                    var barsToDisplay = singleChartData.chartData.filter(function (point) { return point.data !== 0; });
+                    var barsToDisplay = singleChartData.chartData.filter(function (point) {
+                        return point.data !== 0 &&
+                            point.data !== '' &&
+                            !(_this._yAxisType === index_3.YAxisType.StringAxis &&
+                                typeof yBarScale(point.data) === 'undefined');
+                    });
                     if (!barsToDisplay.length) {
                         return undefined;
                     }
@@ -243,7 +260,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     if (heightValueScale < 0) {
                         return undefined;
                     }
-                    var yBaseline = containerHeight - _this.margins.bottom - yBarScale(_this.Y_ORIGIN);
+                    var yBaseline = containerHeight -
+                        _this.margins.bottom -
+                        (_this._yAxisType === index_3.YAxisType.StringAxis ? 0 : yBarScale(_this.Y_ORIGIN));
                     var yPositiveStart = yBaseline;
                     var yNegativeStart = yBaseline;
                     var yPoint = 0;
@@ -276,22 +295,33 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             onClick: _this._onClick.bind(_this, point),
                             role: 'img',
                         };
-                        var barHeight = Math.abs(heightValueScale * point.data);
-                        var minHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
-                        if (barHeight < minHeight) {
-                            barHeight = minHeight;
-                        }
+                        var barHeight;
                         var gapOffset = index ? gapHeight : 0;
-                        if (point.data >= _this.Y_ORIGIN) {
+                        if (_this._yAxisType === index_3.YAxisType.StringAxis) {
+                            barHeight = Math.max(containerHeight -
+                                _this.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);
+                            var minHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
+                            if (barHeight < minHeight) {
+                                barHeight = minHeight;
+                            }
+                            if (point.data >= _this.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;
                         var gradientId = (0, Utilities_1.getId)('VSBC_Gradient') + "_".concat(indexNumber, "_").concat(index);
                         // If set, apply the corner radius to the top of the final bar
                         if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
@@ -331,7 +361,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     };
                     var showLabel = false;
                     var barLabel = 0;
-                    if (!_this.props.hideLabels) {
+                    if (!_this.props.hideLabels && _this._yAxisType !== index_3.YAxisType.StringAxis) {
                         if (_this._noLegendHighlighted()) {
                             showLabel = true;
                             barLabel = barTotalValue;
@@ -349,7 +379,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         React.createElement("g", tslib_1.__assign({ id: "".concat(indexNumber, "-singleBar"), ref: function (e) { return (groupRef.refElement = e); } }, stackFocusProps), singleBar),
                         !_this.props.hideLabels && _this._barWidth >= 16 && showLabel && (React.createElement("text", { x: xPoint + _this._barWidth / 2, 
                             //if total bar value >=0, show label above top bar, otherwise below bottom bar
-                            y: barLabel >= _this.Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12, textAnchor: "middle", className: _this._classNames.barLabel, "aria-label": "Total: ".concat(barLabel), role: "img", transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (0, index_3.formatValueLimitWidth)(barLabel)))));
+                            y: barLabel >= _this.Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12, textAnchor: "middle", className: _this._classNames.barLabel, "aria-label": "Total: ".concat(barLabel), role: "img", transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (0, index_3.formatScientificLimitWidth)(barLabel)))));
                 });
                 // Removing un wanted tooltip div from DOM, when prop not provided.
                 if (!_this.props.showXAxisLablesTooltip) {
@@ -418,7 +448,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             xScale, yScale, containerHeight, containerWidth, xElement) {
                 var _a = _this._getScales(containerHeight, containerWidth), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
-                return (_this._bars = _this._createBar(xBarScale, yBarScale, containerHeight, xElement));
+                return (_this._bars = _this._createBar(xBarScale, _this._yAxisType === index_3.YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement));
             };
             _this._closeCallout = function () {
                 _this.setState({
@@ -453,7 +483,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     /** if shouldFocusWholeStack is true */
                     var xValue_1 = singleChartData.xAxisCalloutData ||
                         (singleChartData.xAxisPoint instanceof Date
-                            ? (0, index_3.formatDate)(singleChartData.xAxisPoint)
+                            ? (0, chart_utilities_1.formatDateToLocaleString)(singleChartData.xAxisPoint, _this.props.culture, _this.props.useUTC)
                             : singleChartData.xAxisPoint);
                     var pointValues = singleChartData.chartData
                         .map(function (pt) {
@@ -475,7 +505,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var xValue = singleChartData.xAxisCalloutData ||
                     (!isLinePoint && point.xAxisCalloutData) ||
                     (singleChartData.xAxisPoint instanceof Date
-                        ? (0, index_3.formatDate)(singleChartData.xAxisPoint)
+                        ? (0, chart_utilities_1.formatDateToLocaleString)(singleChartData.xAxisPoint, _this.props.culture, _this.props.useUTC)
                         : singleChartData.xAxisPoint);
                 var legend = point.legend;
                 var yValue = point.yAxisCalloutData ||
@@ -553,6 +583,70 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 });
                 return { startValue: (0, d3_array_1.min)(values), endValue: (0, d3_array_1.max)(values) };
             };
+            _this._initYAxisParams = function () {
+                if (_this._points[0].chartData.length > 0) {
+                    _this._yAxisType = (0, index_3.getTypeOfAxis)(_this._points[0].chartData[0].data, false);
+                }
+                else {
+                    Object.keys(_this._lineObject).forEach(function (lineLegend) {
+                        if (!_this._lineObject[lineLegend][0].useSecondaryYScale) {
+                            _this._yAxisType = (0, index_3.getTypeOfAxis)(_this._lineObject[lineLegend][0].y, false);
+                        }
+                    });
+                }
+                if (_this._yAxisType === index_3.YAxisType.StringAxis) {
+                    var legendToYValues_1 = {};
+                    _this._points.forEach(function (xPoint) {
+                        xPoint.chartData.forEach(function (bar) {
+                            if (!legendToYValues_1[bar.legend]) {
+                                legendToYValues_1[bar.legend] = ["".concat(bar.data)];
+                            }
+                            else {
+                                legendToYValues_1[bar.legend].push("".concat(bar.data));
+                            }
+                        });
+                    });
+                    var yAxisLabels_1 = new Set();
+                    Object.values(legendToYValues_1).forEach(function (yValues) {
+                        yValues.forEach(function (yVal) {
+                            yAxisLabels_1.add(yVal);
+                        });
+                    });
+                    Object.values(_this._lineObject).forEach(function (linePoints) {
+                        linePoints.forEach(function (linePoint) {
+                            if (!linePoint.useSecondaryYScale) {
+                                yAxisLabels_1.add("".concat(linePoint.y));
+                            }
+                        });
+                    });
+                    _this._yAxisLabels = Array.from(yAxisLabels_1);
+                }
+            };
+            _this._getYDomainMargins = function (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).
+                 */
+                var yAxisTickMarginTop = 0;
+                /** Total height available to render the bars */
+                var totalHeight = containerHeight - _this.margins.bottom - _this.margins.top;
+                if (_this._yAxisType === index_3.YAxisType.StringAxis) {
+                    /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */
+                    var maxBarHeightInLabels_1 = 0;
+                    _this._points.forEach(function (xPoint) {
+                        /** Height of the stacked bar, expressed in multiples of the height of a y-axis label (or category) */
+                        var barHeightInLabels = 0;
+                        xPoint.chartData.forEach(function (bar) {
+                            barHeightInLabels += _this._yAxisLabels.indexOf("".concat(bar.data)) + 1;
+                        });
+                        maxBarHeightInLabels_1 = Math.max(maxBarHeightInLabels_1, barHeightInLabels);
+                    });
+                    /** Height of a y-axis label (or category) */
+                    var yAxisLabelHeight = maxBarHeightInLabels_1 === 0 ? 0 : totalHeight / maxBarHeightInLabels_1;
+                    yAxisTickMarginTop += yAxisLabelHeight * (maxBarHeightInLabels_1 - _this._yAxisLabels.length);
+                }
+                return tslib_1.__assign(tslib_1.__assign({}, _this.margins), { top: _this.margins.top + yAxisTickMarginTop });
+            };
             (0, Utilities_1.initializeComponentRef)(_this);
             _this.state = {
                 isCalloutVisible: false,
@@ -621,7 +715,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: index_3.ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: index_3.createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: this._getMinMaxOfYAxis, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? react_focus_1.FocusZoneDirection.horizontal : react_focus_1.FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_3.XAxisTypes.StringAxis && {
                     xAxisInnerPadding: this._xAxisInnerPadding,
                     xAxisOuterPadding: this._xAxisOuterPadding,
-                }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !(0, index_3.isScalePaddingDefined)(this.props.xAxisInnerPadding, this.props.xAxisPadding), 
+                }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !(0, index_3.isScalePaddingDefined)(this.props.xAxisInnerPadding, this.props.xAxisPadding), yAxisType: this._yAxisType, stringDatasetForYAxisDomain: tslib_1.__spreadArray([''], this._yAxisLabels, true), getYDomainMargins: this._getYDomainMargins, 
                     /* eslint-disable react/jsx-no-bind */
                     children: function (props) {
                         return (React.createElement(React.Fragment, null,
@@ -651,15 +745,23 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             this._lineObject = this._getFormattedLineData(this.props.data);
             this._xAxisInnerPadding = (0, index_3.getScalePadding)(this.props.xAxisInnerPadding, this.props.xAxisPadding, this._xAxisType === index_3.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
             this._xAxisOuterPadding = (0, index_3.getScalePadding)(this.props.xAxisOuterPadding, this.props.xAxisPadding, 0);
+            this._initYAxisParams();
         };
         VerticalStackedBarChartBase.prototype._createDataSetLayer = function () {
+            var _this = this;
             var tempArr = [];
             var dataset = this._points.map(function (singlePointData) {
+                tempArr.push(singlePointData.xAxisPoint);
+                if (_this._yAxisType === index_3.YAxisType.StringAxis) {
+                    return {
+                        x: singlePointData.xAxisPoint,
+                        y: 0,
+                    };
+                }
                 var total = 0;
                 singlePointData.chartData.forEach(function (point) {
                     total = total + point.data;
                 });
-                tempArr.push(singlePointData.xAxisPoint);
                 return {
                     x: singlePointData.xAxisPoint,
                     y: total,
@@ -806,7 +908,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 isCalloutVisible: stack.chartData.length > 0 || ((_c = (_b = stack.lineData) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0,
                 YValueHover: isLinesPresent
                     ? tslib_1.__spreadArray(tslib_1.__spreadArray([], lineData.sort(function (a, b) { return (a.data < b.data ? 1 : -1); }), true), stack.chartData.slice().reverse(), true) : stack.chartData.slice().reverse(),
-                hoverXValue: stack.xAxisPoint instanceof Date ? (0, index_3.formatDate)(stack.xAxisPoint, this.props.useUTC) : stack.xAxisPoint,
+                hoverXValue: stack.xAxisPoint instanceof Date
+                    ? (0, chart_utilities_1.formatDateToLocaleString)(stack.xAxisPoint, this.props.culture, this.props.useUTC)
+                    : stack.xAxisPoint,
                 stackCalloutProps: stack,
                 activeXAxisDataPoint: stack.xAxisPoint,
                 callOutAccessibilityData: stack.stackCallOutAccessibilityData,
@@ -829,22 +933,32 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         };
         VerticalStackedBarChartBase.prototype._getBarGapAndScale = function (bars, yBarScale, defaultTotalHeight) {
             var _a = this.props.barGapMax, barGapMax = _a === void 0 ? 0 : _a;
-            // 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
-            var totalData = bars.reduce(function (iter, value) { return iter + Math.abs(value.data); }, 0);
-            var totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(this.Y_ORIGIN));
+            var totalData = 0;
+            var totalHeight;
             var sumOfPercent = 0;
-            bars.forEach(function (point) {
-                var value = (Math.abs(point.data) / totalData) * 100;
-                if (value < 1 && value !== 0) {
-                    value = 1;
-                }
-                sumOfPercent += value;
-            });
-            var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+            var scalingRatio;
+            if (this._yAxisType === index_3.YAxisType.StringAxis) {
+                totalHeight =
+                    defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : bars.reduce(function (total, bar) { return 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(function (iter, value) { return iter + Math.abs(value.data); }, 0);
+                totalHeight =
+                    defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(this.Y_ORIGIN));
+                bars.forEach(function (point) {
+                    var value = (Math.abs(point.data) / totalData) * 100;
+                    if (value < 1 && value !== 0) {
+                        value = 1;
+                    }
+                    sumOfPercent += value;
+                });
+                scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+            }
             var gaps = barGapMax && bars.length - 1;
             var gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, (totalHeight * barGapMultiplier) / gaps));
-            var heightValueScale = (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
+            var heightValueScale = this._yAxisType === index_3.YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
             return {
                 gapHeight: gapHeight,
                 heightValueScale: heightValueScale,