@carbon/charts-vue 0.32.9 → 0.33.0

package/charts-vue.umd.js

@@ -521,6 +521,16 @@ var AxisPositions;
     AxisPositions["TOP"] = "top";
     AxisPositions["BOTTOM"] = "bottom";
 })(AxisPositions || (AxisPositions = {}));
+/**
+ * enum of all possible truncation types
+ */
+var TruncationTypes;
+(function (TruncationTypes) {
+    TruncationTypes["END_LINE"] = "end_line";
+    TruncationTypes["MID_LINE"] = "mid_line";
+    TruncationTypes["FRONT_LINE"] = "front_line";
+    TruncationTypes["NONE"] = "none";
+})(TruncationTypes || (TruncationTypes = {}));
 /**
  * enum of all possible cartesian orientations
  * to be used for determining the orientation
@@ -559,6 +569,8 @@ var TooltipTypes;
     TooltipTypes["DATAPOINT"] = "datapoint";
     TooltipTypes["GRIDLINE"] = "gridline";
     TooltipTypes["TITLE"] = "title";
+    TooltipTypes["LEGEND"] = "legend";
+    TooltipTypes["AXISLABEL"] = "axislabel";
 })(TooltipTypes || (TooltipTypes = {}));
 /**
  * enum of all possible legend positions
@@ -6831,7 +6843,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;
@@ -6861,7 +6873,7 @@ var tools_Tools;
                 .split(",");
             return {
                 tx: transforms[0],
-                ty: transforms[1],
+                ty: transforms[1]
             };
         }
         return null;
@@ -6883,7 +6895,7 @@ var tools_Tools;
         var xyString = match.split(",");
         return {
             x: parseFloat(xyString[0]),
-            y: parseFloat(xyString[1]),
+            y: parseFloat(xyString[1])
         };
     }
     Tools.getTranformOffsets = getTranformOffsets;
@@ -6929,6 +6941,31 @@ var tools_Tools;
             : percentage;
     }
     Tools.convertValueToPercentage = convertValueToPercentage;
+    /**
+     * 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));
+        }
+        else if (truncationType === TruncationTypes.FRONT_LINE) {
+            return "..." + fullText.substr(-numCharacter);
+        }
+        else if (truncationType === TruncationTypes.END_LINE) {
+            return fullText.substr(0, numCharacter) + "...";
+        }
+    }
+    Tools.truncateLabel = truncateLabel;
     /**************************************
      *  Object/array related checks       *
      *************************************/
