@amcharts/amcharts5 5.2.31 → 5.2.33

package/.internal/core/render/backend/CanvasRenderer.js

@@ -38,6 +38,43 @@ function checkEvenArgs(name, actual, expected) {
         throw new Error("Arguments for " + name + " must be in pairs of " + expected);
     }
 }
+/**
+ * @ignore
+ * This splits the flag so that way 0017 will be processed as 0 0 17
+ *
+ * This is important for weird paths like `M17 5A1 1 0 0017 30 1 1 0 0017 5`
+ */
+function splitArcFlags(args) {
+    for (var i = 0; i < args.length; i += 7) {
+        var index = i + 3;
+        var flag = args[index];
+        if (flag.length > 1) {
+            var a = /^([01])([01])(.*)$/.exec(flag);
+            if (a !== null) {
+                args.splice(index, 0, a[1]);
+                ++index;
+                args.splice(index, 0, a[2]);
+                ++index;
+                if (a[3].length > 0) {
+                    args[index] = a[3];
+                }
+                else {
+                    args.splice(index, 1);
+                }
+            }
+        }
+        ++index;
+        flag = args[index];
+        if (flag.length > 1) {
+            var a = /^([01])(.+)$/.exec(flag);
+            if (a !== null) {
+                args.splice(index, 0, a[1]);
+                ++index;
+                args[index] = a[2];
+            }
+        }
+    }
+}
 /**
  * @ignore
  */
