@fluentui/react-charting 5.23.97 → 5.24.0

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

@@ -11,6 +11,7 @@ var Callout_1 = require("@fluentui/react/lib/Callout");
 var index_1 = require("../Legends/index");
 var index_2 = require("../../index");
 var react_focus_1 = require("@fluentui/react-focus");
+var chart_utilities_1 = require("@fluentui/chart-utilities");
 var index_3 = require("../../utilities/index");
 var image_export_utils_1 = require("../../utilities/image-export-utils");
 var getClassNames = (0, Utilities_1.classNamesFunction)();
@@ -28,6 +29,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         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);
@@ -124,13 +126,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 === 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) {
@@ -138,12 +147,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 === 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),
@@ -246,7 +259,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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;
                 }
@@ -254,7 +272,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 === index_3.YAxisType.StringAxis ? 0 : yBarScale(_this.Y_ORIGIN));
                 var yPositiveStart = yBaseline;
                 var yNegativeStart = yBaseline;
                 var yPoint = 0;
@@ -287,22 +307,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 === 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) {
@@ -342,7 +373,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 };
                 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;
@@ -360,7 +391,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     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) {
@@ -429,7 +460,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 === index_3.YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement));
         };
         _this._closeCallout = function () {
             _this.setState({
@@ -464,7 +495,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 /** 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) {
@@ -486,7 +517,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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 ||
@@ -564,6 +595,70 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             });
             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,
@@ -632,7 +727,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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,
@@ -662,15 +757,23 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         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,
@@ -817,7 +920,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
                 ? 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,
@@ -840,22 +945,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 === 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,