@@ -6944,7 +6981,7 @@ var tools_Tools;
     function arrayDifferences(oldArray, newArray) {
         var difference = {
             missing: [],
-            added: [],
+            added: []
         };
         oldArray.forEach(function (element) {
             if (newArray.indexOf(element) === -1) {
@@ -7031,7 +7068,7 @@ var tools_Tools;
                 y0: verticalCoordinates.x0,
                 y1: verticalCoordinates.x1,
                 x0: verticalCoordinates.y0,
-                x1: verticalCoordinates.y1,
+                x1: verticalCoordinates.y1
             };
         }
         return verticalCoordinates;
@@ -7064,6 +7101,14 @@ var en_US_default = /*#__PURE__*/__webpack_require__.n(en_US);
  * User configurable options *
  *****************************
  */
+/**
+ * Default truncation configuration
+ */
+var standardTruncationOptions = {
+    type: TruncationTypes.END_LINE,
+    threshold: 16,
+    numCharacter: 14
+};
 /**
  * Legend options
  */
@@ -7083,7 +7128,8 @@ var legend = {
     checkbox: {
         radius: 6.5,
         spaceAfter: 4
-    }
+    },
+    truncation: standardTruncationOptions
 };
 /**
  * Grid options
@@ -7128,16 +7174,20 @@ var barChartTooltip = tools_Tools.merge({}, axisChartTooltip, {
 // and by TwoDimensionalAxes.
 var configuration_axes = {
     top: {
-        includeZero: true
+        includeZero: true,
+        truncation: standardTruncationOptions
     },
     bottom: {
-        includeZero: true
+        includeZero: true,
+        truncation: standardTruncationOptions
     },
     left: {
-        includeZero: true
+        includeZero: true,
+        truncation: standardTruncationOptions
     },
     right: {
-        includeZero: true
+        includeZero: true,
+        truncation: standardTruncationOptions
     }
 };
 var timeScale = {
@@ -7170,7 +7220,8 @@ var configuration_chart = {
     },
     data: {
         groupMapsTo: "group",
-        loading: false
+        loading: false,
+        selectedGroups: []
     },
     color: {
         scale: null
@@ -7306,7 +7357,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();
+        }
     }
 });
 /**
@@ -7733,7 +7788,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
@@ -7755,7 +7810,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),
@@ -7771,7 +7826,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;
@@ -12143,11 +12198,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"));
@@ -12166,12 +12220,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;
         });
@@ -12234,6 +12302,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 };
@@ -12362,6 +12444,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
@@ -12489,11 +12584,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)
         }); });
     };
     /*
@@ -13624,7 +13735,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         }
         var finalDimensions = {
             width: 0,
-            height: 0,
+            height: 0
         };
         var validateAndSetDimensions = function (dimensions) {
             if (dimensions) {
@@ -13643,7 +13754,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
@@ -13652,7 +13763,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
             bbox = svgSelector.node().getBBox();
             bboxDimensions = {
                 width: bbox.width,
-                height: bbox.height,
+                height: bbox.height
             };
         }
         catch (e) { }
@@ -13660,13 +13771,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
@@ -13699,7 +13810,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);
         }
@@ -13854,7 +13965,7 @@ var events_Events = /** @class */ (function (_super) {
         var newEvent;
         if (eventDetail) {
             newEvent = new CustomEvent(eventType, {
-                detail: eventDetail,
+                detail: eventDetail
             });
         }
         else {
@@ -16397,13 +16508,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;
     }
@@ -16463,7 +16574,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; });
     };
@@ -16471,7 +16582,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; });
     };
@@ -16571,7 +16682,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) {
@@ -16677,7 +16788,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         }
         return {
             threshold: highestThreshold,
-            scaleValue: domainScale(highestThreshold.value),
+            scaleValue: domainScale(highestThreshold.value)
         };
     };
     CartesianScales.prototype.getHighestRangeThreshold = function () {
@@ -16692,7 +16803,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;
@@ -16704,49 +16815,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];
@@ -17727,7 +17838,7 @@ var curves_Curves = /** @class */ (function (_super) {
             curveNatural: natural,
             curveStep: curve_step,
             curveStepAfter: stepAfter,
-            curveStepBefore: stepBefore,
+            curveStepBefore: stepBefore
         };
         return _this;
     }
