highcharts 11.3.0 → 11.4.0

package/es-modules/Core/Renderer/HTML/AST.js

@@ -501,7 +501,7 @@ AST.emptyHTML = emptyHTML;
 /**
  * Allow all custom SVG and HTML attributes, references and tags (together
  * with potentially harmful ones) to be added to the DOM from the chart
- * configuration. In other words, disable the the allow-listing which is the
+ * configuration. In other words, disable the allow-listing which is the
  * primary functionality of the AST.
  *
  * WARNING: Setting this property to `true` while allowing untrusted user

package/es-modules/Core/Renderer/HTML/HTMLElement.js

@@ -8,11 +8,98 @@
  *
  * */
 'use strict';
+import AST from './AST.js';
 import H from '../../Globals.js';
 const { composed } = H;
 import SVGElement from '../SVG/SVGElement.js';
 import U from '../../Utilities.js';
-const { css, defined, extend, pushUnique, pInt } = U;
+const { attr, css, createElement, defined, extend, pInt, pushUnique } = U;
+/**
+ * The opacity and visibility properties are set as attributes on the main
+ * element and SVG groups, and as identical CSS properties on the HTML element
+ * and the ancestry divs. (#3542)
+ *
+ * @private
+ */
+function commonSetter(value, key, elem) {
+    const style = this.div?.style || elem.style;
+    SVGElement.prototype[`${key}Setter`].call(this, value, key, elem);
+    if (style) {
+        style[key] = value;
+    }
+}
+/**
+ * Decorate each SVG group in the ancestry line. Each SVG `g` element that
+ * contains children with useHTML, will receive a `div` element counterpart to
+ * contain the HTML span. These div elements are translated and styled like
+ * original `g` counterparts.
+ *
+ * @private
+ */
+const decorateSVGGroup = (g, container) => {
+    if (!g.div) {
+        const className = attr(g.element, 'class'), cssProto = g.css;
+        // Create the parallel HTML group
+        const div = createElement('div', className ? { className } : void 0, {
+            // Add HTML specific styles
+            position: 'absolute',
+            left: `${g.translateX || 0}px`,
+            top: `${g.translateY || 0}px`,
+            // Add pre-existing styles
+            ...g.styles,
+            // Add g attributes that correspond to CSS
+            display: g.display,
+            opacity: g.opacity,
+            visibility: g.visibility
+        }, 
+        // The top group is appended to container
+        g.parentGroup?.div || container);
+        g.classSetter = (value, key, element) => {
+            element.setAttribute('class', value);
+            div.className = value;
+        };
+        /**
+         * Common translate setter for X and Y on the HTML group.
+         *
+         * Reverted the fix for #6957 due to positioning problems and offline
+         * export (#7254, #7280, #7529)
+         * @private
+         */
+        g.translateXSetter = g.translateYSetter = (value, key) => {
+            g[key] = value;
+            div.style[key === 'translateX' ? 'left' : 'top'] = `${value}px`;
+            g.doTransform = true;
+        };
+        g.opacitySetter = g.visibilitySetter = commonSetter;
+        // Extend the parent group's css function by updating the parallel div
+        // counterpart with the same style.
+        g.css = (styles) => {
+            // Call the base css method. The `parentGroup` can be either an
+            // SVGElement or an SVGLabel, in which the css method is extended
+            // (#19200).
+            cssProto.call(g, styles);
+            // #6794
+            if (styles.cursor) {
+                div.style.cursor = styles.cursor;
+            }
+            // #18821
+            if (styles.pointerEvents) {
+                div.style.pointerEvents = styles.pointerEvents;
+            }
+            return g;
+        };
+        // Event handling
+        g.on = function () {
+            SVGElement.prototype.on.apply({
+                element: div,
+                onEvents: g.onEvents
+            }, arguments);
+            return g;
+        };
+        g.div = div;
+    }
+    return g.div;
+};
 /* *
  *
  *  Class
@@ -25,27 +112,45 @@ class HTMLElement extends SVGElement {
      *
      * */
     /**
-     * Modifies SVGElement to support HTML elements.
+     * Compose
      * @private
      */
