@carbon/charts-vue 0.41.31 → 0.41.32

package/charts-vue.umd.js

@@ -25774,8 +25774,9 @@ var gauge_Gauge = /** @class */ (function (_super) {
         }
         // Add the numbers at the center
         var numbersGroup = dom_utils_DOMUtils.appendOrSelect(svg, 'g.gauge-numbers').attr('transform', "translate(0, " + numbersYPosition + ")");
+        var fontSize = valueFontSize(radius);
         // Add the big number
-        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number').attr('transform', 'translate(-10, 0)'); // Optical centering for the presence of the smaller % symbol
+        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number');
         var numberFormatter = tools_Tools.getProperty(options, 'gauge', 'numberFormatter');
         var valueNumber = valueNumberGroup
             .selectAll('text.gauge-value-number')
@@ -25785,15 +25786,22 @@ var gauge_Gauge = /** @class */ (function (_super) {
             .append('text')
             .attr('class', 'gauge-value-number')
             .merge(valueNumber)
-            .style('font-size', valueFontSize(radius) + "px")
+            .style('font-size', fontSize + "px")
             .attr('text-anchor', 'middle')
             .text(function (d) { return numberFormatter(d); });
         // add the percentage symbol beside the valueNumber
         var valueNumberWidth = dom_utils_DOMUtils.getSVGElementSize(dom_utils_DOMUtils.appendOrSelect(svg, 'text.gauge-value-number'), { useBBox: true }).width;
-        dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
-            .style('font-size', valueFontSize(radius) / 2 + "px")
+        var symbolFontSize = fontSize / 2;
+        var symbol = dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
+            .style('font-size', symbolFontSize + "px")
             .attr('x', valueNumberWidth / 2)
             .text('%');
+        var _a = dom_utils_DOMUtils.getSVGElementSize(symbol, { useBBox: true }), symbolWidth = _a.width, symbolHeight = _a.height;
+        // adjust the symbol to superscript using the bbox instead of the font-size cause
+        // we want to align the actual character to the value number
+        symbol.attr('y', "-" + symbolHeight / 2 + "px");
+        // move the value group depending on the symbol's drawn size
+        valueNumberGroup.attr('transform', "translate(-" + symbolWidth / 2 + ", 0)"); // Optical centering for the presence of the smaller % symbol
     };
     /**
      * adds the delta number for the gauge