@@ -17868,6 +17979,7 @@ var legend_Legend = /** @class */ (function (_super) {
         var _this = this;
         var svg = this.getContainerSVG().attr("role", Roles.GRAPHICS_DOCUMENT);
         var options = this.model.getOptions();
+        var legendOptions = tools_Tools.getProperty(options, "legend");
         var legendItems = svg
             .selectAll("g.legend-item")
             .data(this.model.getDataGroups(), function (dataGroup) { return dataGroup.name; });
@@ -17875,9 +17987,17 @@ 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
+        // get user provided custom values for truncation
+        var truncationType = tools_Tools.getProperty(legendOptions, "truncation", "type");
+        var truncationThreshold = tools_Tools.getProperty(legendOptions, "truncation", "threshold");
+        var truncationNumCharacter = tools_Tools.getProperty(legendOptions, "truncation", "numCharacter");
         addedLegendItems
             .append("rect")
             .classed("checkbox", true)
@@ -17894,11 +18014,23 @@ var legend_Legend = /** @class */ (function (_super) {
             .classed("active", function (d, i) {
             return d.status === options.legend.items.status.ACTIVE;
         });
-        addedLegendItems
+        var addedLegendItemsText = addedLegendItems
             .append("text")
-            .merge(legendItems.select("text"))
-            .html(function (d) { return d.name; })
-            .attr("alignment-baseline", "middle");
+            .merge(legendItems.select("text"));
+        // truncate the legend label if it's too long
+        if (truncationType !== TruncationTypes.NONE) {
+            addedLegendItemsText.html(function (d) {
+                if (d.name.length > truncationThreshold) {
+                    return tools_Tools.truncateLabel(d.name, truncationType, truncationNumCharacter);
+                }
+                else {
+                    return d.name;
+                }
+            });
+        }
+        else {
+            addedLegendItemsText.html(function (d) { return d.name; });
+        }
         this.breakItemsIntoLines(addedLegendItems);
         // Remove old elements as needed.
         legendItems
@@ -17977,11 +18109,19 @@ var legend_Legend = /** @class */ (function (_super) {
             legendItem
                 .select("text")
                 .attr("x", startingPoint + spaceNeededForCheckbox)
-                .attr("y", yOffset + yPosition);
+                .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")
@@ -18001,10 +18141,12 @@ var legend_Legend = /** @class */ (function (_super) {
         var self = this;
         var svg = this.getContainerSVG();
         var options = this.model.getOptions();
+        var legendOptions = tools_Tools.getProperty(options, "legend");
+        var truncationThreshold = tools_Tools.getProperty(legendOptions, "truncation", "threshold");
         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;
@@ -18022,17 +18164,28 @@ 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();
             self.model.toggleDataLabel(clickedItemData.name);
+        })
+            .on("mousemove", function () {
+            var hoveredItem = src_select(this);
+            var hoveredItemData = hoveredItem.datum();
+            if (hoveredItemData.name.length > truncationThreshold) {
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    hoveredElement: hoveredItem,
+                    type: TooltipTypes.LEGEND
+                });
+            }
         })
             .on("mouseout", function () {
             var hoveredItem = src_select(this);
             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
             });
         });
     };
@@ -20606,7 +20759,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) {
@@ -20676,7 +20829,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
@@ -20832,7 +20985,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();
@@ -20863,20 +21016,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);
     };
@@ -20887,13 +21040,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)
             });
         });
     };
@@ -20961,12 +21114,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
                 });
             });
         }
@@ -21052,17 +21205,19 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             if ((e.detail.type === TooltipTypes.DATAPOINT &&
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
-                    tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
+                    tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
+                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;
                 if (e.detail.multidata) {
                     // multi tooltip
                     data = e.detail.multidata;
-                    defaultHTML = _this.getMultilineTooltipHTML(data);
+                    defaultHTML = _this.getMultilineTooltipHTML(data, e.detail.type);
                 }
                 else {
-                    defaultHTML = _this.getTooltipHTML(data, TooltipTypes.DATAPOINT);
+                    defaultHTML = _this.getTooltipHTML(data, e.detail.type);
                 }
                 // if there is a provided tooltip HTML function call it
                 if (tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "customHTML")) {
@@ -21084,7 +21239,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
                 _this.tooltip.style("max-width", chartWidth);
                 tooltipTextContainer.html(_this.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));
                 // get the position based on the title positioning (static)
-                var position = _this.getTooltipPosition(e.detail.hoveredElement.node());
+                var position = _this.getTooltipPosition(e.detail.hoveredElement.node(), e.detail.type);
                 _this.positionTooltip(position);
             }
             // Fade in
@@ -21101,6 +21256,9 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             var title = this.model.getOptions().title;
             return "<div class=\"title-tooltip\"><text>" + title + "</text></div>";
         }
+        else if (type === TooltipTypes.LEGEND) {
+            return "<div class=\"legend-tooltip\"><p class=\"label\">" + data.name + "</p></div>";
+        }
         // this cleans up the data item, pie slices have the data within the data.data but other datapoints are self contained within data
         var dataVal = tools_Tools.getProperty(data, "data") ? data.data : data;
         var groupMapsTo = this.model.getOptions().data.groupMapsTo;
@@ -21115,7 +21273,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         var label = dataVal[groupMapsTo];
         return "<div class=\"datapoint-tooltip\">\n\t\t\t\t\t<p class=\"label\">" + label + "</p>\n\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t</div>";
     };
