@carbon/charts-vue 1.6.8 → 1.6.13

package/charts-vue.umd.js

@@ -24136,7 +24136,14 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         _this.positionService = new utils_position();
         _this.handleShowTooltip = function (e) {
             var data = e.detail.data || e.detail.items;
-            var defaultHTML = _this.getTooltipHTML(e);
+            var defaultHTML;
+            var formattedItems = _this.formatItems(_this.getItems(e));
+            if (e.detail.content) {
+                defaultHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
+            }
+            else {
+                defaultHTML = _this.getTooltipHTML(formattedItems);
+            }
             var tooltipTextContainer = dom_utils_DOMUtils.appendOrSelect(_this.tooltip, 'div.content-box');
             // if there is a provided tooltip HTML function call it
             if (tools_Tools.getProperty(_this.getOptions(), 'tooltip', 'customHTML')) {
@@ -24154,6 +24161,18 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
                 // Use default tooltip
                 tooltipTextContainer.html(defaultHTML);
             }
+            // Apply custom background colors
+            tooltipTextContainer
+                .selectAll('.datapoint-tooltip')
+                .each(function (datum, i) {
+                var item = formattedItems[i];
+                if (formattedItems[i] && formattedItems[i].color) {
+                    src_select(this)
+                        .select('.tooltip-color')
+                        .attr('class', 'tooltip-color')
+                        .style('background-color', item.color);
+                }
+            });
             // Position the tooltip
             _this.positionTooltip(e);
             // Fade in
@@ -24224,31 +24243,18 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         }
         return items;
     };
-    Tooltip.prototype.getTooltipHTML = function (e) {
-        var defaultHTML;
-        if (e.detail.content) {
-            defaultHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
-        }
-        else {
-            var items = this.getItems(e);
-            var formattedItems = this.formatItems(items);
-            defaultHTML =
-                "<ul class=\"multi-tooltip\">" +
-                    formattedItems
-                        .map(function (item) {
-                        return "<li>\n\t\t\t\t\t\t\t<div class=\"datapoint-tooltip " + (item.bold ? 'bold' : '') + "\">\n\t\t\t\t\t\t\t\t" + (item.class ? "<div class=\"tooltip-color " + item.class + "\"></div>" : '') + "\n\t\t\t\t\t\t\t\t" + (item.color
-                            ? '<div style="background-color: ' +
-                                item.color +
-                                '" class="tooltip-color"></div>'
-                            : '') + "\n\t\t\t\t\t\t\t\t<div class=\"label\">\n\t\t\t\t\t\t\t\t<p>" + (item.label || '') + "</p>\n\t\t\t\t\t\t\t\t" + (item.labelIcon ? "<span class=\"label-icon\"/>" + item.labelIcon + "</span>" : '') + "\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t" + (item.value === undefined ||
-                            item.value === null
-                            ? ''
-                            : "<p class=\"value\"/>" + item.value + "</p>") + "\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>";
-                    })
-                        .join('') +
-                    "</ul>";
-        }
-        return defaultHTML;
+    Tooltip.prototype.getTooltipHTML = function (formattedItems) {
+        return ("<ul class=\"multi-tooltip\">" +
+            formattedItems
+                .map(function (item) {
+                return "<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip" + (item.bold ? ' bold' : '') + "\">\n\t\t\t\t\t\t" + (item.class || item.color
+                    ? "<div class=\"tooltip-color " + item.class + "\"></div>"
+                    : '') + "\n\t\t\t\t\t\t<div class=\"label\">\n\t\t\t\t\t\t<p>" + (item.label || '') + "</p>\n\t\t\t\t\t\t" + (item.labelIcon ? "<span class=\"label-icon\"/>" + item.labelIcon + "</span>" : '') + "\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t" + (item.value === undefined || item.value === null
+                    ? ''
+                    : "<p class=\"value\"/>" + item.value + "</p>") + "\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
+            })
+                .join('') +
+            "</ul>");
     };
     Tooltip.prototype.valueFormatter = function (value, label) {
         var options = this.getOptions();
@@ -36375,13 +36381,13 @@ var axis_Axis = /** @class */ (function (_super) {
                 container
                     .selectAll('g.ticks g.tick text')
                     .attr('transform', "rotate(-45)")
-                    .style('text-anchor', axisPosition === AxisPositions.TOP ? 'start' : 'end');
+                    .attr('text-anchor', axisPosition === AxisPositions.TOP ? 'start' : 'end');
             }
             else {
                 container
                     .selectAll('g.ticks g.tick text')
                     .attr('transform', null)
-                    .style('text-anchor', null);
+                    .attr('text-anchor', null);
             }
         }
         // we don't need to show axes on empty state and on skeleton state