highcharts 11.3.0 → 11.4.0

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

@@ -156,21 +156,24 @@ class SVGLabel extends SVGElement {
     /*
      * Return the bounding box of the box, not the group.
      */
-    getBBox() {
+    getBBox(reload, rot) {
         // If we have a text string and the DOM bBox was 0, it typically means
         // that the label was first rendered hidden, so we need to update the
         // bBox (#15246)
         if (this.textStr && this.bBox.width === 0 && this.bBox.height === 0) {
             this.updateBoxSize();
         }
-        const padding = this.padding;
-        const paddingLeft = pick(this.paddingLeft, padding);
-        return {
-            width: this.width || 0,
-            height: this.height || 0,
-            x: this.bBox.x - paddingLeft,
-            y: this.bBox.y - padding
+        const { padding, height = 0, translateX = 0, translateY = 0, width = 0 } = this, paddingLeft = pick(this.paddingLeft, padding), rotation = rot ?? (this.rotation || 0);
+        let bBox = {
+            width,
+            height,
+            x: translateX + this.bBox.x - paddingLeft,
+            y: translateY + this.bBox.y - padding + this.baselineOffset
         };
+        if (rotation) {
+            bBox = this.getRotatedBox(bBox, rotation);
+        }
+        return bBox;
     }
     getCrispAdjust() {
         return this.renderer.styledMode && this.box ?
@@ -213,7 +216,7 @@ class SVGLabel extends SVGElement {
         this.boxAttr(key, value);
     }
     strokeSetter(value, key) {
-        // for animation getter (#6776)
+        // For animation getter (#6776)
         this.stroke = value;
         this.boxAttr(key, value);
     }
@@ -242,12 +245,12 @@ class SVGLabel extends SVGElement {
     updateBoxSize() {
         const text = this.text, attribs = {}, padding = this.padding, 
         // #12165 error when width is null (auto)
-        // #12163 when fontweight: bold, recalculate bBox withot cache
+        // #12163 when fontweight: bold, recalculate bBox without cache
         // #3295 && 3514 box failure when string equals 0
         bBox = this.bBox = (((!isNumber(this.widthSetting) ||
             !isNumber(this.heightSetting) ||
             this.textAlign) && defined(text.textStr)) ?
-            text.getBBox() :
+            text.getBBox(void 0, 0) :
             SVGLabel.emptyBBox);
         let crispAdjust;
         this.width = this.getPaddedWidth();

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

@@ -18,7 +18,7 @@ import SVGLabel from './SVGLabel.js';
 import Symbols from './Symbols.js';
 import TextBuilder from './TextBuilder.js';
 import U from '../../Utilities.js';
-const { addEvent, attr, createElement, css, defined, destroyObjectProperties, extend, isArray, isNumber, isObject, isString, merge, pick, pInt, uniqueKey } = U;
+const { addEvent, attr, createElement, css, defined, destroyObjectProperties, extend, isArray, isNumber, isObject, isString, merge, pick, pInt, replaceNested, uniqueKey } = U;
 /* *
  *
  *  Variables
@@ -40,6 +40,10 @@ let hasInternalReferenceBug;
  * An existing chart's renderer can be accessed through {@link Chart.renderer}.
  * The renderer can also be used completely decoupled from a chart.
  *
+ * See [How to use the SVG Renderer](
+ * https://www.highcharts.com/docs/advanced-chart-features/renderer) for a
+ * comprehensive tutorial.
+ *
  * @sample highcharts/members/renderer-on-chart
  *         Annotating a chart programmatically.
  * @sample highcharts/members/renderer-basic
@@ -163,7 +167,7 @@ class SVGRenderer {
         this.url = this.getReferenceURL();
         // Add description
         const desc = this.createElement('desc').add();
-        desc.element.appendChild(doc.createTextNode('Created with Highcharts 11.3.0'));
+        desc.element.appendChild(doc.createTextNode('Created with @product.name@ @product.version@'));
         this.defs = this.createElement('defs').add();
         this.allowHTML = allowHTML;
         this.forExport = forExport;
@@ -298,13 +302,12 @@ class SVGRenderer {
                 doc.body.removeChild(svg);
             }
             if (hasInternalReferenceBug) {
-                return win.location.href
-                    .split('#')[0] // remove the hash
-                    .replace(/<[^>]*>/g, '') // wing cut HTML
-                    // escape parantheses and quotes
-                    .replace(/([\('\)])/g, '\\$1')
-                    // replace spaces (needed for Safari only)
-                    .replace(/ /g, '%20');
+                // Scan alert #[72]: Loop for nested patterns
+                return replaceNested(win.location.href.split('#')[0], // remove hash
+                [/<[^>]*>/g, ''], // wing cut HTML
+                [/([\('\)])/g, '\\$1'], // escape parantheses and quotes
+                [/ /g, '%20'] // replace spaces (needed for Safari only)
+                );
             }
         }
         return '';
@@ -342,8 +345,8 @@ class SVGRenderer {
     /**
      * Detect whether the renderer is hidden. This happens when one of the
      * parent elements has `display: none`. Used internally to detect when we
-     * needto render preliminarily in another div to get the text bounding boxes
-     * right.
+     * need to render preliminarily in another div to get the text bounding
+     * boxes right.
      *
      * @function Highcharts.SVGRenderer#isHidden
      *
@@ -673,7 +676,7 @@ class SVGRenderer {
         const end = points[1];
         // Normalize to a crisp line
         if (defined(start[1]) && start[1] === end[1]) {
-            // Substract due to #1129. Now bottom and left axis gridlines behave
+            // Subtract due to #1129. Now bottom and left axis gridlines behave
             // the same.
             start[1] = end[1] =
                 Math[roundingFunction](start[1]) - (width % 2 / 2);
@@ -1706,7 +1709,7 @@ export default SVGRenderer;
  * */
 /**
  * A clipping rectangle that can be applied to one or more {@link SVGElement}
- * instances. It is instanciated with the {@link SVGRenderer#clipRect} function
+ * instances. It is instantiated with the {@link SVGRenderer#clipRect} function
  * and applied with the {@link SVGElement#clip} function.
  *
  * @example
@@ -1782,7 +1785,7 @@ export default SVGRenderer;
 * The shadow color.
 * @name    Highcharts.ShadowOptionsObject#color
 * @type    {Highcharts.ColorString|undefined}
-* @default #000000
+* @default ${palette.neutralColor100}
 */ /**
 * The horizontal offset from the element.
 *

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

@@ -15,12 +15,12 @@ const { animObject } = A;
 import Color from '../../Color/Color.js';
 const { parse: color } = Color;
 import H from '../../Globals.js';
-const { charts, composed, deg2rad } = H;
+const { charts, deg2rad } = H;
 import Math3D from '../../Math3D.js';
 const { perspective, shapeArea } = Math3D;
 import SVGElement3D from './SVGElement3D.js';
 import U from '../../Utilities.js';
-const { defined, extend, merge, pick, pushUnique } = U;
+const { defined, extend, merge, pick } = U;
 /* *
  *
  *  Constants
@@ -83,8 +83,9 @@ var SVGRenderer3D;
      * */
     /** @private */
     function compose(SVGRendererClass) {
-        if (pushUnique(composed, compose)) {
-            extend(SVGRendererClass.prototype, {
+        const rendererProto = SVGRendererClass.prototype;
+        if (!rendererProto.element3d) {
+            extend(rendererProto, {
                 Element3D: SVGElement3D,
                 arc3d,
                 arc3dPath,
@@ -249,7 +250,7 @@ var SVGRenderer3D;
         return elem3d;
     }
     /**
-     * generelized, so now use simply
+     * generalized, so now use simply
      * @private
      */
     function cuboid(shapeArgs) {
@@ -360,7 +361,7 @@ var SVGRenderer3D;
         mapPath = (i) => (pArr[i]), 
         /**
          * First value - path with specific face
-         * Second  value - added info about side for later calculations.
+         * Second value - added info about side for later calculations.
          *                 Possible second values are 0 for path1, 1 for
          *                 path2 and -1 for no path chosen.
          * Third value - string containing information about current side of
@@ -737,7 +738,7 @@ var SVGRenderer3D;
             out.push([
                 'L', cx + (rx * Math.cos(end)), cy + (ry * Math.sin(end))
             ]);
-            // Go back to the artifical end2
+            // Go back to the artificial end2
             out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
         }
         out.push([

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

@@ -21,7 +21,7 @@ function arc(cx, cy, w, h, options) {
     if (options) {
         const start = options.start || 0, rx = pick(options.r, w), ry = pick(options.r, h || w), proximity = 0.001, fullCircle = (Math.abs((options.end || 0) - start - 2 * Math.PI) <
             proximity), 
-        // Substract a small number to prevent cos and sin of start
+        // Subtract a small number to prevent cos and sin of start
         // and end from becoming equal on 360 arcs (related: #1561)
         end = (options.end || 0) - proximity, innerRadius = options.innerR, open = pick(options.open, fullCircle), cosStart = Math.cos(start), sinStart = Math.sin(start), cosEnd = Math.cos(end), sinEnd = Math.sin(end), 
         // Proximity takes care of rounding errors around PI (#6971)

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

@@ -168,7 +168,7 @@ class TextBuilder {
                     this.truncate(textNode, text, void 0, 0, 
                     // Target width
                     Math.max(0, 
-                    // Substract the font face to make room for the
+                    // Subtract the font face to make room for the
                     // ellipsis itself
                     width - 0.8 * dy), 
                     // Build the text to test for
@@ -333,7 +333,7 @@ class TextBuilder {
      */
     truncate(textNode, text, words, startAt, width, getString) {
         const svgElement = this.svgElement;
-        const { renderer, rotation } = svgElement;
+        const { rotation } = svgElement;
         // Cache the lengths to avoid checking the same twice
         const lengths = [];
         // Word wrap cannot be truncated to shorter than one word, ellipsis

package/es-modules/Core/Responsive.js

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import H from './Globals.js';
-const { composed } = H;
 import U from './Utilities.js';
-const { diffObjects, extend, find, merge, pick, pushUnique, uniqueKey } = U;
+const { diffObjects, extend, find, merge, pick, uniqueKey } = U;
 /* *
  *
  *  Composition
@@ -33,8 +31,9 @@ var Responsive;
      * @private
      */
     function compose(ChartClass) {
-        if (pushUnique(composed, compose)) {
-            extend(ChartClass.prototype, {
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.matchResponsiveRule) {
+            extend(chartProto, {
                 matchResponsiveRule,
                 setResponsive
             });
@@ -186,7 +185,7 @@ export default Responsive;
  * [xAxis](#xAxis), [yAxis](#yAxis) or [series](#series). For these
  * collections, an `id` option is used to map the new option set to
  * an existing object. If an existing object of the same id is not found,
- * the item of the same indexupdated. So for example, setting `chartOptions`
+ * the item of the same index updated. So for example, setting `chartOptions`
  * with two series items without an `id`, will cause the existing chart's
  * two series to be updated with respective options.
  *

package/es-modules/Core/Series/DataLabel.js

@@ -12,10 +12,8 @@ import A from '../Animation/AnimationUtilities.js';
 const { getDeferredAnimation } = A;
 import F from '../Templating.js';
 const { format } = F;
-import H from '../Globals.js';
-const { composed } = H;
 import U from '../Utilities.js';
-const { defined, extend, fireEvent, isArray, isString, merge, objectEach, pick, pInt, pushUnique, splat } = U;
+const { defined, extend, fireEvent, isArray, isString, merge, objectEach, pick, pInt, splat } = U;
 /* *
  *
  *  Composition
@@ -48,7 +46,7 @@ var DataLabel;
      * @private
      */
     function alignDataLabel(point, dataLabel, options, alignTo, isNew) {
-        const series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = point.plotX, plotY = point.plotY, rotation = options.rotation, align = options.align, isInsidePlot = defined(plotX) &&
+        const series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = point.plotX, plotY = point.plotY, rotation = options.rotation || 0, isInsidePlot = defined(plotX) &&
             defined(plotY) &&
             chart.isInsidePlot(plotX, Math.round(plotY), {
                 inverted,
@@ -58,12 +56,10 @@ var DataLabel;
             if (enabledDataSorting && series.xAxis && !justify) {
                 series.setDataLabelStartPos(point, dataLabel, isNew, isInsidePlot, alignOptions);
             }
-        };
-        let baseline, rotCorr, // rotation correction
+        }, justify = rotation === 0 ? pick(options.overflow, (enabledDataSorting ? 'none' : 'justify')) === 'justify' : false;
         // Math.round for rounding errors (#2683), alignTo to allow column
         // labels (#2700)
-        alignAttr, // the final position;
-        justify = pick(options.overflow, (enabledDataSorting ? 'none' : 'justify')) === 'justify', visible = this.visible &&
+        let visible = this.visible &&
             point.visible !== false &&
             defined(plotX) &&
             (point.series.forceDL ||
@@ -85,92 +81,82 @@ var DataLabel;
                     })));
         const pos = point.pos();
         if (visible && pos) {
-            if (rotation) {
-                dataLabel.attr({ align });
-            }
-            let bBox = dataLabel.getBBox(true), bBoxCorrection = [0, 0];
-            baseline = chart.renderer.fontMetrics(dataLabel).b;
+            const bBox = dataLabel.getBBox(), unrotatedbBox = dataLabel.getBBox(void 0, 0), alignFactor = {
+                'right': 1,
+                'center': 0.5
+            }[options.align || 0] || 0, verticalAlignFactor = {
+                'bottom': 1,
+                'middle': 0.5
+            }[options.verticalAlign || 0] || 0;
             // The alignment box is a singular point
             alignTo = extend({
                 x: pos[0],
                 y: Math.round(pos[1]),
                 width: 0,
                 height: 0
-            }, alignTo);
+            }, alignTo || {});
             // Add the text size for alignment calculation
             extend(options, {
                 width: bBox.width,
                 height: bBox.height
             });
-            // Allow a hook for changing alignment in the last moment, then do
-            // the alignment
-            if (rotation) {
-                justify = false; // Not supported for rotated text
-                rotCorr = chart.renderer.rotCorr(baseline, rotation); // #3723
-                alignAttr = {
-                    x: (alignTo.x +
-                        (options.x || 0) +
-                        alignTo.width / 2 +
-                        rotCorr.x),
-                    y: (alignTo.y +
-                        (options.y || 0) +
-                        { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
-                            alignTo.height)
-                };
-                bBoxCorrection = [
-                    bBox.x - Number(dataLabel.attr('x')),
-                    bBox.y - Number(dataLabel.attr('y'))
-                ];
-                setStartPos(alignAttr); // data sorting
-                dataLabel[isNew ? 'attr' : 'animate'](alignAttr);
-            }
-            else {
-                setStartPos(alignTo); // data sorting
-                dataLabel.align(options, void 0, alignTo);
-                alignAttr = dataLabel.alignAttr;
-            }
-            // Handle justify or crop
+            setStartPos(alignTo); // Data sorting
+            // Align the label to the adjusted box with for unrotated bBox due
+            // to rotationOrigin, which is based on unrotated label
+            dataLabel.align(merge(options, {
+                width: unrotatedbBox.width,
+                height: unrotatedbBox.height
+            }), false, alignTo, false);
+            dataLabel.alignAttr.x += alignFactor *
+                (unrotatedbBox.width - bBox.width);
+            dataLabel.alignAttr.y += verticalAlignFactor *
+                (unrotatedbBox.height - bBox.height);
+            dataLabel[dataLabel.placed ? 'animate' : 'attr']({
+                x: dataLabel.alignAttr.x +
+                    (bBox.width - unrotatedbBox.width) / 2,
+                y: dataLabel.alignAttr.y +
+                    (bBox.height - unrotatedbBox.height) / 2,
+                rotationOriginX: (dataLabel.width || 0) / 2,
+                rotationOriginY: (dataLabel.height || 0) / 2
+            });
+            // Uncomment this block to visualize the bounding boxes used for
+            // determining visibility
+            // chart.renderer.rect(
+            //     (dataLabel.alignAttr.x || 0) + chart.plotLeft,
+            //     (dataLabel.alignAttr.y || 0) + chart.plotTop,
+            //     bBox.width,
+            //     bBox.height
+            // ).attr({
+            //     stroke: 'rgba(0, 0, 0, 0.3)',
+            //     'stroke-width': 1,
+            //     zIndex: 20
+            // }).add();
+            // chart.renderer.circle(
+            //     chart.plotLeft + pick(dataLabel.alignAttr.x, 0),
+            //     chart.plotTop + pick(dataLabel.alignAttr.y, 0),
+            //     2
+            // ).attr({
+            //     fill: 'red',
+            //     zIndex: 20
+            // }).add();
             if (justify && alignTo.height >= 0) { // #8830
-                this.justifyDataLabel(dataLabel, options, alignAttr, bBox, alignTo, isNew);
-                // Now check that the data label is within the plot area
+                this.justifyDataLabel(dataLabel, options, dataLabel.alignAttr, bBox, alignTo, isNew);
             }
             else if (pick(options.crop, true)) {
-                let { x, y } = alignAttr;
-                x += bBoxCorrection[0];
-                y += bBoxCorrection[1];
-                // Uncomment this block to visualize the bounding boxes used for
-                // determining visibility
-                /*
-                chart.renderer.rect(
-                    chart.plotLeft + alignAttr.x + bBox.x,
-                    chart.plotTop + alignAttr.y + bBox.y + 9999,
-                    bBox.width,
-                    bBox.height
-                ).attr({
-                    stroke: 'rgba(0, 0, 0, 0.3)',
-                    'stroke-width': 0.5
-                }).add();
-                chart.renderer.circle(
-                    chart.plotLeft + alignAttr.x,
-                    chart.plotTop + alignAttr.y,
-                    2
-                ).attr({
-                    fill: 'red',
-                    zIndex: 20
-                }).add();
-                // */
+                const { x, y } = dataLabel.alignAttr, correction = 1;
+                // Check if the dataLabel should be visible.
                 visible =
                     chart.isInsidePlot(x, y, {
                         paneCoordinates: true,
                         series
                     }) &&
-                        chart.isInsidePlot(x + bBox.width, y + bBox.height, {
+                        chart.isInsidePlot(x + bBox.width - correction, y + bBox.height - correction, {
                             paneCoordinates: true,
                             series
                         });
             }
             // When we're using a shape, make it possible with a connector or an
-            // arrow pointing to thie point
+            // arrow pointing to this point
             if (options.shape && !rotation) {
                 dataLabel[isNew ? 'attr' : 'animate']({
                     anchorX: pos[0],
@@ -185,10 +171,11 @@ var DataLabel;
         // Show or hide based on the final aligned position
         if (!visible && (!enabledDataSorting || justify)) {
             dataLabel.hide();
-            dataLabel.placed = false; // don't animate back in
+            dataLabel.placed = false; // Don't animate back in
         }
         else {
             dataLabel.show();
+            dataLabel.placed = true; // Flag for overlapping logic
         }
     }
     /**
@@ -217,10 +204,10 @@ var DataLabel;
      * @private
      */
     function compose(SeriesClass) {
-        if (pushUnique(composed, compose)) {
-            const seriesProto = SeriesClass.prototype;
-            seriesProto.initDataLabelsGroup = initDataLabelsGroup;
+        const seriesProto = SeriesClass.prototype;
+        if (!seriesProto.initDataLabels) {
             seriesProto.initDataLabels = initDataLabels;
+            seriesProto.initDataLabelsGroup = initDataLabelsGroup;
             seriesProto.alignDataLabel = alignDataLabel;
             seriesProto.drawDataLabels = drawDataLabels;
             seriesProto.justifyDataLabel = justifyDataLabel;
@@ -289,7 +276,7 @@ var DataLabel;
                 pointOptions.forEach((labelOptions, i) => {
                     // Options for one datalabel
                     const labelEnabled = (labelOptions.enabled &&
-                        point.visible &&
+                        (point.visible || point.dataLabelOnHidden) &&
                         // #2282, #4641, #7112, #10049
                         (!point.isNull || point.dataLabelOnNull) &&
                         applyFilter(point, labelOptions)), { backgroundColor, borderColor, distance, style = {} } = labelOptions;
@@ -373,21 +360,14 @@ var DataLabel;
                     if (labelEnabled && defined(labelText)) {
                         if (!dataLabel) {
                             // Create new label element
-                            dataLabel = rotation ?
-                                // Labels don't rotate, use text element
-                                renderer.text(labelText, 0, 0, labelOptions.useHTML)
-                                    .addClass('highcharts-data-label') :
-                                // We can use label
-                                renderer.label(labelText, 0, 0, labelOptions.shape, void 0, void 0, labelOptions.useHTML, void 0, 'data-label');
-                            if (dataLabel) {
-                                dataLabel.addClass(' highcharts-data-label-color-' +
-                                    point.colorIndex +
-                                    ' ' + (labelOptions.className || '') +
-                                    ( // #3398
-                                    labelOptions.useHTML ?
-                                        ' highcharts-tracker' :
-                                        ''));
-                            }
+                            dataLabel = renderer.label(labelText, 0, 0, labelOptions.shape, void 0, void 0, labelOptions.useHTML, void 0, 'data-label');
+                            dataLabel.addClass(' highcharts-data-label-color-' +
+                                point.colorIndex +
+                                ' ' + (labelOptions.className || '') +
+                                ( // #3398
+                                labelOptions.useHTML ?
+                                    ' highcharts-tracker' :
+                                    ''));
                         }
                         else {
                             // Use old element and just update text

package/es-modules/Core/Series/DataSeriesComposition.js

@@ -94,7 +94,7 @@ class DataSeriesAdditions {
      * @private
      */
     static compose(SeriesClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'Core.DataSeries')) {
             const seriesProto = SeriesClass.prototype;
             addEvent(SeriesClass, 'init', function () {
                 this.datas = new DataSeriesAdditions(this);

package/es-modules/Core/Series/DataSeriesConverter.js

@@ -60,7 +60,7 @@ class DataSeriesConverter {
      * The id of the series.
      *
      * @return {Array<PointOptions>}
-     * Returns an array of series points opitons.
+     * Returns an array of series points options.
      */
     getSeriesData(seriesId) {
         const converter = this, table = converter.table, seriesData = [];
@@ -91,7 +91,7 @@ class DataSeriesConverter {
      * Get all series data stored in the converter.
      *
      * @return {Array<SeriesOptions>}
-     * Returns an array of series opitons.
+     * Returns an array of series options.
      */
     getAllSeriesData() {
         const converter = this, seriesOptions = [];