-    Tooltip.prototype.getMultilineTooltipHTML = function (data) {
+    Tooltip.prototype.getMultilineTooltipHTML = function (data, type) {
         var _this = this;
         // sort them so they are in the same order as the graph
         data.sort(function (a, b) { return b.value - a.value; });
@@ -21142,7 +21300,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         this.tooltip.classed("hidden", true);
     };
     // returns static position based on the element
-    Tooltip.prototype.getTooltipPosition = function (hoveredElement) {
+    Tooltip.prototype.getTooltipPosition = function (hoveredElement, type) {
         var holderPosition = src_select(this.services.domUtils.getHolder())
             .node()
             .getBoundingClientRect();
@@ -21153,7 +21311,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 };
     };
@@ -21174,15 +21332,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) {
@@ -21191,7 +21349,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);
@@ -21242,7 +21400,9 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
             if ((e.detail.type === TooltipTypes.DATAPOINT &&
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
-                    tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
+                    tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
+                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;
@@ -21258,7 +21418,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                     else {
                         data = e.detail.hoveredElement.datum();
                     }
-                    defaultHTML = _this.getTooltipHTML(data);
+                    defaultHTML = _this.getTooltipHTML(data, e.detail.type);
                 }
                 // if there is a provided tooltip HTML function call it and pass the defaultHTML
                 if (tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "customHTML")) {
@@ -21270,9 +21430,15 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                     // default tooltip
                     tooltipTextContainer.html(defaultHTML);
                 }
-                var position = _this.getTooltipPosition(hoveredElement, data);
-                // Position the tooltip relative to the bars
-                _this.positionTooltip(e.detail.multidata ? undefined : position);
+                if (e.detail.type === TooltipTypes.LEGEND ||
+                    e.detail.type === TooltipTypes.AXISLABEL) {
+                    _this.positionTooltip();
+                }
+                else {
+                    var position = _this.getTooltipPosition(hoveredElement, data);
+                    // Position the tooltip relative to the bars
+                    _this.positionTooltip(e.detail.multidata ? undefined : position);
+                }
             }
             else if (e.detail.type === TooltipTypes.TITLE) {
                 // use the chart size to enforce a max width on the tooltip
@@ -21284,7 +21450,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 // use tooltip.ts to get the tooltip html for titles
                 tooltipTextContainer.html(_super.prototype.getTooltipHTML.call(_this, e.detail.hoveredElement, TooltipTypes.TITLE));
                 // get the position based on the title positioning (static)
-                var position = _super.prototype.getTooltipPosition.call(_this, e.detail.hoveredElement.node());
+                var position = _super.prototype.getTooltipPosition.call(_this, e.detail.hoveredElement.node(), e.detail.type);
                 _this.positionTooltip(position);
             }
             // Fade in
@@ -21316,7 +21482,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 };
         }
@@ -21326,7 +21492,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 };
         }
@@ -21335,7 +21501,13 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
      * Returns the html for the bar single point tooltip
      * @param data associated values for the hovered bar
      */
-    TooltipBar.prototype.getTooltipHTML = function (data) {
+    TooltipBar.prototype.getTooltipHTML = function (data, type) {
+        if (type === TooltipTypes.LEGEND) {
+            return "<div class=\"legend-tooltip\"><p class=\"label\">" + data.name + "</p></div>";
+        }
+        else if (type === TooltipTypes.AXISLABEL) {
+            return "<div class=\"axis-tooltip\"><p class=\"label\">" + data + "</p></div>";
+        }
         var formattedValue = tools_Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
             ? this.model.getOptions().tooltip.valueFormatter(data.value)
             : data.value.toLocaleString("en");
@@ -21408,6 +21580,9 @@ var tooltip_pie_TooltipPie = /** @class */ (function (_super) {
             var title = this.model.getOptions().title;
             return "<div class=\"title-tooltip\"><text>" + title + "</text></div>";
         }
+        else if (type === TooltipTypes.LEGEND) {
+            return "<div class=\"legend-tooltip\"><p class=\"label\">" + d.name + "</p></div>";
+        }
         var dataVal = d.data;
         var groupMapsTo = this.model.getOptions().data.groupMapsTo;
         // format the value if needed
@@ -21449,6 +21624,12 @@ var tooltip_scatter_TooltipScatter = /** @class */ (function (_super) {
             // the main tooltip component handles title styles
             return _super.prototype.getTooltipHTML.call(this, datum, type);
         }
+        else if (type === TooltipTypes.LEGEND) {
+            return "<div class=\"legend-tooltip\"><p class=\"label\">" + datum.name + "</p></div>";
+        }
+        else if (type === TooltipTypes.AXISLABEL) {
+            return "<div class=\"axis-tooltip\"><p class=\"label\">" + datum + "</p></div>";
+        }
         var groupMapsTo = this.model.getOptions().data.groupMapsTo;
         var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
         var userProvidedValueFormatter = tools_Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter");
@@ -21484,7 +21665,7 @@ var tooltip_radar_TooltipRadar = /** @class */ (function (_super) {
     function TooltipRadar() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    TooltipRadar.prototype.getMultilineTooltipHTML = function (data) {
+    TooltipRadar.prototype.getMultilineTooltipHTML = function (data, type) {
         var _this = this;
         var options = this.model.getOptions();
         var groupMapsTo = options.data.groupMapsTo;
@@ -21958,11 +22139,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;
@@ -21988,6 +22171,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();
@@ -21996,13 +22180,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
@@ -22014,8 +22196,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))
@@ -22182,25 +22364,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) {
@@ -22214,11 +22396,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
             });
         });
     };
@@ -22388,26 +22570,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) {
@@ -22422,11 +22604,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
             });
         });
     };