-    static compose(SVGElementClass) {
+    static compose(SVGRendererClass) {
         if (pushUnique(composed, this.compose)) {
-            const htmlElementProto = HTMLElement.prototype, svgElementProto = SVGElementClass.prototype;
-            svgElementProto.getSpanCorrection = htmlElementProto
-                .getSpanCorrection;
-            svgElementProto.htmlCss = htmlElementProto.htmlCss;
-            svgElementProto.htmlGetBBox = htmlElementProto.htmlGetBBox;
-            svgElementProto.htmlUpdateTransform = htmlElementProto
-                .htmlUpdateTransform;
-            svgElementProto.setSpanRotation = htmlElementProto.setSpanRotation;
+            /**
+             * Create a HTML text node. This is used by the SVG renderer `text`
+             * and `label` functions through the `useHTML` parameter.
+             *
+             * @private
+             */
+            SVGRendererClass.prototype.html = function (str, x, y) {
+                return new HTMLElement(this, 'span')
+                    // Set the default attributes
+                    .attr({
+                    text: str,
+                    x: Math.round(x),
+                    y: Math.round(y)
+                });
+            };
         }
-        return SVGElementClass;
     }
     /* *
      *
      *  Functions
      *
      * */
+    constructor(renderer, nodeName) {
+        super(renderer, nodeName);
+        this.css({
+            position: 'absolute',
+            ...(renderer.styledMode ? {} : {
+                fontFamily: renderer.style.fontFamily,
+                fontSize: renderer.style.fontSize
+            })
+        });
+        // Keep the whiteSpace style outside the `HTMLElement.styles` collection
+        this.element.style.whiteSpace = 'nowrap';
+    }
     /**
      * Get the correction in X and Y positioning as the element is rotated.
      * @private
@@ -58,7 +163,7 @@ class HTMLElement extends SVGElement {
      * Apply CSS to HTML elements. This is used in text within SVG rendering.
      * @private
      */
-    htmlCss(styles) {
+    css(styles) {
         const { element } = this, 
         // When setting or unsetting the width style, we need to update
         // transform (#8809)
@@ -79,12 +184,16 @@ class HTMLElement extends SVGElement {
         css(element, styles);
         // Now that all styles are applied, to the transform
         if (doTransform) {
-            this.htmlUpdateTransform();
+            this.updateTransform();
         }
         return this;
     }
     /**
      * The useHTML method for calculating the bounding box based on offsets.
+     * Called internally from the `SVGElement.getBBox` function and subsequently
+     * rotated.
+     *
+     * @private
      */
     htmlGetBBox() {
         const { element } = this;
@@ -96,17 +205,19 @@ class HTMLElement extends SVGElement {
         };
     }
     /**
+     * Batch update styles and attributes related to transform
+     *
      * @private
      */
-    htmlUpdateTransform() {
+    updateTransform() {
         // Aligning non added elements is expensive
         if (!this.added) {
             this.alignOnAdd = true;
             return;
         }
-        const { element, renderer, rotation, styles, textAlign = 'left', textWidth, translateX = 0, translateY = 0, x = 0, y = 0 } = this, alignCorrection = {
+        const { element, renderer, rotation, rotationOriginX, rotationOriginY, styles, textAlign = 'left', textWidth, translateX = 0, translateY = 0, x = 0, y = 0 } = this, alignCorrection = {
             left: 0, center: 0.5, right: 1
-        }[textAlign], whiteSpace = styles?.whiteSpace;
+        }[textAlign], whiteSpace = styles.whiteSpace;
         // Get the pixel length of the text
         const getTextPxLength = () => {
             if (this.textPxLength) {
@@ -132,7 +243,7 @@ class HTMLElement extends SVGElement {
                 element.innerHTML,
                 textWidth,
                 this.textAlign
-            ].join(',');
+            ].join(','), parentPadding = (this.parentGroup?.padding * -1) || 0;
             let baseline, hasBoxWidthChanged = false;
             // Update textWidth. Use the memoized textPxLength if possible, to
             // avoid the getTextPxLength function using elem.offsetWidth.
@@ -166,7 +277,7 @@ class HTMLElement extends SVGElement {
                 if (defined(rotation) &&
                     ((rotation !== (this.oldRotation || 0)) ||
                         (textAlign !== this.oldAlign))) {
-                    this.setSpanRotation(rotation, alignCorrection, baseline);
+                    this.setSpanRotation(rotation, parentPadding, parentPadding);
                 }
                 this.getSpanCorrection(
                 // Avoid elem.offsetWidth if we can, it affects rendering
@@ -174,11 +285,13 @@ class HTMLElement extends SVGElement {
                 ((!defined(rotation) && this.textPxLength) || // #7920
                     element.offsetWidth), baseline, alignCorrection);
             }
-            // Apply position with correction
-            css(element, {
-                left: (x + (this.xCorr || 0)) + 'px',
-                top: (y + (this.yCorr || 0)) + 'px'
-            });
+            // Apply position with correction and rotation origin
+            const { xCorr = 0, yCorr = 0 } = this, rotOriginX = (rotationOriginX ?? x) - xCorr - x - parentPadding, rotOriginY = (rotationOriginY ?? y) - yCorr - y - parentPadding, styles = {
+                left: `${x + xCorr}px`,
+                top: `${y + yCorr}px`,
+                transformOrigin: `${rotOriginX}px ${rotOriginY}px`
+            };
+            css(element, styles);
             // Record current text transform
             this.cTT = currentTextTransform;
             this.oldRotation = rotation;
@@ -189,16 +302,90 @@ class HTMLElement extends SVGElement {
      * Set the rotation of an individual HTML span.
      * @private
      */
-    setSpanRotation(rotation, alignCorrection, baseline) {
+    setSpanRotation(rotation, originX, originY) {
         // CSS transform and transform-origin both supported without prefix
         // since Firefox 16 (2012), IE 10 (2012), Chrome 36 (2014), Safari 9
         // (2015).;
         css(this.element, {
             transform: `rotate(${rotation}deg)`,
-            transformOrigin: `${alignCorrection * 100}% ${baseline}px`
+            transformOrigin: `${originX}% ${originY}px`
         });
     }
+    /**
+     * Add the element to a group wrapper. For HTML elements, a parallel div
+     * will be created for each ancenstor SVG `g` element.
+     *
+     * @private
+     */
+    add(parentGroup) {
+        const container = this.renderer.box
+            .parentNode, parents = [];
+        let div;
+        this.parentGroup = parentGroup;
+        // Create a parallel divs to hold the HTML elements
+        if (parentGroup) {
+            div = parentGroup.div;
+            if (!div) {
+                // Read the parent chain into an array and read from top
+                // down
+                let svgGroup = parentGroup;
+                while (svgGroup) {
+                    parents.push(svgGroup);
+                    // Move up to the next parent group
+                    svgGroup = svgGroup.parentGroup;
+                }
+                // Decorate each of the ancestor group elements with a parallel
+                // div that reflects translation and styling
+                for (const parentGroup of parents.reverse()) {
+                    div = decorateSVGGroup(parentGroup, container);
+                }
+            }
+        }
+        (div || container).appendChild(this.element);
+        this.added = true;
+        if (this.alignOnAdd) {
+            this.updateTransform();
+        }
+        return this;
+    }
+    /**
+     * Text setter
+     * @private
+     */
+    textSetter(value) {
+        if (value !== this.textStr) {
+            delete this.bBox;
+            delete this.oldTextWidth;
+            AST.setElementHTML(this.element, value ?? '');
+            this.textStr = value;
+            this.doTransform = true;
+        }
+    }
+    /**
+     * Align setter
+     *
+     * @private
+     */
+    alignSetter(value) {
+        this.alignValue = this.textAlign = value;
+        this.doTransform = true;
+    }
+    /**
+     * Various setters which rely on update transform
+     * @private
+     */
+    xSetter(value, key) {
+        this[key] = value;
+        this.doTransform = true;
+    }
 }
+// Some shared setters
+const proto = HTMLElement.prototype;
+proto.visibilitySetter = proto.opacitySetter = commonSetter;
+proto.ySetter =
+    proto.rotationSetter =
+        proto.rotationOriginXSetter =
+            proto.rotationOriginYSetter = proto.xSetter;
 /* *
  *
  *  Default Export

package/es-modules/Core/Renderer/RendererUtilities.js

@@ -134,7 +134,7 @@ var RendererUtilities;
                 origBoxes[i].pos = box.pos + posInCompositeBox;
                 // If the distance between the position and the target exceeds
                 // maxDistance, abort the loop and decrease the length in
-                // increments of 10% to recursively reduce the  number of
+                // increments of 10% to recursively reduce the number of
                 // visible boxes by rank. Once all boxes are within the
                 // maxDistance, we're good.
                 if (typeof maxDistance !== 'undefined' &&

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -12,9 +12,9 @@ import A from '../../Animation/AnimationUtilities.js';
 const { animate, animObject, stop } = A;
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
-const { deg2rad, doc, noop, svg, SVG_NS, win } = H;
+const { deg2rad, doc, svg, SVG_NS, win } = H;
 import U from '../../Utilities.js';
-const { addEvent, attr, createElement, css, defined, erase, extend, fireEvent, isArray, isFunction, isObject, isString, merge, objectEach, pick, pInt, syncTimeout, uniqueKey } = U;
+const { addEvent, attr, createElement, css, defined, erase, extend, fireEvent, isArray, isFunction, isObject, isString, merge, objectEach, pick, pInt, replaceNested, syncTimeout, uniqueKey } = U;
 /* *
  *
  *  Class
@@ -40,6 +40,10 @@ const { addEvent, attr, createElement, css, defined, erase, extend, fireEvent, i
  * {@link Highcharts.SVGRenderer#g|g}
  * and more.
  *
+ * See [How to use the SVG Renderer](
+ * https://www.highcharts.com/docs/advanced-chart-features/renderer) for a
+ * comprehensive tutorial on how to draw SVG elements on a chart.
+ *
  * @class
  * @name Highcharts.SVGElement
  */
@@ -202,9 +206,13 @@ class SVGElement {
      *        box is `spacingBox`, it refers to `Renderer.spacingBox` which
      *        holds `width`, `height`, `x` and `y` properties.
      *
+     * @param {boolean} [redraw]
+     *        Decide if SVGElement should be redrawn with new alignment or
+     *        just change its attributes.
+     *
      * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
      */
-    align(alignOptions, alignByTranslate, box) {
+    align(alignOptions, alignByTranslate, box, redraw = true) {
         const attribs = {}, renderer = this.renderer, alignedObjects = renderer.alignedObjects;
         let x, y, alignTo, alignFactor, vAlignFactor;
         // First call on instanciate
@@ -225,8 +233,7 @@ class SVGElement {
             alignByTranslate = this.alignByTranslate;
             alignTo = this.alignTo;
         }
-        box = pick(box, renderer[alignTo], alignTo === 'scrollablePlotBox' ?
-            renderer.plotBox : void 0, renderer);
+        box = pick(box, renderer[alignTo], renderer);
         // Assign variables
         const align = alignOptions.align, vAlign = alignOptions.verticalAlign;
         // default: left align
@@ -258,8 +265,10 @@ class SVGElement {
         }
         attribs[alignByTranslate ? 'translateY' : 'y'] = Math.round(y);
         // Animate only if already placed
-        this[this.placed ? 'animate' : 'attr'](attribs);
-        this.placed = true;
+        if (redraw) {
+            this[this.placed ? 'animate' : 'attr'](attribs);
+            this.placed = true;
+        }
         this.alignAttr = attribs;
         return this;
     }
@@ -610,7 +619,7 @@ class SVGElement {
                 gradients = renderer.gradients;
                 stops = colorOptions.stops;
                 radialReference = elem.radialReference;
-                // Keep < 2.2 kompatibility
+                // Keep < 2.2 compatibility
                 if (isArray(gradAttr)) {
                     colorOptions[gradName] = gradAttr = {
                         x1: gradAttr[0],
@@ -730,8 +739,8 @@ class SVGElement {
                 styles.width) {
                 textWidth = this.textWidth = pInt(styles.width);
             }
-            // store object
-            this.styles = styles;
+            // Store object
+            extend(this.styles, styles);
             if (textWidth && (!svg && this.renderer.forExport)) {
                 delete styles.width;
             }
@@ -932,7 +941,7 @@ class SVGElement {
      * @function Highcharts.SVGElement#getBBox
      *
      * @param {boolean} [reload]
-     *        Skip the cache and get the updated DOM bouding box.
+     *        Skip the cache and get the updated DOM bounding box.
      *
      * @param {number} [rot]
      *        Override the element's rotation. This is internally used on axis
@@ -944,8 +953,8 @@ class SVGElement {
      */
     getBBox(reload, rot) {
         const wrapper = this, { alignValue, element, renderer, styles, textStr } = wrapper, { cache, cacheKeys } = renderer, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
-            SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
-        let bBox, width, height, toggleTextShadowShim, cacheKey;
+            SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles.fontSize);
+        let bBox, height, toggleTextShadowShim, cacheKey;
         // Avoid undefined and null (#7316)
         if (defined(textStr)) {
             cacheKey = textStr.toString();
@@ -964,8 +973,8 @@ class SVGElement {
                 rotation,
                 wrapper.textWidth,
                 alignValue,
-                styles && styles.textOverflow,
-                styles && styles.fontWeight // #12163
+                styles.textOverflow,
+                styles.fontWeight // #12163
             ].join(',');
         }
         if (cacheKey && !reload) {
@@ -1021,7 +1030,6 @@ class SVGElement {
             }
             // True SVG elements as well as HTML elements in modern browsers
             // using the .useHTML option need to compensated for rotation
-            width = bBox.width;
             height = bBox.height;
             // Workaround for wrong bounding box in IE, Edge and Chrome on
             // Windows. With Highcharts' default font, IE and Edge report
@@ -1040,20 +1048,7 @@ class SVGElement {
             }
             // Adjust for rotated text
             if (rotation) {
-                const baseline = Number(element.getAttribute('y') || 0) - bBox.y, alignFactor = {
-                    'right': 1,
-                    'center': 0.5
-                }[alignValue || 0] || 0, rad = rotation * deg2rad, rad90 = (rotation - 90) * deg2rad, wCosRad = width * Math.cos(rad), wSinRad = width * Math.sin(rad), cosRad90 = Math.cos(rad90), sinRad90 = Math.sin(rad90), 
-                // Find the starting point on the left side baseline of
-                // the text
-                pX = bBox.x + alignFactor * (width - wCosRad), pY = bBox.y + baseline - alignFactor * wSinRad, 
-                // Find all corners
-                aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
-                // Deduct the bounding box from the corners
-                bBox.x = Math.min(aX, bX, cX, dX);
-                bBox.y = Math.min(aY, bY, cY, dY);
-                bBox.width = Math.max(aX, bX, cX, dX) - bBox.x;
-                bBox.height = Math.max(aY, bY, cY, dY) - bBox.y;
+                bBox = this.getRotatedBox(bBox, rotation);
             }
         }
         // Cache it. When loading a chart in a hidden iframe in Firefox and
@@ -1070,6 +1065,38 @@ class SVGElement {
         }
         return bBox;
     }
+    /**
+     * Get the rotated box.
+     * @private
+     */
+    getRotatedBox(box, rotation) {
+        const { x: boxX, y: boxY, width, height } = box, { alignValue, translateY, rotationOriginX = 0, rotationOriginY = 0 } = this, alignFactor = {
+            'right': 1,
+            'center': 0.5
+        }[alignValue || 0] || 0, baseline = Number(this.element.getAttribute('y') || 0) -
+            (translateY ? 0 : boxY), rad = rotation * deg2rad, rad90 = (rotation - 90) * deg2rad, cosRad = Math.cos(rad), sinRad = Math.sin(rad), wCosRad = width * cosRad, wSinRad = width * sinRad, cosRad90 = Math.cos(rad90), sinRad90 = Math.sin(rad90), [[xOriginCosRad, xOriginSinRad], [yOriginCosRad, yOriginSinRad]] = [
+            rotationOriginX,
+            rotationOriginY
+        ].map((rotOrigin) => [
+            rotOrigin - (rotOrigin * cosRad),
+            rotOrigin * sinRad
+        ]), 
+        // Find the starting point on the left side baseline of
+        // the text
+        pX = ((boxX + alignFactor * (width - wCosRad)) +
+            xOriginCosRad + yOriginSinRad), pY = ((boxY + baseline - alignFactor * wSinRad) -
+            xOriginSinRad + yOriginCosRad), 
+        // Find all corners
+        aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
+        // Deduct the bounding box from the corners
+        const x = Math.min(aX, bX, cX, dX), y = Math.min(aY, bY, cY, dY), boxWidth = Math.max(aX, bX, cX, dX) - x, boxHeight = Math.max(aY, bY, cY, dY) - y;
+        return {
+            x,
+            y,
+            width: boxWidth,
+            height: boxHeight
+        };
+    }
     /**
      * Get the computed style. Only in styled mode.
      *
@@ -1146,7 +1173,7 @@ class SVGElement {
          * @name Highcharts.SVGElement#element
          * @type {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
          */
-        this.element = nodeName === 'span' ?
+        this.element = nodeName === 'span' || nodeName === 'body' ?
             createElement(nodeName) :
             doc.createElementNS(this.SVG_NS, nodeName);
         /**
@@ -1156,6 +1183,7 @@ class SVGElement {
          * @type {Highcharts.SVGRenderer}
          */
         this.renderer = renderer;
+        this.styles = {};
         fireEvent(this, 'afterInit');
     }
     /**
@@ -1437,7 +1465,7 @@ class SVGElement {
      * @function Highcharts.SVGElement#strokeWidth
      *
      * @return {number}
-     * The stroke width in pixels. Even if the given stroke widtch (in CSS or by
+     * The stroke width in pixels. Even if the given stroke width (in CSS or by
      * attributes) is based on `em` or other units, the pixel size is returned.
      */
     strokeWidth() {
@@ -1447,21 +1475,21 @@ class SVGElement {
         }
         // In styled mode, read computed stroke width
         const val = this.getStyle('stroke-width');
-        let ret = 0, dummy;
+        let ret = 0, tempElement;
         // Read pixel values directly
-        if (val.indexOf('px') === val.length - 2) {
+        if (/px$/.test(val)) {
             ret = pInt(val);
             // Other values like em, pt etc need to be measured
         }
         else if (val !== '') {
-            dummy = doc.createElementNS(SVG_NS, 'rect');
-            attr(dummy, {
+            tempElement = doc.createElementNS(SVG_NS, 'rect');
+            attr(tempElement, {
                 width: val,
                 'stroke-width': 0
             });
-            this.element.parentNode.appendChild(dummy);
-            ret = dummy.getBBox().width;
-            dummy.parentNode.removeChild(dummy);
+            this.element.parentNode.appendChild(tempElement);
+            ret = tempElement.getBBox().width;
+            tempElement.parentNode.removeChild(tempElement);
         }
         return ret;
     }
@@ -1518,12 +1546,9 @@ class SVGElement {
             el.appendChild(titleNode);
         }
         // Replace text content and escape markup
-        titleNode.textContent =
-            // #3276, #3895
-            String(pick(value, ''))
-                .replace(/<[^>]*>/g, '')
-                .replace(/&lt;/g, '<')
-                .replace(/&gt;/g, '>');
+        titleNode.textContent = replaceNested(// Scan #[73]
+        pick(value, ''), // #3276, #3895
+        [/<[^>]*>/g, '']).replace(/&lt;/g, '<').replace(/&gt;/g, '>');
     }
     /**
      * Bring the element to the front. Alternatively, a new zIndex can be set.
@@ -1570,23 +1595,31 @@ class SVGElement {
      * @function Highcharts.SVGElement#updateTransform
      */
     updateTransform(attrib = 'transform') {
-        const { element, matrix, rotation = 0, scaleX, scaleY, translateX = 0, translateY = 0 } = this;
+        const { element, matrix, rotation = 0, rotationOriginX, rotationOriginY, scaleX, scaleY, translateX = 0, translateY = 0 } = this;
         // Apply translate. Nearly all transformed elements have translation,
         // so instead of checking for translate = 0, do it always (#1767,
         // #1846).
         const transform = ['translate(' + translateX + ',' + translateY + ')'];
-        // apply matrix
+        // Apply matrix
         if (defined(matrix)) {
             transform.push('matrix(' + matrix.join(',') + ')');
         }
         // Apply rotation
-        if (rotation) { // text rotation or inverted chart
+        if (rotation) {
             transform.push('rotate(' + rotation + ' ' +
-                pick(this.rotationOriginX, element.getAttribute('x'), 0) +
+                pick(rotationOriginX, element.getAttribute('x'), 0) +
                 ' ' +
-                pick(this.rotationOriginY, element.getAttribute('y') || 0) + ')');
+                pick(rotationOriginY, element.getAttribute('y') || 0) + ')');
+            // HTML labels rotation (#20685)
+            if (this.text?.element.tagName === 'SPAN') {
+                this.text.attr({
+                    rotation,
+                    rotationOriginX: (rotationOriginX || 0) - this.padding,
+                    rotationOriginY: (rotationOriginY || 0) - this.padding
+                });
+            }
         }
-        // apply scale
+        // Apply scale
         if (defined(scaleX) || defined(scaleY)) {
             transform.push('scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')');
         }
@@ -1606,7 +1639,7 @@ class SVGElement {
      *
      */
     visibilitySetter(value, key, element) {
-        // IE9-11 doesn't handle visibilty:inherit well, so we remove the
+        // IE9-11 doesn't handle visibility:inherit well, so we remove the
         // attribute instead (#2881, #3909)
         if (value === 'inherit') {
             element.removeAttribute(key);