@fluentui/react-charting 5.23.97 → 5.24.1

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

@@ -8,7 +8,8 @@ import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Legends } from '../Legends/index';
 import { CartesianChart, ChartHoverCard, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatValueLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, areArraysEqual, calculateLongestLabelWidth, } from '../../utilities/index';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
@@ -25,6 +26,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._isRtl = getRTL();
         _this.Y_ORIGIN = 0;
+        _this._yAxisLabels = [];
         _this.toImage = function (opts) {
             var _a, _b;
             return 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);
@@ -121,13 +123,20 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     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 === 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) {
@@ -135,12 +144,16 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     // 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 === YAxisType.StringAxis
+                        ? yScalePrimary.bandwidth() / 2
+                        : 0;
                     dots.push(React.createElement("circle", __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),
@@ -243,7 +256,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 var xScaleBandwidthTranslate = _this._xAxisType !== 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 === YAxisType.StringAxis &&
+                            typeof yBarScale(point.data) === 'undefined');
+                });
                 if (!barsToDisplay.length) {
                     return undefined;
                 }
@@ -251,7 +269,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 if (heightValueScale < 0) {
                     return undefined;
                 }
-                var yBaseline = containerHeight - _this.margins.bottom - yBarScale(_this.Y_ORIGIN);
+                var yBaseline = containerHeight -
+                    _this.margins.bottom -
+                    (_this._yAxisType === YAxisType.StringAxis ? 0 : yBarScale(_this.Y_ORIGIN));
                 var yPositiveStart = yBaseline;
                 var yNegativeStart = yBaseline;
                 var yPoint = 0;
@@ -284,22 +304,33 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                         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 === 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 = 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) {
@@ -339,7 +370,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 };
                 var showLabel = false;
                 var barLabel = 0;
-                if (!_this.props.hideLabels) {
+                if (!_this.props.hideLabels && _this._yAxisType !== YAxisType.StringAxis) {
                     if (_this._noLegendHighlighted()) {
                         showLabel = true;
                         barLabel = barTotalValue;
@@ -357,7 +388,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     React.createElement("g", __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)") }, 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)") }, formatScientificLimitWidth(barLabel)))));
             });
             // Removing un wanted tooltip div from DOM, when prop not provided.
             if (!_this.props.showXAxisLablesTooltip) {
@@ -426,7 +457,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         // 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 === YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement));
         };
         _this._closeCallout = function () {
             _this.setState({
@@ -461,7 +492,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 /** if shouldFocusWholeStack is true */
                 var xValue_1 = singleChartData.xAxisCalloutData ||
                     (singleChartData.xAxisPoint instanceof Date
-                        ? formatDate(singleChartData.xAxisPoint)
+                        ? formatDateToLocaleString(singleChartData.xAxisPoint, _this.props.culture, _this.props.useUTC)
                         : singleChartData.xAxisPoint);
                 var pointValues = singleChartData.chartData
                     .map(function (pt) {
@@ -483,7 +514,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             var xValue = singleChartData.xAxisCalloutData ||
                 (!isLinePoint && point.xAxisCalloutData) ||
                 (singleChartData.xAxisPoint instanceof Date
-                    ? formatDate(singleChartData.xAxisPoint)
+                    ? formatDateToLocaleString(singleChartData.xAxisPoint, _this.props.culture, _this.props.useUTC)
                     : singleChartData.xAxisPoint);
             var legend = point.legend;
             var yValue = point.yAxisCalloutData ||
@@ -561,6 +592,70 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             });
             return { startValue: d3Min(values), endValue: d3Max(values) };
         };
+        _this._initYAxisParams = function () {
+            if (_this._points[0].chartData.length > 0) {
+                _this._yAxisType = getTypeOfAxis(_this._points[0].chartData[0].data, false);
+            }
+            else {
+                Object.keys(_this._lineObject).forEach(function (lineLegend) {
+                    if (!_this._lineObject[lineLegend][0].useSecondaryYScale) {
+                        _this._yAxisType = getTypeOfAxis(_this._lineObject[lineLegend][0].y, false);
+                    }
+                });
+            }
+            if (_this._yAxisType === 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 === 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 __assign(__assign({}, _this.margins), { top: _this.margins.top + yAxisTickMarginTop });
+        };
         initializeComponentRef(_this);
         _this.state = {
             isCalloutVisible: false,
@@ -629,7 +724,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             return (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: this._getMinMaxOfYAxis, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? FocusZoneDirection.horizontal : FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
                 xAxisInnerPadding: this._xAxisInnerPadding,
                 xAxisOuterPadding: this._xAxisOuterPadding,
-            }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !isScalePaddingDefined(this.props.xAxisInnerPadding, this.props.xAxisPadding), 
+            }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !isScalePaddingDefined(this.props.xAxisInnerPadding, this.props.xAxisPadding), yAxisType: this._yAxisType, stringDatasetForYAxisDomain: __spreadArray([''], this._yAxisLabels, true), getYDomainMargins: this._getYDomainMargins, 
                 /* eslint-disable react/jsx-no-bind */
                 children: function (props) {
                     return (React.createElement(React.Fragment, null,
@@ -659,15 +754,23 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         this._lineObject = this._getFormattedLineData(this.props.data);
         this._xAxisInnerPadding = getScalePadding(this.props.xAxisInnerPadding, this.props.xAxisPadding, this._xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         this._xAxisOuterPadding = 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 === 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,
@@ -814,7 +917,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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
                 ? __spreadArray(__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 ? formatDate(stack.xAxisPoint, this.props.useUTC) : stack.xAxisPoint,
+            hoverXValue: stack.xAxisPoint instanceof Date
+                ? formatDateToLocaleString(stack.xAxisPoint, this.props.culture, this.props.useUTC)
+                : stack.xAxisPoint,
             stackCalloutProps: stack,
             activeXAxisDataPoint: stack.xAxisPoint,
             callOutAccessibilityData: stack.stackCallOutAccessibilityData,
@@ -837,22 +942,32 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     };
     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 === 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 === YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
         return {
             gapHeight: gapHeight,
             heightValueScale: heightValueScale,