@@ -22637,7 +22819,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) {
@@ -22664,14 +22846,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) {
@@ -22685,11 +22867,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
             });
         });
     };
@@ -22788,9 +22970,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 {
@@ -22920,7 +23100,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
@@ -22928,14 +23108,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) {
@@ -22947,11 +23127,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
             });
         });
     };
@@ -23129,18 +23309,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 {
@@ -23232,14 +23416,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
@@ -23859,12 +24041,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 =
@@ -23874,12 +24056,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 =
@@ -23925,7 +24107,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) {
@@ -23937,19 +24119,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) {
@@ -23961,11 +24143,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
             });
         });
     };
@@ -23973,7 +24155,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;
@@ -24178,20 +24360,22 @@ var gauge_Gauge = /** @class */ (function (_super) {
         var deltaFontSize = delta
             ? tools_Tools.getProperty(options, "gauge", "deltaFontSize")
             : function () { return 0; };
-        var numberFormatter = tools_Tools.getProperty(options, "gauge", "numberFormatter");
+        // use numberFormatter here only if there is a delta supplied
+        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 = deltaGroup
-            .selectAll("text.gauge-delta-number")
-            .data(delta !== null ? [delta] : []);
+        var deltaNumber = dom_utils_DOMUtils.appendOrSelect(deltaGroup, "text.gauge-delta-number");
+        deltaNumber.data(delta === null ? [] : [delta]);
         deltaNumber
             .enter()
             .append("text")
+            .classed("gauge-delta-number", true)
             .merge(deltaNumber)
-            .attr("class", "gauge-delta-number")
             .attr("text-anchor", "middle")
             .style("font-size", deltaFontSize(radius) + "px")
             .text(function (d) { return numberFormatter(d) + "%"; });
@@ -24418,7 +24602,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();
@@ -24497,7 +24681,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)
@@ -24604,7 +24788,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;
@@ -25205,10 +25389,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 ||
@@ -25254,6 +25438,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
@@ -25277,7 +25467,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);
@@ -25552,14 +25742,19 @@ var axis_Axis = /** @class */ (function (_super) {
         var axisPosition = this.configs.position;
         var options = this.model.getOptions();
         var axisOptions = tools_Tools.getProperty(options, "axes", axisPosition);
+        var axisScaleType = tools_Tools.getProperty(axisOptions, "scaleType");
         var numberOfTicksProvided = tools_Tools.getProperty(axisOptions, "ticks", "number");
+        // get user provided custom values for truncation
+        var truncationType = tools_Tools.getProperty(axisOptions, "truncation", "type");
+        var truncationThreshold = tools_Tools.getProperty(axisOptions, "truncation", "threshold");
+        var truncationNumCharacter = tools_Tools.getProperty(axisOptions, "truncation", "numCharacter");
         var isNumberOfTicksProvided = numberOfTicksProvided !== null;
         var isVerticalAxis = axisPosition === AxisPositions.LEFT ||
             axisPosition === AxisPositions.RIGHT;
         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 ||
@@ -25617,7 +25812,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 ||
@@ -25648,13 +25843,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);
                     }
