@carbon/charts-vue 0.32.10 → 0.33.1

package/charts-vue.common.js

@@ -6834,7 +6834,7 @@ var tools_Tools;
     function getDimensions(el) {
         return {
             width: parseFloat(el.style.width.replace("px", "") || el.offsetWidth),
-            height: parseFloat(el.style.height.replace("px", "") || el.offsetHeight),
+            height: parseFloat(el.style.height.replace("px", "") || el.offsetHeight)
         };
     }
     Tools.getDimensions = getDimensions;
@@ -6864,7 +6864,7 @@ var tools_Tools;
                 .split(",");
             return {
                 tx: transforms[0],
-                ty: transforms[1],
+                ty: transforms[1]
             };
         }
         return null;
@@ -6886,7 +6886,7 @@ var tools_Tools;
         var xyString = match.split(",");
         return {
             x: parseFloat(xyString[0]),
-            y: parseFloat(xyString[1]),
+            y: parseFloat(xyString[1])
         };
     }
     Tools.getTranformOffsets = getTranformOffsets;
@@ -6933,19 +6933,21 @@ var tools_Tools;
     }
     Tools.convertValueToPercentage = convertValueToPercentage;
     /**
- * Truncate the labels
- * @export
- * @param {any} fullText
- * @param {any} truncationType
- * @param {any} numCharacter
- * @returns Truncated text
- */
+     * Truncate the labels
+     * @export
+     * @param {any} fullText
+     * @param {any} truncationType
+     * @param {any} numCharacter
+     * @returns Truncated text
+     */
     function truncateLabel(fullText, truncationType, numCharacter) {
         if (numCharacter > fullText.length) {
             return fullText;
         }
         if (truncationType === TruncationTypes.MID_LINE) {
-            return fullText.substr(0, numCharacter / 2) + "..." + fullText.substr(-numCharacter / 2);
+            return (fullText.substr(0, numCharacter / 2) +
+                "..." +
+                fullText.substr(-numCharacter / 2));
         }
         else if (truncationType === TruncationTypes.FRONT_LINE) {
             return "..." + fullText.substr(-numCharacter);
@@ -6970,7 +6972,7 @@ var tools_Tools;
     function arrayDifferences(oldArray, newArray) {
         var difference = {
             missing: [],
-            added: [],
+            added: []
         };
         oldArray.forEach(function (element) {
             if (newArray.indexOf(element) === -1) {
@@ -7057,7 +7059,7 @@ var tools_Tools;
                 y0: verticalCoordinates.x0,
                 y1: verticalCoordinates.x1,
                 x0: verticalCoordinates.y0,
-                x1: verticalCoordinates.y1,
+                x1: verticalCoordinates.y1
             };
         }
         return verticalCoordinates;
@@ -7096,7 +7098,7 @@ var en_US_default = /*#__PURE__*/__webpack_require__.n(en_US);
 var standardTruncationOptions = {
     type: TruncationTypes.END_LINE,
     threshold: 16,
-    numCharacter: 14,
+    numCharacter: 14
 };
 /**
  * Legend options
@@ -7116,9 +7118,9 @@ var legend = {
     },
     checkbox: {
         radius: 6.5,
-        spaceAfter: 4,
+        spaceAfter: 4
     },
-    truncation: standardTruncationOptions,
+    truncation: standardTruncationOptions
 };
 /**
  * Grid options
@@ -7164,19 +7166,19 @@ var barChartTooltip = tools_Tools.merge({}, axisChartTooltip, {
 var configuration_axes = {
     top: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     bottom: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     left: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     right: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     }
 };
 var timeScale = {
@@ -7209,7 +7211,8 @@ var configuration_chart = {
     },
     data: {
         groupMapsTo: "group",
-        loading: false
+        loading: false,
+        selectedGroups: []
     },
     color: {
         scale: null
@@ -7345,7 +7348,11 @@ var gaugeChart = tools_Tools.merge({}, configuration_chart, {
         numberSpacing: 10,
         deltaFontSize: function (radius) { return radius / 8; },
         valueFontSize: function (radius) { return radius / 2.5; },
-        numberFormatter: function (number) { return (number.toFixed(2) % 1 !== 0) ? number.toFixed(2).toLocaleString() : number.toFixed().toLocaleString(); }
+        numberFormatter: function (number) {
+            return number.toFixed(2) % 1 !== 0
+                ? number.toFixed(2).toLocaleString()
+                : number.toFixed().toLocaleString();
+        }
     }
 });
 /**
@@ -7772,7 +7779,7 @@ var getColor = function (obj, shade) { return obj[shade]; };
     magenta: function (shade) { return getColor(magenta, shade); },
     purple: function (shade) { return getColor(purple, shade); },
     red: function (shade) { return getColor(red, shade); },
-    teal: function (shade) { return getColor(teal, shade); },
+    teal: function (shade) { return getColor(teal, shade); }
 });
 //# sourceMappingURL=../../src/services/colors.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/services/colorPalettes.js
@@ -7794,7 +7801,7 @@ var WHITE = [
     services_colors.teal(50),
     services_colors.cyan(90),
     "#8a3800",
-    services_colors.purple(50),
+    services_colors.purple(50)
 ];
 var DARK = [
     services_colors.purple(60),
@@ -7810,7 +7817,7 @@ var DARK = [
     services_colors.teal(40),
     services_colors.cyan(20),
     "#ba4e00",
-    services_colors.purple(30),
+    services_colors.purple(30)
 ];
 var G10 = WHITE;
 var G90 = DARK;
@@ -12182,11 +12189,10 @@ var model_ChartModel = /** @class */ (function () {
         this.colorScale = {};
         this.services = services;
     }
-    ChartModel.prototype.getDisplayData = function () {
+    ChartModel.prototype.getAllDataFromDomain = function () {
         if (!this.get("data")) {
             return null;
         }
-        var ACTIVE = legend.items.status.ACTIVE;
         var dataGroups = this.getDataGroups();
         // Remove datasets that have been disabled
         var displayData = tools_Tools.clone(this.get("data"));
@@ -12205,12 +12211,26 @@ var model_ChartModel = /** @class */ (function () {
                     else {
                         var _a = axesOptions[axis].domain, start_1 = _a[0], end_1 = _a[1];
                         // Filter out data outside domain
-                        displayData = displayData.filter(function (datum) { return datum[mapsTo_1] >= start_1 && datum[mapsTo_1] <= end_1; });
+                        displayData = displayData.filter(function (datum) {
+                            return datum[mapsTo_1] >= start_1 && datum[mapsTo_1] <= end_1;
+                        });
                     }
                 }
             });
         }
         return displayData.filter(function (datum) {
+            return dataGroups.find(function (group) { return group.name === datum[groupMapsTo]; });
+        });
+    };
+    ChartModel.prototype.getDisplayData = function () {
+        if (!this.get("data")) {
+            return null;
+        }
+        var ACTIVE = legend.items.status.ACTIVE;
+        var dataGroups = this.getDataGroups();
+        var groupMapsTo = this.getOptions().data.groupMapsTo;
+        var allDataFromDomain = this.getAllDataFromDomain();
+        return allDataFromDomain.filter(function (datum) {
             var group = dataGroups.find(function (group) { return group.name === datum[groupMapsTo]; });
             return group.status === ACTIVE;
         });
@@ -12273,6 +12293,20 @@ var model_ChartModel = /** @class */ (function () {
         var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
         var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
         var stackKeys = src_map(displayData, function (datum) { return datum[domainIdentifier]; }).keys();
+        var axisPosition = this.services.cartesianScales.domainAxisPosition;
+        var scaleType = options.axes[axisPosition].scaleType;
+        // Sort keys
+        if (scaleType === ScaleTypes.TIME) {
+            stackKeys.sort(function (a, b) {
+                var dateA = new Date(a);
+                var dateB = new Date(b);
+                return dateA - dateB;
+            });
+        }
+        else if (scaleType === ScaleTypes.LOG ||
+            scaleType === ScaleTypes.LINEAR) {
+            stackKeys.sort(function (a, b) { return a - b; });
+        }
         var dataGroupNames = this.getDataGroupNames();
         return stackKeys.map(function (key) {
             var correspondingValues = { sharedStackKey: key };
@@ -12401,6 +12435,19 @@ var model_ChartModel = /** @class */ (function () {
                     group.name === changedLabel ? ACTIVE : DISABLED;
             });
         }
+        // Updates selected groups
+        var updatedActiveItems = dataGroups.filter(function (group) { return group.status === ACTIVE; });
+        var options = this.getOptions();
+        var hasUpdatedDeactivatedItems = dataGroups.some(function (group) { return group.status === DISABLED; });
+        // If there are deactivated items, map the item name into selected groups
+        if (hasUpdatedDeactivatedItems) {
+            options.data.selectedGroups = updatedActiveItems.map(function (activeItem) { return activeItem.name; });
+        }
+        else {
+            // If every item is active, clear array
+            options.data.selectedGroups = [];
+        }
+        ;
         // dispatch legend filtering event with the status of all the dataLabels
         this.services.events.dispatchEvent(Events.Legend.ITEMS_UPDATE, {
             dataGroups: dataGroups
@@ -12528,11 +12575,27 @@ var model_ChartModel = /** @class */ (function () {
     };
     ChartModel.prototype.generateDataGroups = function (data) {
         var groupMapsTo = this.getOptions().data.groupMapsTo;
-        var ACTIVE = legend.items.status.ACTIVE;
+        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var options = this.getOptions();
         var uniqueDataGroups = src_map(data, function (datum) { return datum[groupMapsTo]; }).keys();
+        // check if selectedGroups can be applied to chart with current data groups
+        if (options.data.selectedGroups.length) {
+            var hasAllSelectedGroups = options.data.selectedGroups
+                .every(function (groupName) { return uniqueDataGroups.includes(groupName); });
+            if (!hasAllSelectedGroups) {
+                options.data.selectedGroups = [];
+            }
+            ;
+        }
+        // Get group status based on items in selected groups
+        var getStatus = function (groupName) {
+            return !options.data.selectedGroups.length || options.data.selectedGroups.includes(groupName)
+                ? ACTIVE
+                : DISABLED;
+        };
         return uniqueDataGroups.map(function (groupName) { return ({
             name: groupName,
-            status: ACTIVE
+            status: getStatus(groupName)
         }); });
     };
     /*
@@ -13663,7 +13726,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         }
         var finalDimensions = {
             width: 0,
-            height: 0,
+            height: 0
         };
         var validateAndSetDimensions = function (dimensions) {
             if (dimensions) {
@@ -13682,7 +13745,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         };
         var attrDimensions = {
             width: svgSelector.attr("width"),
-            height: svgSelector.attr("height"),
+            height: svgSelector.attr("height")
         };
         var bbox, bboxDimensions, boundingRect, boundingRectDimensions;
         // In many versions of Firefox
@@ -13691,7 +13754,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
             bbox = svgSelector.node().getBBox();
             bboxDimensions = {
                 width: bbox.width,
-                height: bbox.height,
+                height: bbox.height
             };
         }
         catch (e) { }
@@ -13699,13 +13762,13 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
             boundingRect = svgSelector.node().getBoundingClientRect();
             boundingRectDimensions = {
                 width: boundingRect.width,
-                height: boundingRect.height,
+                height: boundingRect.height
             };
         }
         catch (e) { }
         var clientDimensions = {
             width: svgSelector.node().clientWidth,
-            height: svgSelector.node().clientHeight,
+            height: svgSelector.node().clientHeight
         };
         // If both attribute values are numbers
         // And not percentages or NaN
@@ -13738,7 +13801,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         try {
             var nativeDimensions = {
                 width: tools_Tools.getProperty(svgSelector.node(), "width", "baseVal", "value"),
-                height: tools_Tools.getProperty(svgSelector.node(), "height", "baseVal", "value"),
+                height: tools_Tools.getProperty(svgSelector.node(), "height", "baseVal", "value")
             };
             validateAndSetDimensions(nativeDimensions);
         }
@@ -13893,7 +13956,7 @@ var events_Events = /** @class */ (function (_super) {
         var newEvent;
         if (eventDetail) {
             newEvent = new CustomEvent(eventType, {
-                detail: eventDetail,
+                detail: eventDetail
             });
         }
         else {
@@ -16436,13 +16499,13 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
             top: null,
             right: null,
             bottom: null,
-            left: null,
+            left: null
         };
         _this.scales = {
             top: null,
             right: null,
             bottom: null,
-            left: null,
+            left: null
         };
         return _this;
     }
@@ -16502,7 +16565,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
     CartesianScales.prototype.getMainXAxisPosition = function () {
         var possibleXAxisPositions = [
             AxisPositions.BOTTOM,
-            AxisPositions.TOP,
+            AxisPositions.TOP
         ];
         return [this.domainAxisPosition, this.rangeAxisPosition].find(function (position) { return possibleXAxisPositions.indexOf(position) > -1; });
     };
@@ -16510,7 +16573,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
     CartesianScales.prototype.getMainYAxisPosition = function () {
         var possibleYAxisPositions = [
             AxisPositions.LEFT,
-            AxisPositions.RIGHT,
+            AxisPositions.RIGHT
         ];
         return [this.domainAxisPosition, this.rangeAxisPosition].find(function (position) { return possibleYAxisPositions.indexOf(position) > -1; });
     };
@@ -16551,7 +16614,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         var axisOptions = tools_Tools.getProperty(options, "axes", this.rangeAxisPosition);
         return axisOptions.mapsTo;
     };
-    /** Uses the primary Y Axis to get data items associated with that value. */
+    /** Uses the Y Axis to get data items associated with that value. */
     CartesianScales.prototype.getDataFromDomain = function (domainValue) {
         var displayData = this.model.getDisplayData();
         var domainIdentifier = this.getDomainIdentifier();
@@ -16610,7 +16673,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         var mainHorizontalScaleType = mainHorizontalAxisOptions.scaleType || ScaleTypes.LINEAR;
         var result = {
             domainAxisPosition: null,
-            rangeAxisPosition: null,
+            rangeAxisPosition: null
         };
         if (mainHorizontalScaleType === ScaleTypes.LABELS ||
             mainHorizontalScaleType === ScaleTypes.TIME) {
@@ -16716,7 +16779,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         }
         return {
             threshold: highestThreshold,
-            scaleValue: domainScale(highestThreshold.value),
+            scaleValue: domainScale(highestThreshold.value)
         };
     };
     CartesianScales.prototype.getHighestRangeThreshold = function () {
@@ -16731,7 +16794,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         var highestThreshold = thresholds.sort(function (a, b) { return b.value - a.value; })[0];
         return {
             threshold: highestThreshold,
-            scaleValue: rangeScale(highestThreshold.value),
+            scaleValue: rangeScale(highestThreshold.value)
         };
     };
     return CartesianScales;
@@ -16743,49 +16806,49 @@ function addSpacingToTimeDomain(domain, spaceToAddToEdges) {
     if (differenceInYears(endDate, startDate) > 1) {
         return [
             subYears(startDate, spaceToAddToEdges),
-            addYears(endDate, spaceToAddToEdges),
+            addYears(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInMonths(endDate, startDate) > 1) {
         return [
             subMonths(startDate, spaceToAddToEdges),
-            addMonths(endDate, spaceToAddToEdges),
+            addMonths(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInDays(endDate, startDate) > 1) {
         return [
             subDays(startDate, spaceToAddToEdges),
-            addDays(endDate, spaceToAddToEdges),
+            addDays(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInHours(endDate, startDate) > 1) {
         return [
             subHours(startDate, spaceToAddToEdges),
-            addHours(endDate, spaceToAddToEdges),
+            addHours(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInMinutes(endDate, startDate) > 30) {
         return [
             subMinutes(startDate, spaceToAddToEdges * 30),
-            addMinutes(endDate, spaceToAddToEdges * 30),
+            addMinutes(endDate, spaceToAddToEdges * 30)
         ];
     }
     if (differenceInMinutes(endDate, startDate) > 1) {
         return [
             subMinutes(startDate, spaceToAddToEdges),
-            addMinutes(endDate, spaceToAddToEdges),
+            addMinutes(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInSeconds(endDate, startDate) > 15) {
         return [
             subSeconds(startDate, spaceToAddToEdges * 15),
-            addSeconds(endDate, spaceToAddToEdges * 15),
+            addSeconds(endDate, spaceToAddToEdges * 15)
         ];
     }
     if (differenceInSeconds(endDate, startDate) > 1) {
         return [
             subSeconds(startDate, spaceToAddToEdges),
-            addSeconds(endDate, spaceToAddToEdges),
+            addSeconds(endDate, spaceToAddToEdges)
         ];
     }
     return [startDate, endDate];
@@ -17766,7 +17829,7 @@ var curves_Curves = /** @class */ (function (_super) {
             curveNatural: natural,
             curveStep: curve_step,
             curveStepAfter: stepAfter,
-            curveStepBefore: stepBefore,
+            curveStepBefore: stepBefore
         };
         return _this;
     }
@@ -17915,7 +17978,10 @@ var legend_Legend = /** @class */ (function (_super) {
         var addedLegendItems = legendItems
             .enter()
             .append("g")
-            .classed("legend-item", true);
+            .classed("legend-item", true)
+            .classed("active", function (d, i) {
+            return d.status === options.legend.items.status.ACTIVE;
+        });
         // Configs
         var checkboxRadius = options.legend.checkbox.radius;
         // Truncation
@@ -17944,8 +18010,7 @@ var legend_Legend = /** @class */ (function (_super) {
             .merge(legendItems.select("text"));
         // truncate the legend label if it's too long
         if (truncationType !== TruncationTypes.NONE) {
-            addedLegendItemsText
-                .html(function (d) {
+            addedLegendItemsText.html(function (d) {
                 if (d.name.length > truncationThreshold) {
                     return tools_Tools.truncateLabel(d.name, truncationType, truncationNumCharacter);
                 }
@@ -17955,8 +18020,7 @@ var legend_Legend = /** @class */ (function (_super) {
             });
         }
         else {
-            addedLegendItemsText
-                .html(function (d) { return d.name; });
+            addedLegendItemsText.html(function (d) { return d.name; });
         }
         this.breakItemsIntoLines(addedLegendItems);
         // Remove old elements as needed.
@@ -18036,11 +18100,19 @@ var legend_Legend = /** @class */ (function (_super) {
             legendItem
                 .select("text")
                 .attr("x", startingPoint + spaceNeededForCheckbox)
-                .attr("y", yOffset + yPosition + 2);
+                .attr("y", yOffset + yPosition + 3);
             lastYPosition = yPosition;
+            // Test if legendItems are placed in the correct direction
+            var testHorizontal = (!legendOrientation ||
+                legendOrientation === LegendOrientations.HORIZONTAL) &&
+                legendItem.select("rect.checkbox").attr("y") === '0';
+            var testVertical = legendOrientation === LegendOrientations.VERTICAL &&
+                legendItem.select("rect.checkbox").attr("x") === '0';
+            var hasCorrectLegendDirection = testHorizontal || testVertical;
             // Render checkbox check icon
             if (hasDeactivatedItems &&
-                legendItem.select("g.check").empty()) {
+                legendItem.select("g.check").empty() &&
+                hasCorrectLegendDirection) {
                 legendItem.append("g").classed("check", true).html("\n\t\t\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 32 32\" aria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\">\n\t\t\t\t\t\t\t\t<path d=\"M13 21.2l-7.1-7.1-1.4 1.4 7.1 7.1L13 24 27.1 9.9l-1.4-1.5z\"></path>\n\t\t\t\t\t\t\t\t<title>Checkmark</title>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t");
                 legendItem
                     .select("g.check svg")
@@ -18065,7 +18137,7 @@ var legend_Legend = /** @class */ (function (_super) {
         svg.selectAll("g.legend-item")
             .on("mouseover", function () {
             self.services.events.dispatchEvent(Events.Legend.ITEM_HOVER, {
-                hoveredElement: src_select(this),
+                hoveredElement: src_select(this)
             });
             // Configs
             var checkboxRadius = options.legend.checkbox.radius;
@@ -18083,7 +18155,7 @@ var legend_Legend = /** @class */ (function (_super) {
         })
             .on("click", function () {
             self.services.events.dispatchEvent(Events.Legend.ITEM_CLICK, {
-                clickedElement: src_select(this),
+                clickedElement: src_select(this)
             });
             var clickedItem = src_select(this);
             var clickedItemData = clickedItem.datum();
@@ -18095,7 +18167,7 @@ var legend_Legend = /** @class */ (function (_super) {
             if (hoveredItemData.name.length > truncationThreshold) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: hoveredItem,
-                    type: TooltipTypes.LEGEND,
+                    type: TooltipTypes.LEGEND
                 });
             }
         })
@@ -18104,7 +18176,7 @@ var legend_Legend = /** @class */ (function (_super) {
             hoveredItem.select("rect.hover-stroke").remove();
             self.services.events.dispatchEvent(Events.Tooltip.HIDE);
             self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
-                hoveredElement: hoveredItem,
+                hoveredElement: hoveredItem
             });
         });
     };
@@ -20678,7 +20750,7 @@ var TIME_INTERVALS = [
     ["daily", 24 * 60 * 60 * 1000],
     ["monthly", 30 * 24 * 60 * 60 * 1000],
     ["quarterly", 3 * 30 * 24 * 60 * 60 * 1000],
-    ["yearly", 12 * 30 * 24 * 60 * 60 * 1000],
+    ["yearly", 12 * 30 * 24 * 60 * 60 * 1000]
 ];
 // Return true if the tick is a primary tick, false otherwise
 function isTickPrimary(tick, i, interval, showDayName) {
@@ -20748,7 +20820,7 @@ function getTimeformats(timestamp) {
         d: date.getDate(),
         H: date.getHours(),
         m: date.getMinutes(),
-        s: date.getSeconds(),
+        s: date.getSeconds() // seconds: 0-59
     };
 }
 // Find the differences between consecutive numbers in an array
@@ -20904,7 +20976,7 @@ var threshold_Threshold = /** @class */ (function (_super) {
         if (scaleType === ScaleTypes.TIME) {
             var isVertical = [
                 AxisPositions.LEFT,
-                AxisPositions.RIGHT,
+                AxisPositions.RIGHT
             ].includes(axisPosition);
             var mainXScale = this.services.cartesianScales.getMainXScale();
             var mainYScale = this.services.cartesianScales.getMainYScale();
@@ -20935,20 +21007,20 @@ var threshold_Threshold = /** @class */ (function (_super) {
         // Find out whether threshold label should be shown on the left or right side
         var bestPlacementOption = this.positionService.findBestPlacementAt({
             left: mouseRelativePos[0],
-            top: mouseRelativePos[1],
+            top: mouseRelativePos[1]
         }, target, [
             PLACEMENTS.RIGHT,
             PLACEMENTS.LEFT,
             PLACEMENTS.TOP,
-            PLACEMENTS.BOTTOM,
+            PLACEMENTS.BOTTOM
         ], function () { return ({
             width: holder.offsetWidth,
-            height: holder.offsetHeight,
+            height: holder.offsetHeight
         }); });
         // Get coordinates to where label should be positioned
         var pos = this.positionService.findPositionAt({
             left: mouseRelativePos[0],
-            top: mouseRelativePos[1],
+            top: mouseRelativePos[1]
         }, target, bestPlacementOption);
         this.positionService.setElement(target, pos);
     };
@@ -20959,13 +21031,13 @@ var threshold_Threshold = /** @class */ (function (_super) {
             .on("mouseover mousemove", function () {
             self.threshold.classed("active", true);
             self.services.events.dispatchEvent(Events.Threshold.SHOW, {
-                hoveredElement: src_select(self.threshold),
+                hoveredElement: src_select(self.threshold)
             });
         })
             .on("mouseout", function () {
             self.threshold.classed("active", false);
             self.services.events.dispatchEvent(Events.Threshold.HIDE, {
-                hoveredElement: src_select(self.threshold),
+                hoveredElement: src_select(self.threshold)
             });
         });
     };
@@ -21033,12 +21105,12 @@ var title_Title = /** @class */ (function (_super) {
                 .on("mouseenter", function () {
                 self_1.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: title,
-                    type: TooltipTypes.TITLE,
+                    type: TooltipTypes.TITLE
                 });
             })
                 .on("mouseout", function () {
                 self_1.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                    hoveredElement: title,
+                    hoveredElement: title
                 });
             });
         }
@@ -21125,8 +21197,8 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
                     tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
-                (e.detail.type === TooltipTypes.LEGEND) ||
-                (e.detail.type === TooltipTypes.AXISLABEL)) {
+                e.detail.type === TooltipTypes.LEGEND ||
+                e.detail.type === TooltipTypes.AXISLABEL) {
                 var data = src_select(on_event.target).datum();
                 // Generate default tooltip
                 var defaultHTML = void 0;
@@ -21230,7 +21302,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             left: elementPosition.left -
                 holderPosition.left +
                 elementPosition.width / 2,
-            top: elementPosition.top - holderPosition.top - verticalOffset,
+            top: elementPosition.top - holderPosition.top - verticalOffset
         };
         return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
     };
@@ -21251,15 +21323,15 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             // Find out whether tooltip should be shown on the left or right side
             var bestPlacementOption = this.positionService.findBestPlacementAt({
                 left: mouseRelativePos[0],
-                top: mouseRelativePos[1],
+                top: mouseRelativePos[1]
             }, target, [
                 PLACEMENTS.RIGHT,
                 PLACEMENTS.LEFT,
                 PLACEMENTS.TOP,
-                PLACEMENTS.BOTTOM,
+                PLACEMENTS.BOTTOM
             ], function () { return ({
                 width: holder.offsetWidth,
-                height: holder.offsetHeight,
+                height: holder.offsetHeight
             }); });
             var horizontalOffset = this.model.getOptions().tooltip.datapoint.horizontalOffset;
             if (bestPlacementOption === PLACEMENTS.LEFT) {
@@ -21268,7 +21340,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             // Get coordinates to where tooltip should be positioned
             pos = this.positionService.findPositionAt({
                 left: mouseRelativePos[0] + horizontalOffset,
-                top: mouseRelativePos[1],
+                top: mouseRelativePos[1]
             }, target, bestPlacementOption);
         }
         this.positionService.setElement(target, pos);
@@ -21320,8 +21392,8 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
                     tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
-                (e.detail.type === TooltipTypes.LEGEND) ||
-                (e.detail.type === TooltipTypes.AXISLABEL)) {
+                e.detail.type === TooltipTypes.LEGEND ||
+                e.detail.type === TooltipTypes.AXISLABEL) {
                 var data = e.detail.hoveredElement.datum();
                 var hoveredElement = e.detail.hoveredElement.node();
                 var defaultHTML = void 0;
@@ -21349,7 +21421,8 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                     // default tooltip
                     tooltipTextContainer.html(defaultHTML);
                 }
-                if ((e.detail.type === TooltipTypes.LEGEND) || (e.detail.type === TooltipTypes.AXISLABEL)) {
+                if (e.detail.type === TooltipTypes.LEGEND ||
+                    e.detail.type === TooltipTypes.AXISLABEL) {
                     _this.positionTooltip();
                 }
                 else {
@@ -21400,7 +21473,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 left: barPosition.left -
                     holderPosition.left +
                     barPosition.width / 2,
-                top: barPosition.bottom - holderPosition.top + verticalOffset,
+                top: barPosition.bottom - holderPosition.top + verticalOffset
             };
             return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
         }
@@ -21410,7 +21483,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 left: barPosition.left -
                     holderPosition.left +
                     barPosition.width / 2,
-                top: barPosition.top - holderPosition.top - verticalOffset,
+                top: barPosition.top - holderPosition.top - verticalOffset
             };
             return { placement: TooltipPosition.TOP, position: tooltipPos };
         }
@@ -21426,9 +21499,10 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
         else if (type === TooltipTypes.AXISLABEL) {
             return "<div class=\"axis-tooltip\"><p class=\"label\">" + data + "</p></div>";
         }
+        var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
         var formattedValue = tools_Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
             ? this.model.getOptions().tooltip.valueFormatter(data.value)
-            : data.value.toLocaleString("en");
+            : data[rangeIdentifier].toLocaleString("en");
         return "<div class=\"datapoint-tooltip\"><p class=\"value\">" + formattedValue + "</p></div>";
     };
     /**
@@ -22057,11 +22131,13 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
         _this.type = "area-stacked";
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
+            var options = _this.model.getOptions();
+            var groupMapsTo = options.data.groupMapsTo;
             _this.parent
                 .selectAll("path.area")
                 .transition(_this.services.transitions.getTransition("legend-hover-area"))
                 .attr("opacity", function (d) {
-                if (d[0].group !== hoveredElement.datum().name) {
+                if (d[0][groupMapsTo] !== hoveredElement.datum().name) {
                     return configuration_area.opacity.unselected;
                 }
                 return configuration_area.opacity.selected;
@@ -22087,6 +22163,7 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
         var svg = this.getContainerSVG();
         var self = this;
         var options = this.model.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
         var mainXScale = this.services.cartesianScales.getMainXScale();
         var mainYScale = this.services.cartesianScales.getMainYScale();
         var domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition();
@@ -22095,13 +22172,11 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
         if (!isTimeSeries) {
             return;
         }
-        var percentage = Object.keys(options.axes).some(function (axis) {
-            return options.axes[axis].percentage;
-        });
+        var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
         var stackedData = this.model.getStackedData({ percentage: percentage });
         var areas = svg
             .selectAll("path.area")
-            .data(stackedData, function (d) { return d[0].group; });
+            .data(stackedData, function (d) { return d[0][groupMapsTo]; });
         // D3 area generator function
         this.areaGenerator = src_area()
             // @ts-ignore
@@ -22113,8 +22188,8 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
         var enteringAreas = areas.enter().append("path").attr("opacity", 0);
         enteringAreas
             .merge(areas)
-            .data(stackedData, function (d) { return d[0].group; })
-            .attr("fill", function (d) { return self.model.getFillColor(d[0].group); })
+            .data(stackedData, function (d) { return d[0][groupMapsTo]; })
+            .attr("fill", function (d) { return self.model.getFillColor(d[0][groupMapsTo]); })
             .attr("role", Roles.GRAPHICS_SYMBOL)
             .attr("aria-roledescription", "area")
             .transition(this.services.transitions.getTransition("area-update-enter", animate))
@@ -22281,25 +22356,25 @@ var bar_simple_SimpleBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22313,11 +22388,11 @@ var bar_simple_SimpleBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22487,26 +22562,26 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22521,11 +22596,11 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22736,7 +22811,7 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -22763,14 +22838,14 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 data: matchingDataPoint,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22784,11 +22859,11 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22887,9 +22962,7 @@ var scatter_Scatter = /** @class */ (function (_super) {
         var stacked = this.configs.stacked;
         var scatterData;
         if (stacked) {
-            var percentage = Object.keys(options.axes).some(function (axis) {
-                return options.axes[axis].percentage;
-            });
+            var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
             scatterData = this.model.getStackedData({ percentage: percentage });
         }
         else {
@@ -23019,7 +23092,7 @@ var scatter_Scatter = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 multidata: overlappingData.length > 1 ? overlappingData : null,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
             var eventNameToDispatch = on_event.type === "mouseover"
                 ? Events.Scatter.SCATTER_MOUSEOVER
@@ -23027,14 +23100,14 @@ var scatter_Scatter = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(eventNameToDispatch, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Scatter.SCATTER_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -23046,11 +23119,11 @@ var scatter_Scatter = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Scatter.SCATTER_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -23228,18 +23301,22 @@ var line_Line = /** @class */ (function (_super) {
         });
         var data = [];
         if (this.configs.stacked) {
-            var percentage = Object.keys(options.axes).some(function (axis) {
-                return options.axes[axis].percentage;
-            });
+            var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
+            var groupMapsTo_1 = options.data.groupMapsTo;
             var stackedData = this.model.getStackedData({ percentage: percentage });
+            var domainIdentifier_1 = this.services.cartesianScales.getDomainIdentifier();
+            var rangeIdentifier_1 = this.services.cartesianScales.getRangeIdentifier();
             data = stackedData.map(function (d) { return ({
-                name: d[0].group,
-                data: d.map(function (datum) { return ({
-                    date: datum.data.sharedStackKey,
-                    group: datum.group,
-                    value: datum[1],
-                }); }),
-                hidden: !tools_Tools.some(d, function (datum) { return datum[0] !== datum[1]; }),
+                name: d[0][groupMapsTo_1],
+                data: d.map(function (datum) {
+                    var _a;
+                    return (_a = {},
+                        _a[domainIdentifier_1] = datum.data.sharedStackKey,
+                        _a[groupMapsTo_1] = datum[groupMapsTo_1],
+                        _a[rangeIdentifier_1] = datum[1],
+                        _a);
+                }),
+                hidden: !tools_Tools.some(d, function (datum) { return datum[0] !== datum[1]; })
             }); });
         }
         else {
@@ -23331,14 +23408,12 @@ var scatter_stacked_StackedScatter = /** @class */ (function (_super) {
         var groupMapsTo = options.data.groupMapsTo;
         var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
         var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
-        var percentage = Object.keys(options.axes).some(function (axis) {
-            return options.axes[axis].percentage;
-        });
+        var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
         var stackedData = this.model.getStackedData({ percentage: percentage });
         // Update data on dot groups
         var circleGroups = svg
             .selectAll("g.dots")
-            .data(stackedData, function (d) { return d[0].group; });
+            .data(stackedData, function (d) { return d[0][groupMapsTo]; });
         // Remove dot groups that need to be removed
         circleGroups.exit().attr("opacity", 0).remove();
         // Add the dot groups that need to be introduced
@@ -23958,12 +24033,12 @@ var pie_Pie = /** @class */ (function (_super) {
             if (direction === CalloutDirections.RIGHT) {
                 d.startPos = {
                     x: xPosition,
-                    y: yPosition + d.textOffsetY,
+                    y: yPosition + d.textOffsetY
                 };
                 // end position for the callout line
                 d.endPos = {
                     x: xPosition + options.pie.callout.offsetX,
-                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY,
+                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY
                 };
                 // the intersection point of the vertical and horizontal line
                 d.intersectPointX =
@@ -23973,12 +24048,12 @@ var pie_Pie = /** @class */ (function (_super) {
                 // start position for the callout line
                 d.startPos = {
                     x: xPosition,
-                    y: yPosition + d.textOffsetY,
+                    y: yPosition + d.textOffsetY
                 };
                 // end position for the callout line should be bottom aligned to the title
                 d.endPos = {
                     x: xPosition - options.pie.callout.offsetX,
-                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY,
+                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY
                 };
                 // the intersection point of the vertical and horizontal line
                 d.intersectPointX =
@@ -24024,7 +24099,7 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -24036,19 +24111,19 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -24060,11 +24135,11 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -24072,7 +24147,7 @@ var pie_Pie = /** @class */ (function (_super) {
     Pie.prototype.computeRadius = function () {
         var options = this.model.getOptions();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var radius = Math.min(width, height) / 2;
         return radius + options.pie.radiusOffset;
@@ -24278,15 +24353,16 @@ var gauge_Gauge = /** @class */ (function (_super) {
             ? tools_Tools.getProperty(options, "gauge", "deltaFontSize")
             : function () { return 0; };
         // use numberFormatter here only if there is a delta supplied
-        var numberFormatter = delta ? tools_Tools.getProperty(options, "gauge", "numberFormatter") : function () { return null; };
+        var numberFormatter = delta
+            ? tools_Tools.getProperty(options, "gauge", "numberFormatter")
+            : function () { return null; };
         var arrowSize = tools_Tools.getProperty(options, "gauge", "deltaArrow", "size");
         var numberSpacing = tools_Tools.getProperty(options, "gauge", "numberSpacing");
         var numbersGroup = dom_utils_DOMUtils.appendOrSelect(svg, "g.gauge-numbers");
         // Add the smaller number of the delta
         var deltaGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, "g.gauge-delta").attr("transform", "translate(0, " + (deltaFontSize(radius) + numberSpacing) + ")");
         var deltaNumber = dom_utils_DOMUtils.appendOrSelect(deltaGroup, "text.gauge-delta-number");
-        deltaNumber
-            .data(delta === null ? [] : [delta]);
+        deltaNumber.data(delta === null ? [] : [delta]);
         deltaNumber
             .enter()
             .append("text")
@@ -24518,7 +24594,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var svg = this.parent;
         var parent = svg.node().parentNode;
         var _a = dom_utils_DOMUtils.getSVGElementSize(parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         svg.attr("width", width).attr("height", height);
         var isDataEmpty = this.model.isDataEmpty();
@@ -24597,7 +24673,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var svg = this.parent;
         var parent = svg.node().parentNode;
         var _a = dom_utils_DOMUtils.getSVGElementSize(parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         this.backdrop = dom_utils_DOMUtils.appendOrSelect(svg, "svg.chart-skeleton.DAII")
             .attr("width", width)
@@ -24704,7 +24780,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var stopShimmerClass = "stop-shimmer";
         var container = this.parent.select(".chart-skeleton");
         var width = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }).width;
         var startPoint = 0;
         var endPoint = width;
@@ -25305,10 +25381,10 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         // Get parent SVG to render inside of
         var svg = this.parent;
         var _a = dom_utils_DOMUtils.getSVGElementSize(svg, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var root = hierarchy({
-            children: this.children,
+            children: this.children
         }).sum(function (d) { return d.size; });
         // Grab the correct treemap tile function based on direction
         var tileType = this.configs.direction === LayoutDirection.ROW ||
@@ -25354,6 +25430,12 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
             // Calculate preffered children sizes after internal rendering
             var growth = tools_Tools.getProperty(d, "data", "growth", "x");
             var matchingSVGDimensions = dom_utils_DOMUtils.getSVGElementSize(src_select(this), { useBBox: true });
+            if (d.data.id === "legend") {
+                var svgSize = dom_utils_DOMUtils.getSVGElementSize(src_select(this), { useAttrs: true });
+                if (svgSize.height < 40) {
+                    matchingSVGDimensions.height = svgSize.height;
+                }
+            }
             if (growth === LayoutGrowth.PREFERRED) {
                 var matchingSVGWidth = horizontal
                     ? matchingSVGDimensions.width
@@ -25377,7 +25459,7 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         // Pass children data to the hierarchy layout
         // And calculate sum of sizes
         root = hierarchy({
-            children: this.children,
+            children: this.children
         }).sum(function (d) { return d.size; });
         // Compute the position of all elements within the layout
         src_treemap().tile(tileType).size([width, height]).padding(0)(root);
@@ -25664,7 +25746,7 @@ var axis_Axis = /** @class */ (function (_super) {
         var timeScaleOptions = tools_Tools.getProperty(options, "timeScale");
         var svg = this.getContainerSVG();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var startPosition, endPosition;
         if (axisPosition === AxisPositions.BOTTOM ||
@@ -25722,7 +25804,7 @@ var axis_Axis = /** @class */ (function (_super) {
         var fakeTick = dom_utils_DOMUtils.appendOrSelect(invisibleAxisRef, "g.tick");
         var fakeTickText = dom_utils_DOMUtils.appendOrSelect(fakeTick, "text").text("0");
         var tickHeight = dom_utils_DOMUtils.getSVGElementSize(fakeTickText.node(), {
-            useBBox: true,
+            useBBox: true
         }).height;
         fakeTick.remove();
         var isTimeScaleType = this.scaleType === ScaleTypes.TIME ||
@@ -25753,13 +25835,15 @@ var axis_Axis = /** @class */ (function (_super) {
                     axis.tickValues([]);
                 }
                 else {
-                    var tickValues = scale
-                        .nice(numberOfTicks)
-                        .ticks(numberOfTicks);
+                    var addSpaceOnEdges = tools_Tools.getProperty(options, "timeScale", "addSpaceOnEdges");
+                    var tickValues = void 0;
+                    if (addSpaceOnEdges) {
+                        tickValues = scale.nice(numberOfTicks);
+                    }
+                    tickValues = scale.ticks(numberOfTicks);
                     // Remove labels on the edges
                     // If there are more than 2 labels to show
-                    if (tools_Tools.getProperty(options, "timeScale", "addSpaceOnEdges") &&
-                        tickValues.length > 2) {
+                    if (addSpaceOnEdges && tickValues.length > 2) {
                         tickValues.splice(tickValues.length - 1, 1);
                         tickValues.splice(0, 1);
                     }
@@ -25839,7 +25923,7 @@ var axis_Axis = /** @class */ (function (_super) {
                     break;
                 case AxisPositions.TOP:
                     var titleHeight = dom_utils_DOMUtils.getSVGElementSize(axisTitleRef, {
-                        useBBox: true,
+                        useBBox: true
                     }).height;
                     axisTitleRef
                         .attr("transform", "translate(" + (this.margins.left / 2 + scale.range()[1] / 2) + ", " + titleHeight / 2 + ")")
@@ -25929,14 +26013,15 @@ var axis_Axis = /** @class */ (function (_super) {
         }
         // truncate the label if it's too long
         // only applies to discrete type
-        if (truncationType !== TruncationTypes.NONE && axisScaleType === ScaleTypes.LABELS) {
+        if (truncationType !== TruncationTypes.NONE &&
+            axisScaleType === ScaleTypes.LABELS) {
             var dataGroups = this.model.getDataValuesGroupedByKeys();
             if (dataGroups.length > 0) {
                 var activeDataGroups = dataGroups.map(function (d) { return d.sharedStackKey; });
-                var tick_html = svg.select("g.axis." + axisPosition + " g.ticks g.tick").html();
-                container
-                    .selectAll("g.ticks g.tick")
-                    .html(tick_html);
+                var tick_html = svg
+                    .select("g.axis." + axisPosition + " g.ticks g.tick")
+                    .html();
+                container.selectAll("g.ticks g.tick").html(tick_html);
                 container
                     .selectAll("g.tick text")
                     .data(activeDataGroups)
@@ -25962,9 +26047,7 @@ var axis_Axis = /** @class */ (function (_super) {
                 container
                     .selectAll("g.ticks")
                     .html(this.getInvisibleAxisRef().html());
-                container
-                    .selectAll("g.tick text")
-                    .data(activeDataGroups);
+                container.selectAll("g.tick text").data(activeDataGroups);
             }
         }
         // Add event listeners to elements drawn
@@ -25987,19 +26070,20 @@ var axis_Axis = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
-            if (axisScaleType === ScaleTypes.LABELS && datum.length > truncationThreshold) {
+            if (axisScaleType === ScaleTypes.LABELS &&
+                datum.length > truncationThreshold) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: src_select(this),
-                    type: TooltipTypes.AXISLABEL,
+                    type: TooltipTypes.AXISLABEL
                 });
             }
         })
@@ -26007,14 +26091,14 @@ var axis_Axis = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
             if (axisScaleType === ScaleTypes.LABELS) {
                 self.services.events.dispatchEvent(Events.Tooltip.HIDE);
@@ -26091,7 +26175,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             top: 0,
             right: 0,
             bottom: 0,
-            left: 0,
+            left: 0
         };
         return _this;
     }
@@ -26116,7 +26200,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
                 var axisComponent = new axis_Axis(_this.model, _this.services, {
                     position: axisPosition,
                     axes: _this.configs.axes,
-                    margins: _this.margins,
+                    margins: _this.margins
                 });
                 // Set model, services & parent for the new axis component
                 axisComponent.setModel(_this.model);
@@ -26146,7 +26230,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             }
             else {
                 offset = dom_utils_DOMUtils.getSVGElementSize(child.getTitleRef(), {
-                    useBBox: true,
+                    useBBox: true
                 }).height;
             }
             switch (axisPosition) {
@@ -26346,7 +26430,7 @@ var grid_Grid = /** @class */ (function (_super) {
             // threshold for when to display a gridline tooltip
             var bounds = {
                 min: Number(translations.tx) - threshold,
-                max: Number(translations.tx) + threshold,
+                max: Number(translations.tx) + threshold
             };
             return bounds.min <= position[0] && position[0] <= bounds.max;
         });
@@ -26432,7 +26516,7 @@ var ruler_Ruler = /** @class */ (function (_super) {
         var _b = rangeScale.range(), yScaleEnd = _b[0], yScaleStart = _b[1];
         var scaledData = displayData.map(function (d) { return ({
             domainValue: _this.services.cartesianScales.getDomainValue(d),
-            originalData: d,
+            originalData: d
         }); });
         /**
          * Find matches, reduce is used instead of filter
@@ -26495,7 +26579,7 @@ var ruler_Ruler = /** @class */ (function (_super) {
             this.services.events.dispatchEvent("show-tooltip", {
                 hoveredElement: rulerLine,
                 multidata: tooltipData,
-                type: TooltipTypes.GRIDLINE,
+                type: TooltipTypes.GRIDLINE
             });
             ruler.attr("opacity", 1);
             // line snaps to matching point
@@ -26613,7 +26697,7 @@ var zero_line_ZeroLine = /** @class */ (function (_super) {
             x0: x0,
             x1: x1,
             y0: yPosition,
-            y1: yPosition,
+            y1: yPosition
         }, this.services.cartesianScales.getOrientation());
         var line = dom_utils_DOMUtils.appendOrSelect(svg, "line.domain");
         line.transition(this.services.transitions.getTransition("zero-line-update", animate))
@@ -26874,7 +26958,7 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
         var _this = _super.call(this, holder, chartConfigs) || this;
         _this.services = Object.assign(_this.services, {
             cartesianScales: scales_cartesian_CartesianScales,
-            curves: curves_Curves,
+            curves: curves_Curves
         });
         return _this;
     }
@@ -26884,24 +26968,24 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
             components: [new title_Title(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var legendComponent = {
             id: "legend",
             components: [new legend_Legend(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var graphFrameComponent = {
             id: "graph-frame",
             components: graphFrameComponents,
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var isLegendEnabled = this.model.getOptions().legend.enabled !== false;
         // Decide the position of the legend in reference to the chart
@@ -26931,23 +27015,23 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
             components: [new spacer_Spacer(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var fullFrameComponent = {
             id: "full-frame",
             components: [
                 new layout_LayoutComponent(this.model, this.services, axis_chart_spreadArrays((isLegendEnabled ? [legendComponent] : []), [
                     legendSpacerComponent,
-                    graphFrameComponent,
+                    graphFrameComponent
                 ]), {
-                    direction: fullFrameComponentDirection,
-                }),
+                    direction: fullFrameComponentDirection
+                })
             ],
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         // Add chart title if it exists
         var topLevelLayoutComponents = [];
@@ -26958,16 +27042,16 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
                 components: [new spacer_Spacer(this.model, this.services)],
                 growth: {
                     x: LayoutGrowth.PREFERRED,
-                    y: LayoutGrowth.FIXED,
-                },
+                    y: LayoutGrowth.FIXED
+                }
             };
             topLevelLayoutComponents.push(titleSpacerComponent);
         }
         topLevelLayoutComponents.push(fullFrameComponent);
         return [
             new layout_LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
-                direction: LayoutDirection.COLUMN,
-            }),
+                direction: LayoutDirection.COLUMN
+            })
         ];
     };
     return AxisChart;
@@ -27015,8 +27099,8 @@ var area_AreaChart = /** @class */ (function (_super) {
             new area_Area(this.model, this.services),
             new scatter_Scatter(this.model, this.services, {
                 fadeInOnChartHolderMouseover: true,
-                handleThresholds: true,
-            }),
+                handleThresholds: true
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27068,8 +27152,8 @@ var area_stacked_StackedAreaChart = /** @class */ (function (_super) {
             new scatter_stacked_StackedScatter(this.model, this.services, {
                 fadeInOnChartHolderMouseover: true,
                 handleThresholds: true,
-                stacked: true,
-            }),
+                stacked: true
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         // TODO add tooltip
@@ -27120,8 +27204,8 @@ var bar_simple_SimpleBarChart = /** @class */ (function (_super) {
             new bar_simple_SimpleBar(this.model, this.services),
             new zero_line_ZeroLine(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27171,8 +27255,8 @@ var bar_grouped_GroupedBarChart = /** @class */ (function (_super) {
             new bar_grouped_GroupedBar(this.model, this.services),
             new zero_line_ZeroLine(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27221,8 +27305,8 @@ var bar_stacked_StackedBarChart = /** @class */ (function (_super) {
             new grid_Grid(this.model, this.services),
             new bar_stacked_StackedBar(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27272,8 +27356,8 @@ var bubble_BubbleChart = /** @class */ (function (_super) {
             new ruler_Ruler(this.model, this.services),
             new bubble_Bubble(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27324,8 +27408,8 @@ var line_LineChart = /** @class */ (function (_super) {
             new line_Line(this.model, this.services),
             new scatter_Scatter(this.model, this.services, { handleThresholds: true }),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27375,8 +27459,8 @@ var scatter_ScatterChart = /** @class */ (function (_super) {
             new ruler_Ruler(this.model, this.services),
             new scatter_Scatter(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27477,8 +27561,8 @@ var pie_PieChart = /** @class */ (function (_super) {
         var graphFrameComponents = [
             new pie_Pie(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.PIE,
-            }),
+                skeleton: Skeletons.PIE
+            })
         ];
         // get the base chart components and export with tooltip
         var components = this.getChartComponents(graphFrameComponents);
@@ -27526,8 +27610,8 @@ var donut_DonutChart = /** @class */ (function (_super) {
         var graphFrameComponents = [
             new donut_Donut(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.DONUT,
-            }),
+                skeleton: Skeletons.DONUT
+            })
         ];
         var components = this.getChartComponents(graphFrameComponents);
         components.push(new tooltip_pie_TooltipPie(this.model, this.services));
@@ -27544,50 +27628,50 @@ function radialLabelPlacement(angleRadians) {
     if (isInRange(angle, [0, 10]) || isInRange(angle, [350, 0])) {
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.MIDDLE,
+            dominantBaseline: DominantBaseline.MIDDLE
         };
     }
     else if (isInRange(angle, [10, 80])) {
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [80, 100])) {
         return {
             textAnchor: TextAnchor.MIDDLE,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [100, 170])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [170, 190])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.MIDDLE,
+            dominantBaseline: DominantBaseline.MIDDLE
         };
     }
     else if (isInRange(angle, [190, 260])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
     else if (isInRange(angle, [260, 280])) {
         return {
             textAnchor: TextAnchor.MIDDLE,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
     else {
         // 280 - 350
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
 }
@@ -27788,7 +27872,7 @@ var radar_Radar = /** @class */ (function (_super) {
         if (animate === void 0) { animate = true; }
         this.svg = this.getContainerSVG();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var data = this.model.getData();
         var displayData = this.model.getDisplayData();
@@ -27817,7 +27901,7 @@ var radar_Radar = /** @class */ (function (_super) {
         var yScale = linear_linear()
             .domain([
             0,
-            src_max(this.displayDataNormalized.map(function (d) { return d[value]; })),
+            src_max(this.displayDataNormalized.map(function (d) { return d[value]; }))
         ])
             .range([minRange, radius])
             .nice(yTicksNumber);
@@ -27850,7 +27934,7 @@ var radar_Radar = /** @class */ (function (_super) {
         // center coordinates
         var c = {
             x: leftPadding + xLabelPadding,
-            y: height / 2,
+            y: height / 2
         };
         /////////////////////////////
         // Drawing the radar
@@ -28152,7 +28236,7 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -28169,7 +28253,7 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // get the items that should be highlighted
             var itemsToHighlight = self.displayDataNormalized.filter(function (d) { return d[angle] === datum; });
@@ -28177,14 +28261,14 @@ var radar_Radar = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 multidata: itemsToHighlight,
-                type: TooltipTypes.GRIDLINE,
+                type: TooltipTypes.GRIDLINE
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -28199,14 +28283,14 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent("hide-tooltip", {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -28299,6 +28383,7 @@ var gauge_GaugeChart = /** @class */ (function (_super) {
         // Specify what to render inside the graph-frame
         var graphFrameComponents = [new gauge_Gauge(this.model, this.services)];
         var components = this.getChartComponents(graphFrameComponents);
+        components.push(new tooltip_Tooltip(this.model, this.services));
         return components;
     };
     return GaugeChart;