@@ -1950,7 +1987,7 @@ var CanvasGraphics = /** @class */ (function (_super) {
                 var rest = match[2];
                 var args = [];
                 while ((match = ARGS_REGEXP.exec(rest)) !== null) {
-                    args.push(+match[1]);
+                    args.push(match[1]);
                 }
                 // Reset control point
                 if (name_1 !== "S" && name_1 !== "s" && name_1 !== "C" && name_1 !== "c") {
@@ -1965,91 +2002,91 @@ var CanvasGraphics = /** @class */ (function (_super) {
                 switch (name_1) {
                     case "M":
                         checkEvenArgs(name_1, args.length, 2);
-                        x = args[0];
-                        y = args[1];
+                        x = +args[0];
+                        y = +args[1];
                         this.moveTo(x, y);
                         for (var i = 2; i < args.length; i += 2) {
-                            x = args[i];
-                            y = args[i + 1];
+                            x = +args[i];
+                            y = +args[i + 1];
                             this.lineTo(x, y);
                         }
                         break;
                     case "m":
                         checkEvenArgs(name_1, args.length, 2);
-                        x += args[0];
-                        y += args[1];
+                        x += +args[0];
+                        y += +args[1];
                         this.moveTo(x, y);
                         for (var i = 2; i < args.length; i += 2) {
-                            x += args[i];
-                            y += args[i + 1];
+                            x += +args[i];
+                            y += +args[i + 1];
                             this.lineTo(x, y);
                         }
                         break;
                     case "L":
                         checkEvenArgs(name_1, args.length, 2);
                         for (var i = 0; i < args.length; i += 2) {
-                            x = args[i];
-                            y = args[i + 1];
+                            x = +args[i];
+                            y = +args[i + 1];
                             this.lineTo(x, y);
                         }
                         break;
                     case "l":
                         checkEvenArgs(name_1, args.length, 2);
                         for (var i = 0; i < args.length; i += 2) {
-                            x += args[i];
-                            y += args[i + 1];
+                            x += +args[i];
+                            y += +args[i + 1];
                             this.lineTo(x, y);
                         }
                         break;
                     case "H":
                         checkMinArgs(name_1, args.length, 1);
                         for (var i = 0; i < args.length; ++i) {
-                            x = args[i];
+                            x = +args[i];
                             this.lineTo(x, y);
                         }
                         break;
                     case "h":
                         checkMinArgs(name_1, args.length, 1);
                         for (var i = 0; i < args.length; ++i) {
-                            x += args[i];
+                            x += +args[i];
                             this.lineTo(x, y);
                         }
                         break;
                     case "V":
                         checkMinArgs(name_1, args.length, 1);
                         for (var i = 0; i < args.length; ++i) {
-                            y = args[i];
+                            y = +args[i];
                             this.lineTo(x, y);
                         }
                         break;
                     case "v":
                         checkMinArgs(name_1, args.length, 1);
                         for (var i = 0; i < args.length; ++i) {
-                            y += args[i];
+                            y += +args[i];
                             this.lineTo(x, y);
                         }
                         break;
                     case "C":
                         checkEvenArgs(name_1, args.length, 6);
                         for (var i = 0; i < args.length; i += 6) {
-                            var x1 = args[i];
-                            var y1 = args[i + 1];
-                            cpx = args[i + 2];
-                            cpy = args[i + 3];
-                            x = args[i + 4];
-                            y = args[i + 5];
+                            var x1 = +args[i];
+                            var y1 = +args[i + 1];
+                            cpx = +args[i + 2];
+                            cpy = +args[i + 3];
+                            x = +args[i + 4];
+                            y = +args[i + 5];
                             this.bezierCurveTo(x1, y1, cpx, cpy, x, y);
                         }
                         break;
                     case "c":
                         checkEvenArgs(name_1, args.length, 6);
                         for (var i = 0; i < args.length; i += 6) {
-                            var x1 = args[i] + x;
-                            var y1 = args[i + 1] + y;
-                            cpx = args[i + 2] + x;
-                            cpy = args[i + 3] + y;
-                            x += args[i + 4];
-                            y += args[i + 5];
+                            var x1 = +args[i] + x;
+                            var y1 = +args[i + 1] + y;
+                            cpx = +args[i + 2] + x;
+                            cpy = +args[i + 3] + y;
+                            x += +args[i + 4];
+                            y += +args[i + 5];
                             this.bezierCurveTo(x1, y1, cpx, cpy, x, y);
                         }
                         break;
@@ -2062,10 +2099,10 @@ var CanvasGraphics = /** @class */ (function (_super) {
                         for (var i = 0; i < args.length; i += 4) {
                             var x1 = 2 * x - cpx;
                             var y1 = 2 * y - cpy;
-                            cpx = args[i];
-                            cpy = args[i + 1];
-                            x = args[i + 2];
-                            y = args[i + 3];
+                            cpx = +args[i];
+                            cpy = +args[i + 1];
+                            x = +args[i + 2];
+                            y = +args[i + 3];
                             this.bezierCurveTo(x1, y1, cpx, cpy, x, y);
                         }
                         break;
@@ -2078,30 +2115,30 @@ var CanvasGraphics = /** @class */ (function (_super) {
                         for (var i = 0; i < args.length; i += 4) {
                             var x1 = 2 * x - cpx;
                             var y1 = 2 * y - cpy;
-                            cpx = args[i] + x;
-                            cpy = args[i + 1] + y;
-                            x += args[i + 2];
-                            y += args[i + 3];
+                            cpx = +args[i] + x;
+                            cpy = +args[i + 1] + y;
+                            x += +args[i + 2];
+                            y += +args[i + 3];
                             this.bezierCurveTo(x1, y1, cpx, cpy, x, y);
                         }
                         break;
                     case "Q":
                         checkEvenArgs(name_1, args.length, 4);
                         for (var i = 0; i < args.length; i += 4) {
-                            qcpx = args[i];
-                            qcpy = args[i + 1];
-                            x = args[i + 2];
-                            y = args[i + 3];
+                            qcpx = +args[i];
+                            qcpy = +args[i + 1];
+                            x = +args[i + 2];
+                            y = +args[i + 3];
                             this.quadraticCurveTo(qcpx, qcpy, x, y);
                         }
                         break;
                     case "q":
                         checkEvenArgs(name_1, args.length, 4);
                         for (var i = 0; i < args.length; i += 4) {
-                            qcpx = args[i] + x;
-                            qcpy = args[i + 1] + y;
-                            x += args[i + 2];
-                            y += args[i + 3];
+                            qcpx = +args[i] + x;
+                            qcpy = +args[i + 1] + y;
+                            x += +args[i + 2];
+                            y += +args[i + 3];
                             this.quadraticCurveTo(qcpx, qcpy, x, y);
                         }
                         break;
@@ -2114,8 +2151,8 @@ var CanvasGraphics = /** @class */ (function (_super) {
                         for (var i = 0; i < args.length; i += 2) {
                             qcpx = 2 * x - qcpx;
                             qcpy = 2 * y - qcpy;
-                            x = args[i];
-                            y = args[i + 1];
+                            x = +args[i];
+                            y = +args[i + 1];
                             this.quadraticCurveTo(qcpx, qcpy, x, y);
                         }
                         break;
@@ -2128,18 +2165,19 @@ var CanvasGraphics = /** @class */ (function (_super) {
                         for (var i = 0; i < args.length; i += 2) {
                             qcpx = 2 * x - qcpx;
                             qcpy = 2 * y - qcpy;
-                            x += args[i];
-                            y += args[i + 1];
+                            x += +args[i];
+                            y += +args[i + 1];
                             this.quadraticCurveTo(qcpx, qcpy, x, y);
                         }
                         break;
                     case "A":
                     case "a":
                         var relative = (name_1 === "a");
+                        splitArcFlags(args);
                         checkEvenArgs(name_1, args.length, 7);
                         for (var i = 0; i < args.length; i += 7) {
-                            var cx = args[i + 5];
-                            var cy = args[i + 6];
+                            var cx = +args[i + 5];
+                            var cy = +args[i + 6];
                             if (relative) {
                                 cx += x;
                                 cy += y;
@@ -2147,11 +2185,11 @@ var CanvasGraphics = /** @class */ (function (_super) {
                             var bs = arcToBezier({
                                 px: x,
                                 py: y,
-                                rx: args[i],
-                                ry: args[i + 1],
-                                xAxisRotation: args[i + 2],
-                                largeArcFlag: assertBinary(args[i + 3]),
-                                sweepFlag: assertBinary(args[i + 4]),
+                                rx: +args[i],
+                                ry: +args[i + 1],
+                                xAxisRotation: +args[i + 2],
+                                largeArcFlag: assertBinary(+args[i + 3]),
+                                sweepFlag: assertBinary(+args[i + 4]),
                                 cx: cx,
                                 cy: cy,
                             });
@@ -2562,6 +2600,14 @@ var CanvasText = /** @class */ (function (_super) {
             }
         }
     });
+    Object.defineProperty(CanvasText.prototype, "_ignoreFontWeight", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return /apple/i.test(navigator.vendor);
+        }
+    });
     Object.defineProperty(CanvasText.prototype, "_measure", {
         enumerable: false,
         configurable: true,
@@ -2581,7 +2627,7 @@ var CanvasText = /** @class */ (function (_super) {
             // Pre-render
             context.save();
             ghostContext.save();
-            this._prerender(layer, true, true);
+            this._prerender(layer, true, this._ignoreFontWeight());
             // Get default font metrix
             var refText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
             // Split up text into lines
@@ -3234,173 +3280,175 @@ var CanvasRadialText = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (parentLayer) {
-            var layer = this._layer || parentLayer;
-            this._prerender(layer);
-            var interactive = this._isInteractive();
-            var context = layer.context;
-            var layerDirty = layer.dirty;
-            var ghostContext = this._renderer._ghostContext;
-            // Savepoint
-            context.save();
-            if (interactive) {
-                ghostContext.save();
-            }
-            // Init
-            var radius = (this.radius || 0);
-            var startAngle = (this.startAngle || 0);
-            var deltaAngle = 0;
-            var orientation = this.orientation;
-            var inward = orientation == "auto" ? "auto" : orientation == "inward";
-            var inside = this.inside;
-            var align = this.style.textAlign || "left";
-            var kerning = this.kerning || 0;
-            var clockwise = align == "left" ? 1 : -1;
-            var shouldReverse = !this._textReversed;
-            // We need measurements in order to properly position text for alignment
-            if (!this._textInfo) {
-                this._measure(layer);
-            }
-            // Check if we need to invert the whole stuff
-            if (inward == "auto") {
-                // Calc max angle so we know whether we need to flip it
-                var maxAngle_1 = 0;
-                var midAngle = 0;
-                $array.each(this._textInfo, function (line, _index) {
-                    var deltaAngle = startAngle + (line.width / (radius - line.height)) / 2 * -clockwise;
-                    if (deltaAngle > maxAngle_1) {
-                        maxAngle_1 = deltaAngle;
-                    }
-                });
-                if (align == "left") {
-                    midAngle = (maxAngle_1 + deltaAngle / 2) * $math.DEGREES;
-                }
-                else if (align == "right") {
-                    midAngle = (maxAngle_1 - deltaAngle / 2) * $math.DEGREES;
-                }
-                else {
-                    midAngle = startAngle * $math.DEGREES;
-                }
-                midAngle = $math.normalizeAngle(midAngle);
-                inward = (midAngle >= 270) || (midAngle <= 90);
-            }
-            if (inward == true && shouldReverse) {
-                this._textInfo.reverse();
-                this._textReversed = true;
-            }
-            // if ((inward == false && align == "left") || (inward == true && align == "right")) {
-            // 	clockwise *= -1;
-            // }
-            // Process text info produced by _measure()
-            $array.each(this._textInfo, function (line, _index) {
-                var textHeight = line.height;
-                // Adjust radius (for `inside = false`)
-                // Radius adjustment for `inside = false` is below the line calculation
-                if (!inside) {
-                    radius += textHeight;
-                }
-                // Reverse letters if we're painting them counter-clockwise
-                if (((clockwise == -1 && inward) || (clockwise == 1 && !inward)) && shouldReverse) {
-                    line.textChunks.reverse();
-                }
-                // Init angles
-                var lineStartAngle = startAngle;
-                deltaAngle = 0;
-                // Adjust for center-align
-                if (align == "center") {
-                    lineStartAngle += (line.width / (radius - textHeight)) / 2 * -clockwise;
-                    deltaAngle = lineStartAngle - startAngle;
-                }
-                // if (inward == "auto") {
-                // 	let midAngle;
-                // 	if (align == "left") {
-                // 		midAngle = (lineStartAngle + deltaAngle / 2) * $math.DEGREES;
-                // 	}
-                // 	else if () {
-                // 		midAngle = (lineStartAngle - deltaAngle / 2) * $math.DEGREES;
-                // 	}
-                // 	inward = (midAngle >= 270) || (midAngle <= 90);
-                // }
-                // Rotate letters if they are facing outward
-                lineStartAngle += (Math.PI * (inward ? 0 : 1)); // Rotate 180 if outward
+            if (this._textVisible) {
+                var layer = this._layer || parentLayer;
+                this._prerender(layer);
+                var interactive_2 = this._isInteractive();
+                var context_3 = layer.context;
+                var layerDirty_2 = layer.dirty;
+                var ghostContext_3 = this._renderer._ghostContext;
                 // Savepoint
-                context.save();
-                if (interactive) {
-                    ghostContext.save();
+                context_3.save();
+                if (interactive_2) {
+                    ghostContext_3.save();
                 }
-                // Assume starting angle
-                context.rotate(lineStartAngle);
-                if (interactive) {
-                    ghostContext.rotate(lineStartAngle);
+                // Init
+                var radius_1 = (this.radius || 0);
+                var startAngle_1 = (this.startAngle || 0);
+                var deltaAngle_1 = 0;
+                var orientation_1 = this.orientation;
+                var inward_1 = orientation_1 == "auto" ? "auto" : orientation_1 == "inward";
+                var inside_1 = this.inside;
+                var align_1 = this.style.textAlign || "left";
+                var kerning_1 = this.kerning || 0;
+                var clockwise_1 = align_1 == "left" ? 1 : -1;
+                var shouldReverse_1 = !this._textReversed;
+                // We need measurements in order to properly position text for alignment
+                if (!this._textInfo) {
+                    this._measure(layer);
                 }
-                var angleShift = 0;
-                $array.each(line.textChunks, function (chunk, _index) {
-                    // Draw the letter
-                    var char = chunk.text;
-                    var charWidth = chunk.width;
-                    // Rotate half a letter
-                    angleShift = (charWidth / 2) / (radius - textHeight) * clockwise;
-                    context.rotate(angleShift);
-                    if (interactive) {
-                        ghostContext.rotate(angleShift);
-                    }
-                    // Set style
-                    if (chunk.style) {
-                        context.save();
-                        ghostContext.save();
-                        context.font = chunk.style;
-                        if (interactive) {
-                            ghostContext.font = chunk.style;
+                // Check if we need to invert the whole stuff
+                if (inward_1 == "auto") {
+                    // Calc max angle so we know whether we need to flip it
+                    var maxAngle_1 = 0;
+                    var midAngle = 0;
+                    $array.each(this._textInfo, function (line, _index) {
+                        var deltaAngle = startAngle_1 + (line.width / (radius_1 - line.height)) / 2 * -clockwise_1;
+                        if (deltaAngle > maxAngle_1) {
+                            maxAngle_1 = deltaAngle;
                         }
+                    });
+                    if (align_1 == "left") {
+                        midAngle = (maxAngle_1 + deltaAngle_1 / 2) * $math.DEGREES;
                     }
-                    if (chunk.fill) {
-                        context.save();
-                        context.fillStyle = chunk.fill.toCSS();
-                        // Color does not affect ghostContext so we not set it
+                    else if (align_1 == "right") {
+                        midAngle = (maxAngle_1 - deltaAngle_1 / 2) * $math.DEGREES;
                     }
-                    // Center letters
-                    context.textBaseline = "middle";
-                    context.textAlign = "center";
-                    if (interactive) {
-                        ghostContext.textBaseline = "middle";
-                        ghostContext.textAlign = "center";
+                    else {
+                        midAngle = startAngle_1 * $math.DEGREES;
                     }
-                    // Plop the letter
-                    if (layerDirty) {
-                        context.fillText(char, 0, (inward ? 1 : -1) * (0 - radius + textHeight / 2));
+                    midAngle = $math.normalizeAngle(midAngle);
+                    inward_1 = (midAngle >= 270) || (midAngle <= 90);
+                }
+                if (inward_1 == true && shouldReverse_1) {
+                    this._textInfo.reverse();
+                    this._textReversed = true;
+                }
+                // if ((inward == false && align == "left") || (inward == true && align == "right")) {
+                // 	clockwise *= -1;
+                // }
+                // Process text info produced by _measure()
+                $array.each(this._textInfo, function (line, _index) {
+                    var textHeight = line.height;
+                    // Adjust radius (for `inside = false`)
+                    // Radius adjustment for `inside = false` is below the line calculation
+                    if (!inside_1) {
+                        radius_1 += textHeight;
                     }
-                    if (interactive) {
-                        ghostContext.fillText(char, 0, (inward ? 1 : -1) * (0 - radius + textHeight / 2));
+                    // Reverse letters if we're painting them counter-clockwise
+                    if (((clockwise_1 == -1 && inward_1) || (clockwise_1 == 1 && !inward_1)) && shouldReverse_1) {
+                        line.textChunks.reverse();
                     }
-                    if (chunk.fill) {
-                        context.restore();
-                        // Color does not affect ghostContext so we not set it
+                    // Init angles
+                    var lineStartAngle = startAngle_1;
+                    deltaAngle_1 = 0;
+                    // Adjust for center-align
+                    if (align_1 == "center") {
+                        lineStartAngle += (line.width / (radius_1 - textHeight)) / 2 * -clockwise_1;
+                        deltaAngle_1 = lineStartAngle - startAngle_1;
                     }
-                    // Reset style
-                    if (chunk.style) {
-                        context.restore();
-                        ghostContext.restore();
+                    // if (inward == "auto") {
+                    // 	let midAngle;
+                    // 	if (align == "left") {
+                    // 		midAngle = (lineStartAngle + deltaAngle / 2) * $math.DEGREES;
+                    // 	}
+                    // 	else if () {
+                    // 		midAngle = (lineStartAngle - deltaAngle / 2) * $math.DEGREES;
+                    // 	}
+                    // 	inward = (midAngle >= 270) || (midAngle <= 90);
+                    // }
+                    // Rotate letters if they are facing outward
+                    lineStartAngle += (Math.PI * (inward_1 ? 0 : 1)); // Rotate 180 if outward
+                    // Savepoint
+                    context_3.save();
+                    if (interactive_2) {
+                        ghostContext_3.save();
                     }
-                    // Rotate half a letter and add spacing
-                    angleShift = (charWidth / 2 + kerning) / (radius - textHeight) * clockwise;
-                    context.rotate(angleShift);
-                    if (interactive) {
-                        ghostContext.rotate(angleShift);
+                    // Assume starting angle
+                    context_3.rotate(lineStartAngle);
+                    if (interactive_2) {
+                        ghostContext_3.rotate(lineStartAngle);
+                    }
+                    var angleShift = 0;
+                    $array.each(line.textChunks, function (chunk, _index) {
+                        // Draw the letter
+                        var char = chunk.text;
+                        var charWidth = chunk.width;
+                        // Rotate half a letter
+                        angleShift = (charWidth / 2) / (radius_1 - textHeight) * clockwise_1;
+                        context_3.rotate(angleShift);
+                        if (interactive_2) {
+                            ghostContext_3.rotate(angleShift);
+                        }
+                        // Set style
+                        if (chunk.style) {
+                            context_3.save();
+                            ghostContext_3.save();
+                            context_3.font = chunk.style;
+                            if (interactive_2) {
+                                ghostContext_3.font = chunk.style;
+                            }
+                        }
+                        if (chunk.fill) {
+                            context_3.save();
+                            context_3.fillStyle = chunk.fill.toCSS();
+                            // Color does not affect ghostContext so we not set it
+                        }
+                        // Center letters
+                        context_3.textBaseline = "middle";
+                        context_3.textAlign = "center";
+                        if (interactive_2) {
+                            ghostContext_3.textBaseline = "middle";
+                            ghostContext_3.textAlign = "center";
+                        }
+                        // Plop the letter
+                        if (layerDirty_2) {
+                            context_3.fillText(char, 0, (inward_1 ? 1 : -1) * (0 - radius_1 + textHeight / 2));
+                        }
+                        if (interactive_2) {
+                            ghostContext_3.fillText(char, 0, (inward_1 ? 1 : -1) * (0 - radius_1 + textHeight / 2));
+                        }
+                        if (chunk.fill) {
+                            context_3.restore();
+                            // Color does not affect ghostContext so we not set it
+                        }
+                        // Reset style
+                        if (chunk.style) {
+                            context_3.restore();
+                            ghostContext_3.restore();
+                        }
+                        // Rotate half a letter and add spacing
+                        angleShift = (charWidth / 2 + kerning_1) / (radius_1 - textHeight) * clockwise_1;
+                        context_3.rotate(angleShift);
+                        if (interactive_2) {
+                            ghostContext_3.rotate(angleShift);
+                        }
+                    });
+                    // Restore angle
+                    context_3.restore();
+                    if (interactive_2) {
+                        ghostContext_3.restore();
+                    }
+                    // Adjust radius (for `inside = true`)
+                    if (inside_1) {
+                        radius_1 -= textHeight;
                     }
                 });
-                // Restore angle
-                context.restore();
-                if (interactive) {
-                    ghostContext.restore();
-                }
-                // Adjust radius (for `inside = true`)
-                if (inside) {
-                    radius -= textHeight;
+                // Restore
+                context_3.restore();
+                if (interactive_2) {
+                    ghostContext_3.restore();
                 }
-            });
-            // Restore
-            context.restore();
-            if (interactive) {
-                ghostContext.restore();
             }
         }
     });
@@ -3426,7 +3474,14 @@ var CanvasRadialText = /** @class */ (function (_super) {
             var context = layer.context;
             var ghostContext = this._renderer._ghostContext;
             var rtl = this.style.direction == "rtl";
+            var oversizedBehavior = this.style.oversizedBehavior;
+            var maxWidth = this.style.maxWidth;
+            var truncate = $type.isNumber(maxWidth) && oversizedBehavior == "truncate";
+            var ellipsis = this.style.ellipsis || "";
+            var ellipsisMetrics;
+            //const wrap = $type.isNumber(maxWidth) && (oversizedBehavior == "wrap" || oversizedBehavior == "wrap-no-break");
             // Reset text info
+            this._textVisible = true;
             this._textInfo = [];
             this._textReversed = false;
             // Pre-render
@@ -3436,6 +3491,7 @@ var CanvasRadialText = /** @class */ (function (_super) {
             // Split up text into lines
             var lines = this.text.toString().replace(/\r/g, "").split(/\n/);
             var styleRestored = true;
+            var totalWidth = 0;
             // Iterate through the lines
             var offsetY = 0;
             $array.each(lines, function (line, _index) {
@@ -3483,6 +3539,9 @@ var CanvasRadialText = /** @class */ (function (_super) {
                             }
                             styleRestored = false;
                         }
+                        if (truncate) {
+                            ellipsisMetrics = _this._measureText(ellipsis, context);
+                        }
                     }
                     // Text format
                     else if (chunk.type == "value") {
@@ -3523,6 +3582,40 @@ var CanvasRadialText = /** @class */ (function (_super) {
                                 offsetY: chunkHeight,
                                 textDecoration: undefined
                             });
+                            totalWidth += chunkWidth;
+                            // Handle oversized behavior
+                            if (truncate) {
+                                // Measure ellipsis and check if it fits
+                                if (!ellipsisMetrics) {
+                                    ellipsisMetrics = _this._measureText(ellipsis, context);
+                                }
+                                var ellipsisWidth = ellipsisMetrics.actualBoundingBoxLeft + ellipsisMetrics.actualBoundingBoxRight;
+                                totalWidth += ellipsisWidth;
+                                if ((totalWidth + ellipsisWidth) > maxWidth) {
+                                    if (lineInfo.textChunks.length == 1) {
+                                        _this._textVisible = false;
+                                    }
+                                    else {
+                                        lineInfo.width += ellipsisWidth;
+                                        lineInfo.left += ellipsisMetrics.actualBoundingBoxLeft;
+                                        lineInfo.right += ellipsisMetrics.actualBoundingBoxRight;
+                                        lineInfo.textChunks.push({
+                                            style: currentStyle,
+                                            fill: currentFill,
+                                            text: ellipsis,
+                                            width: ellipsisWidth,
+                                            height: chunkHeight + ellipsisMetrics.actualBoundingBoxDescent,
+                                            left: ellipsisMetrics.actualBoundingBoxLeft,
+                                            right: ellipsisMetrics.actualBoundingBoxRight,
+                                            ascent: ellipsisMetrics.actualBoundingBoxAscent,
+                                            offsetX: 0,
+                                            offsetY: chunkHeight,
+                                            textDecoration: undefined
+                                        });
+                                    }
+                                    break;
+                                }
+                            }
                             if (rtl) {
                                 break;
                             }
@@ -3543,6 +3636,9 @@ var CanvasRadialText = /** @class */ (function (_super) {
                 context.restore();
                 ghostContext.restore();
             }
+            if (oversizedBehavior == "hide" && (totalWidth > maxWidth)) {
+                this._textVisible = false;
+            }
             // Adjust chunk internal offsets
             $array.each(this._textInfo, function (lineInfo) {
                 $array.each(lineInfo.textChunks, function (chunk) {