@@ -25734,7 +25931,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 + ")")
@@ -25822,6 +26019,45 @@ var axis_Axis = /** @class */ (function (_super) {
         if (this.model.isDataEmpty()) {
             container.attr("opacity", 0);
         }
+        // truncate the label if it's too long
+        // only applies to discrete type
+        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);
+                container
+                    .selectAll("g.tick text")
+                    .data(activeDataGroups)
+                    .text(function (d) {
+                    if (d.length > truncationThreshold) {
+                        return tools_Tools.truncateLabel(d, truncationType, truncationNumCharacter);
+                    }
+                    else {
+                        return d;
+                    }
+                });
+                this.getInvisibleAxisRef()
+                    .selectAll("g.tick text")
+                    .data(activeDataGroups)
+                    .text(function (d) {
+                    if (d.length > truncationThreshold) {
+                        return tools_Tools.truncateLabel(d, truncationType, truncationNumCharacter);
+                    }
+                    else {
+                        return d;
+                    }
+                });
+                container
+                    .selectAll("g.ticks")
+                    .html(this.getInvisibleAxisRef().html());
+                container.selectAll("g.tick text").data(activeDataGroups);
+            }
+        }
         // Add event listeners to elements drawn
         this.addEventListeners();
     };
@@ -25829,6 +26065,12 @@ var axis_Axis = /** @class */ (function (_super) {
         var svg = this.getContainerSVG();
         var axisPosition = this.configs.position;
         var container = dom_utils_DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var options = this.model.getOptions();
+        var axisOptions = tools_Tools.getProperty(options, "axes", axisPosition);
+        var axisScaleType = tools_Tools.getProperty(axisOptions, "scaleType");
+        var truncationThreshold = tools_Tools.getProperty(axisOptions, "truncation", "threshold");
+        var isTimeScaleType = this.scaleType === ScaleTypes.TIME ||
+            axisOptions.scaleType === ScaleTypes.TIME;
         var self = this;
         container
             .selectAll("g.tick text")
@@ -25836,29 +26078,39 @@ 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) {
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    hoveredElement: src_select(this),
+                    type: TooltipTypes.AXISLABEL
+                });
+            }
         })
             .on("click", function (datum) {
             // 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);
+            }
         });
     };
     Axis.prototype.getInvisibleAxisRef = function () {
@@ -25931,7 +26183,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             top: 0,
             right: 0,
             bottom: 0,
-            left: 0,
+            left: 0
         };
         return _this;
     }
@@ -25956,7 +26208,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);
@@ -25986,7 +26238,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             }
             else {
                 offset = dom_utils_DOMUtils.getSVGElementSize(child.getTitleRef(), {
-                    useBBox: true,
+                    useBBox: true
                 }).height;
             }
             switch (axisPosition) {
@@ -26186,7 +26438,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;
         });
@@ -26272,7 +26524,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
@@ -26335,7 +26587,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
@@ -26453,7 +26705,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))
@@ -26714,7 +26966,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;
     }
@@ -26724,24 +26976,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
@@ -26771,23 +27023,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 = [];
@@ -26798,16 +27050,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;
@@ -26855,8 +27107,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));
@@ -26908,8 +27160,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
@@ -26960,8 +27212,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));
@@ -27011,8 +27263,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));
@@ -27061,8 +27313,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));
@@ -27112,8 +27364,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));
@@ -27164,8 +27416,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));
@@ -27215,8 +27467,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));
@@ -27317,8 +27569,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);
@@ -27366,8 +27618,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));
@@ -27384,50 +27636,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
         };
     }
 }
@@ -27628,7 +27880,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();
@@ -27657,7 +27909,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);
@@ -27690,7 +27942,7 @@ var radar_Radar = /** @class */ (function (_super) {
         // center coordinates
         var c = {
             x: leftPadding + xLabelPadding,
-            y: height / 2,
+            y: height / 2
         };
         /////////////////////////////
         // Drawing the radar
@@ -27992,7 +28244,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) {
@@ -28009,7 +28261,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; });
@@ -28017,14 +28269,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) {
@@ -28039,14 +28291,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
             });
         });
     };
@@ -28139,6 +28391,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;