@ntlab/ntjs-assets 2.0.21 → 2.0.22

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

@@ -14,7 +14,7 @@ import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 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, replaceNested, syncTimeout, uniqueKey } = U;
+const { addEvent, attr, createElement, crisp, css, defined, erase, extend, fireEvent, isArray, isFunction, isObject, isString, merge, objectEach, pick, pInt, pushUnique, replaceNested, syncTimeout, uniqueKey } = U;
 /* *
  *
  *  Class
@@ -200,7 +200,7 @@ class SVGElement {
      * @param {boolean} [alignByTranslate]
      *        Align element by translation.
      *
-     * @param {string|Highcharts.BBoxObject} [box]
+     * @param {string|Highcharts.BBoxObject} [alignTo]
      *        The box to align to, needs a width and height. When the box is a
      *        string, it refers to an object in the Renderer. For example, when
      *        box is `spacingBox`, it refers to `Renderer.spacingBox` which
@@ -212,34 +212,39 @@ class SVGElement {
      *
      * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
      */
-    align(alignOptions, alignByTranslate, box, redraw = true) {
-        const attribs = {}, renderer = this.renderer, alignedObjects = renderer.alignedObjects;
-        let x, y, alignTo, alignFactor, vAlignFactor;
+    align(alignOptions, alignByTranslate, alignTo, redraw = true) {
+        const attribs = {}, renderer = this.renderer, alignedObjects = renderer.alignedObjects, initialAlignment = Boolean(alignOptions);
+        let x, y, alignFactor, vAlignFactor;
         // First call on instanciate
         if (alignOptions) {
             this.alignOptions = alignOptions;
             this.alignByTranslate = alignByTranslate;
-            if (!box || isString(box)) {
-                this.alignTo = alignTo = box || 'renderer';
-                // Prevent duplicates, like legendGroup after resize
-                erase(alignedObjects, this);
-                alignedObjects.push(this);
-                box = void 0; // Reassign it below
-            }
+            this.alignTo = alignTo;
             // When called on resize, no arguments are supplied
         }
         else {
-            alignOptions = this.alignOptions;
+            alignOptions = this.alignOptions || {};
             alignByTranslate = this.alignByTranslate;
             alignTo = this.alignTo;
         }
-        box = pick(box, renderer[alignTo], renderer);
+        const alignToKey = !alignTo || isString(alignTo) ?
+            alignTo || 'renderer' :
+            void 0;
+        // When aligned to a key, automatically re-align on redraws
+        if (alignToKey) {
+            // Prevent duplicates, like legendGroup after resize
+            if (initialAlignment) {
+                pushUnique(alignedObjects, this);
+            }
+            alignTo = void 0; // Do not use the box
+        }
+        const alignToBox = pick(alignTo, renderer[alignToKey], renderer);
         // Assign variables
         const align = alignOptions.align, vAlign = alignOptions.verticalAlign;
         // Default: left align
-        x = (box.x || 0) + (alignOptions.x || 0);
+        x = (alignToBox.x || 0) + (alignOptions.x || 0);
         // Default: top align
-        y = (box.y || 0) + (alignOptions.y || 0);
+        y = (alignToBox.y || 0) + (alignOptions.y || 0);
         // Align
         if (align === 'right') {
             alignFactor = 1;
@@ -248,7 +253,7 @@ class SVGElement {
             alignFactor = 2;
         }
         if (alignFactor) {
-            x += (box.width - (alignOptions.width || 0)) /
+            x += ((alignToBox.width || 0) - (alignOptions.width || 0)) /
                 alignFactor;
         }
         attribs[alignByTranslate ? 'translateX' : 'x'] = Math.round(x);
@@ -260,7 +265,7 @@ class SVGElement {
             vAlignFactor = 2;
         }
         if (vAlignFactor) {
-            y += (box.height - (alignOptions.height || 0)) /
+            y += ((alignToBox.height || 0) - (alignOptions.height || 0)) /
                 vAlignFactor;
         }
         attribs[alignByTranslate ? 'translateY' : 'y'] = Math.round(y);
@@ -480,7 +485,7 @@ class SVGElement {
     *         used as a getter, the current value of the attribute is returned.
     */
     attr(hash, val, complete, continueAnimation) {
-        const element = this.element, symbolCustomAttribs = SVGElement.symbolCustomAttribs;
+        const { element } = this, symbolCustomAttribs = SVGElement.symbolCustomAttribs;
         let key, hasSetSymbolSize, ret = this, skipAttr, setter;
         // Single key-value pair
         if (typeof hash === 'string' && typeof val !== 'undefined') {
@@ -570,15 +575,17 @@ class SVGElement {
      * The modified rectangle arguments.
      */
     crisp(rect, strokeWidth) {
-        const wrapper = this;
-        strokeWidth = strokeWidth || rect.strokeWidth || 0;
         // Math.round because strokeWidth can sometimes have roundoff errors
-        const normalizer = Math.round(strokeWidth) % 2 / 2;
-        // Normalize for crisp edges
-        rect.x = Math.floor(rect.x || wrapper.x || 0) + normalizer;
-        rect.y = Math.floor(rect.y || wrapper.y || 0) + normalizer;
-        rect.width = Math.floor((rect.width || wrapper.width || 0) - 2 * normalizer);
-        rect.height = Math.floor((rect.height || wrapper.height || 0) - 2 * normalizer);
+        strokeWidth = Math.round(strokeWidth || rect.strokeWidth || 0);
+        const x1 = rect.x || this.x || 0, y1 = rect.y || this.y || 0, x2 = (rect.width || this.width || 0) + x1, y2 = (rect.height || this.height || 0) + y1, 
+        // Find all the rounded coordinates for corners
+        x = crisp(x1, strokeWidth), y = crisp(y1, strokeWidth), x2Crisp = crisp(x2, strokeWidth), y2Crisp = crisp(y2, strokeWidth);
+        extend(rect, {
+            x,
+            y,
+            width: x2Crisp - x,
+            height: y2Crisp - y
+        });
         if (defined(rect.strokeWidth)) {
             rect.strokeWidth = strokeWidth;
         }
@@ -853,7 +860,7 @@ class SVGElement {
             parentToClean = grandParent;
         }
         // Remove from alignObjects
-        if (wrapper.alignTo) {
+        if (wrapper.alignOptions) {
             erase(renderer.alignedObjects, wrapper);
         }
         objectEach(wrapper, function (val, key) {
@@ -1228,6 +1235,20 @@ class SVGElement {
         this.opacity = opacity;
         element.setAttribute(key, opacity);
     }
+    /**
+     * Re-align an aligned text or label after setting the text.
+     *
+     * @private
+     * @function Highcharts.SVGElement#reAlign
+     *
+     */
+    reAlign() {
+        if (this.alignOptions?.width && this.alignOptions.align !== 'left') {
+            this.alignOptions.width = this.getBBox().width;
+            this.placed = false; // Block animation
+            this.align();
+        }
+    }
     /**
      * Remove a class name from the element.
      *
@@ -1527,6 +1548,7 @@ class SVGElement {
             if (this.added) {
                 this.renderer.buildText(this);
             }
+            this.reAlign();
         }
     }
     /**

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

@@ -176,9 +176,11 @@ class SVGLabel extends SVGElement {
         return bBox;
     }
     getCrispAdjust() {
-        return this.renderer.styledMode && this.box ?
-            this.box.strokeWidth() % 2 / 2 :
-            (this['stroke-width'] ? parseInt(this['stroke-width'], 10) : 0) % 2 / 2;
+        return (this.renderer.styledMode && this.box ?
+            this.box.strokeWidth() :
+            (this['stroke-width'] ?
+                parseInt(this['stroke-width'], 10) :
+                0)) % 2 / 2;
     }
     heightSetter(value) {
         this.heightSetting = value;
@@ -236,6 +238,7 @@ class SVGLabel extends SVGElement {
             this.text.attr({ text });
         }
         this.updateTextPadding();
+        this.reAlign();
     }
     /*
      * This function runs after the label is added to the DOM (when the bounding

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

@@ -9,6 +9,8 @@
  * */
 'use strict';
 import AST from '../HTML/AST.js';
+import D from '../../Defaults.js';
+const { defaultOptions } = D;
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 const { charts, deg2rad, doc, isFirefox, isMS, isWebKit, noop, SVG_NS, symbolSizes, win } = H;
@@ -18,7 +20,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, replaceNested, uniqueKey } = U;
+const { addEvent, attr, createElement, crisp, css, defined, destroyObjectProperties, extend, isArray, isNumber, isObject, isString, merge, pick, pInt, replaceNested, uniqueKey } = U;
 /* *
  *
  *  Variables
@@ -500,7 +502,9 @@ class SVGRenderer {
         return 1.05 / (l + 0.05) > (l + 0.05) / 0.05 ? '#FFFFFF' : '#000000';
     }
     /**
-     * Create a button with preset states.
+     * Create a button with preset states. Styles for the button can either be
+     * set as arguments, or a general theme for all buttons can be set by the
+     * `global.buttonTheme` option.
      *
      * @function Highcharts.SVGRenderer#button
      *
@@ -538,56 +542,31 @@ class SVGRenderer {
      * The button element.
      */
     button(text, x, y, callback, theme = {}, hoverState, selectState, disabledState, shape, useHTML) {
-        const label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode, states = theme.states || {};
+        const label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode, args = arguments;
         let curState = 0;
-        theme = merge(theme);
+        theme = merge(defaultOptions.global.buttonTheme, theme);
+        // @todo Consider moving this to a lower level, like .attr
+        if (styledMode) {
+            delete theme.fill;
+            delete theme.stroke;
+            delete theme['stroke-width'];
+        }
+        const states = theme.states || {}, normalStyle = theme.style || {};
         delete theme.states;
-        const normalStyle = merge({
-            color: "#333333" /* Palette.neutralColor80 */,
-            cursor: 'pointer',
-            fontSize: '0.8em',
-            fontWeight: 'normal'
-        }, theme.style);
         delete theme.style;
-        // Remove stylable attributes. Pass in the ButtonThemeObject and get the
-        // SVGAttributes subset back.
-        let normalState = AST.filterUserAttributes(theme);
-        // Default, non-stylable attributes
-        label.attr(merge({ padding: 8, r: 2 }, normalState));
-        // Presentational. The string type is a mistake, it is just for
-        // compliance with SVGAttribute and is not used in button theme.
-        let hoverStyle, selectStyle, disabledStyle;
+        // Presentational
+        const stateAttribs = [
+            AST.filterUserAttributes(theme)
+        ], 
+        // The string type is a mistake, it is just for compliance with
+        // SVGAttribute and is not used in button theme.
+        stateStyles = [normalStyle];
         if (!styledMode) {
-            // Normal state - prepare the attributes
-            normalState = merge({
-                fill: "#f7f7f7" /* Palette.neutralColor3 */,
-                stroke: "#cccccc" /* Palette.neutralColor20 */,
-                'stroke-width': 1
-            }, normalState);
-            // Hover state
-            hoverState = merge(normalState, {
-                fill: "#e6e6e6" /* Palette.neutralColor10 */
-            }, AST.filterUserAttributes(hoverState || states.hover || {}));
-            hoverStyle = hoverState.style;
-            delete hoverState.style;
-            // Pressed state
-            selectState = merge(normalState, {
-                fill: "#e6e9ff" /* Palette.highlightColor10 */,
-                style: {
-                    color: "#000000" /* Palette.neutralColor100 */,
-                    fontWeight: 'bold'
-                }
-            }, AST.filterUserAttributes(selectState || states.select || {}));
-            selectStyle = selectState.style;
-            delete selectState.style;
-            // Disabled state
-            disabledState = merge(normalState, {
-                style: {
-                    color: "#cccccc" /* Palette.neutralColor20 */
-                }
-            }, AST.filterUserAttributes(disabledState || states.disabled || {}));
-            disabledStyle = disabledState.style;
-            delete disabledState.style;
+            ['hover', 'select', 'disabled'].forEach((stateName, i) => {
+                stateAttribs.push(merge(stateAttribs[0], AST.filterUserAttributes(args[i + 5] || states[stateName] || {})));
+                stateStyles.push(stateAttribs[i + 1].style);
+                delete stateAttribs[i + 1].style;
+            });
         }
         // Add the events. IE9 and IE10 need mouseover and mouseout to function
         // (#667).
@@ -601,7 +580,7 @@ class SVGRenderer {
                 label.setState(curState);
             }
         });
-        label.setState = function (state) {
+        label.setState = (state = 0) => {
             // Hover state is temporary, don't record it
             if (state !== 1) {
                 label.state = curState = state;
@@ -610,31 +589,19 @@ class SVGRenderer {
             label
                 .removeClass(/highcharts-button-(normal|hover|pressed|disabled)/)
                 .addClass('highcharts-button-' +
-                ['normal', 'hover', 'pressed', 'disabled'][state || 0]);
+                ['normal', 'hover', 'pressed', 'disabled'][state]);
             if (!styledMode) {
-                label
-                    .attr([
-                    normalState,
-                    hoverState,
-                    selectState,
-                    disabledState
-                ][state || 0]);
-                const css = [
-                    normalStyle,
-                    hoverStyle,
-                    selectStyle,
-                    disabledStyle
-                ][state || 0];
+                label.attr(stateAttribs[state]);
+                const css = stateStyles[state];
                 if (isObject(css)) {
                     label.css(css);
                 }
             }
         };
+        label.attr(stateAttribs[0]);
         // Presentational attributes
         if (!styledMode) {
-            label
-                .attr(normalState)
-                .css(extend({ cursor: 'default' }, normalStyle));
+            label.css(extend({ cursor: 'default' }, normalStyle));
             // HTML labels don't need to handle pointer events because click and
             // mouseenter/mouseleave is bound to the underlying <g> element.
             // Should this be reconsidered, we need more complex logic to share
@@ -664,26 +631,17 @@ class SVGRenderer {
      * @param {number} width
      *        The width of the line.
      *
-     * @param {string} [roundingFunction=round]
-     *        The rounding function name on the `Math` object, can be one of
-     *        `round`, `floor` or `ceil`.
-     *
      * @return {Highcharts.SVGPathArray}
      *         The original points array, but modified to render crisply.
      */
-    crispLine(points, width, roundingFunction = 'round') {
-        const start = points[0];
-        const end = points[1];
+    crispLine(points, width) {
+        const [start, end] = points;
         // Normalize to a crisp line
         if (defined(start[1]) && start[1] === end[1]) {
-            // Subtract due to #1129. Now bottom and left axis gridlines behave
-            // the same.
-            start[1] = end[1] =
-                Math[roundingFunction](start[1]) - (width % 2 / 2);
+            start[1] = end[1] = crisp(start[1], width);
         }
         if (defined(start[2]) && start[2] === end[2]) {
-            start[2] = end[2] =
-                Math[roundingFunction](start[2]) + (width % 2 / 2);
+            start[2] = end[2] = crisp(start[2], width);
         }
         return points;
     }
@@ -1082,7 +1040,7 @@ class SVGRenderer {
         if (symbolFn) {
             // Check if there's a path defined for this symbol
             if (typeof x === 'number') {
-                path = symbolFn.call(this.symbols, Math.round(x || 0), Math.round(y || 0), width || 0, height || 0, options);
+                path = symbolFn.call(this.symbols, x || 0, y || 0, width || 0, height || 0, options);
             }
             obj = this.path(path);
             if (!ren.styledMode) {

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

@@ -22,11 +22,15 @@ const { defined, isNumber, pick } = U;
 function arc(cx, cy, w, h, options) {
     const arc = [];
     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), 
-        // 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), 
+        const start = options.start || 0, rx = pick(options.r, w), ry = pick(options.r, h || w), 
+        // Subtract a small number to prevent cos and sin of start and end
+        // from becoming equal on 360 arcs (#1561). The size of the circle
+        // affects the constant, therefore the division by `rx`. If the
+        // proximity is too small, the arc disappears. If it is too great, a
+        // gap appears. This can be seen in the animation of the official
+        // bubble demo (#20586).
+        proximity = 0.0002 / Math.max(rx, 1), fullCircle = (Math.abs((options.end || 0) - start - 2 * Math.PI) <
+            proximity), 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)
         longArc = pick(options.longArc, end - start - Math.PI < proximity ? 0 : 1);
         let arcSegment = [

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

@@ -46,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 || 0, isInsidePlot = defined(plotX) &&
+        const series = this, { chart, enabledDataSorting } = this, inverted = this.isCartesian && chart.inverted, plotX = point.plotX, plotY = point.plotY, rotation = options.rotation || 0, isInsidePlot = defined(plotX) &&
             defined(plotY) &&
             chart.isInsidePlot(plotX, Math.round(plotY), {
                 inverted,
@@ -66,10 +66,10 @@ var DataLabel;
                 (enabledDataSorting && !justify) ||
                 isInsidePlot ||
                 (
-                // If the data label is inside the align box, it is
-                // enough that parts of the align box is inside the
-                // plot area (#12370). When stacking, it is always
-                // inside regardless of the option (#15148).
+                // If the data label is inside the align box, it is enough
+                // that parts of the align box is inside the plot area
+                // (#12370). When stacking, it is always inside regardless
+                // of the option (#15148).
                 pick(options.inside, !!this.options.stacking) &&
                     alignTo &&
                     chart.isInsidePlot(plotX, inverted ?
@@ -95,6 +95,11 @@ var DataLabel;
                 width: 0,
                 height: 0
             }, alignTo || {});
+            // Align to plot edges
+            if (options.alignTo === 'plotEdges' && series.isCartesian) {
+                alignTo[inverted ? 'x' : 'y'] = 0;
+                alignTo[inverted ? 'width' : 'height'] = this.yAxis?.len || 0;
+            }
             // Add the text size for alignment calculation
             extend(options, {
                 width: bBox.width,
@@ -432,10 +437,12 @@ var DataLabel;
      * @private
      */
     function justifyDataLabel(dataLabel, options, alignAttr, bBox, alignTo, isNew) {
-        const chart = this.chart, align = options.align, verticalAlign = options.verticalAlign, padding = dataLabel.box ? 0 : (dataLabel.padding || 0);
+        const chart = this.chart, align = options.align, verticalAlign = options.verticalAlign, padding = dataLabel.box ? 0 : (dataLabel.padding || 0), horizontalAxis = chart.inverted ? this.yAxis : this.xAxis, horizontalAxisShift = horizontalAxis ?
+            horizontalAxis.left - chart.plotLeft : 0, verticalAxis = chart.inverted ? this.xAxis : this.yAxis, verticalAxisShift = verticalAxis ?
+            verticalAxis.top - chart.plotTop : 0;
         let { x = 0, y = 0 } = options, off, justified;
         // Off left
-        off = (alignAttr.x || 0) + padding;
+        off = (alignAttr.x || 0) + padding + horizontalAxisShift;
         if (off < 0) {
             if (align === 'right' && x >= 0) {
                 options.align = 'left';
@@ -447,7 +454,7 @@ var DataLabel;
             justified = true;
         }
         // Off right
-        off = (alignAttr.x || 0) + bBox.width - padding;
+        off = (alignAttr.x || 0) + bBox.width - padding + horizontalAxisShift;
         if (off > chart.plotWidth) {
             if (align === 'left' && x <= 0) {
                 options.align = 'right';
@@ -459,7 +466,7 @@ var DataLabel;
             justified = true;
         }
         // Off top
-        off = alignAttr.y + padding;
+        off = alignAttr.y + padding + verticalAxisShift;
         if (off < 0) {
             if (verticalAlign === 'bottom' && y >= 0) {
                 options.verticalAlign = 'top';
@@ -471,7 +478,7 @@ var DataLabel;
             justified = true;
         }
         // Off bottom
-        off = (alignAttr.y || 0) + bBox.height - padding;
+        off = (alignAttr.y || 0) + bBox.height - padding + verticalAxisShift;
         if (off > chart.plotHeight) {
             if (verticalAlign === 'top' && y <= 0) {
                 options.verticalAlign = 'bottom';

package/assets/js/highcharts/es-modules/Core/Series/Point.js

@@ -16,7 +16,7 @@ const { defaultOptions } = D;
 import F from '../Templating.js';
 const { format } = F;
 import U from '../Utilities.js';
-const { addEvent, erase, extend, fireEvent, getNestedProperty, isArray, isFunction, isNumber, isObject, merge, pick, syncTimeout, removeEvent, uniqueKey } = U;
+const { addEvent, crisp, erase, extend, fireEvent, getNestedProperty, isArray, isFunction, isNumber, isObject, merge, pick, syncTimeout, removeEvent, uniqueKey } = U;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /* *
  *
@@ -1124,7 +1124,8 @@ class Point {
                 }, AST.filterUserAttributes(haloOptions.attributes || {})));
             }
         }
-        else if (halo && halo.point && halo.point.haloPath) {
+        else if (halo?.point?.haloPath &&
+            !halo.point.destroyed) {
             // Animate back to 0 on the current halo point (#6055)
             halo.animate({ d: halo.point.haloPath(0) }, null, 
             // Hide after unhovering. The `complete` callback runs in the
@@ -1147,7 +1148,7 @@ class Point {
      */
     haloPath(size) {
         const pos = this.pos();
-        return pos ? this.series.chart.renderer.symbols.circle(Math.floor(pos[0]) - size, pos[1] - size, size * 2, size * 2) : [];
+        return pos ? this.series.chart.renderer.symbols.circle(crisp(pos[0], 1) - size, pos[1] - size, size * 2, size * 2) : [];
     }
 }
 /* *

package/assets/js/highcharts/es-modules/Core/Series/Series.js

@@ -23,7 +23,7 @@ import SeriesRegistry from './SeriesRegistry.js';
 const { seriesTypes } = SeriesRegistry;
 import SVGElement from '../Renderer/SVG/SVGElement.js';
 import U from '../Utilities.js';
-const { arrayMax, arrayMin, clamp, correctFloat, defined, destroyObjectProperties, diffObjects, erase, error, extend, find, fireEvent, getClosestDistance, getNestedProperty, insertItem, isArray, isNumber, isString, merge, objectEach, pick, removeEvent, splat, syncTimeout } = U;
+const { arrayMax, arrayMin, clamp, correctFloat, crisp, defined, destroyObjectProperties, diffObjects, erase, error, extend, find, fireEvent, getClosestDistance, getNestedProperty, insertItem, isArray, isNumber, isString, merge, objectEach, pick, removeEvent, splat, syncTimeout } = U;
 /* *
  *
  *  Class
@@ -987,10 +987,7 @@ class Series {
      * Force getting extremes of a total series data range.
      */
     getProcessedData(forceExtremesFromAll) {
-        const series = this, xAxis = series.xAxis, options = series.options, cropThreshold = options.cropThreshold, getExtremesFromAll = forceExtremesFromAll ||
-            series.getExtremesFromAll ||
-            options.getExtremesFromAll, // #4599
-        logarithmic = xAxis?.logarithmic, isCartesian = series.isCartesian;
+        const series = this, xAxis = series.xAxis, options = series.options, cropThreshold = options.cropThreshold, logarithmic = xAxis?.logarithmic, isCartesian = series.isCartesian;
         let croppedData, cropped, cropStart = 0, xExtremes, min, max, 
         // Copied during slice operation:
         processedXData = series.xData, processedYData = series.yData, updatingNames = false;
@@ -1005,7 +1002,7 @@ class Series {
         // Optionally filter out points outside the plot area
         if (isCartesian &&
             series.sorted &&
-            !getExtremesFromAll &&
+            !forceExtremesFromAll &&
             (!cropThreshold ||
                 dataLength > cropThreshold ||
                 series.forceCrop)) {
@@ -1246,16 +1243,24 @@ class Series {
      * Force getting extremes of a total series data range.
      */
     getExtremes(yData, forceExtremesFromAll) {
-        const xAxis = this.xAxis, yAxis = this.yAxis, xData = this.processedXData || this.xData, activeYData = [], 
+        const xAxis = this.xAxis, yAxis = this.yAxis, activeYData = [], 
         // Handle X outside the viewed area. This does not work with
         // non-sorted data like scatter (#7639).
         shoulder = this.requireSorting && !this.is('column') ?
             1 : 0, 
         // #2117, need to compensate for log X axis
-        positiveValuesOnly = yAxis ? yAxis.positiveValuesOnly : false;
-        let xExtremes, validValue, withinRange, x, y, i, j, xMin = 0, xMax = 0, activeCounter = 0;
-        yData = yData || this.stackedYData || this.processedYData || [];
-        const yDataLength = yData.length;
+        positiveValuesOnly = yAxis ? yAxis.positiveValuesOnly : false, getExtremesFromAll = forceExtremesFromAll ||
+            this.getExtremesFromAll ||
+            this.options.getExtremesFromAll; // #4599
+        let { processedXData, processedYData } = this, xExtremes, validValue, withinRange, x, y, i, j, xMin = 0, xMax = 0, activeCounter = 0;
+        // Get the processed data from the full range (#21003)
+        if (this.cropped && getExtremesFromAll) {
+            const processedData = this.getProcessedData(true);
+            processedXData = processedData.xData;
+            processedYData = processedData.yData;
+        }
+        yData = yData || this.stackedYData || processedYData || [];
+        const yDataLength = yData.length, xData = processedXData || this.xData;
         if (xAxis) {
             xExtremes = xAxis.getExtremes();
             xMin = xExtremes.min;
@@ -1825,12 +1830,16 @@ class Series {
         }
         const pos = point.pos();
         if (isNumber(radius) && pos) {
-            attribs.x = pos[0] - radius;
-            attribs.y = pos[1] - radius;
             if (seriesOptions.crisp) {
-                // Math.floor for #1843:
-                attribs.x = Math.floor(attribs.x);
+                pos[0] = crisp(pos[0], point.hasImage ?
+                    0 :
+                    symbol === 'rect' ?
+                        // Rectangle symbols need crisp edges, others don't
+                        seriesMarkerOptions?.lineWidth || 0 :
+                        1);
             }
+            attribs.x = pos[0] - radius;
+            attribs.y = pos[1] - radius;
         }
         if (radius) {
             attribs.width = attribs.height = 2 * radius;

package/assets/js/highcharts/es-modules/Core/Series/SeriesDefaults.js

@@ -1447,6 +1447,21 @@ const seriesDefaults = {
          * @type {Highcharts.AlignValue|null}
          */
         align: 'center',
+        /**
+         * Alignment method for data labels. If set to `plotEdges`, the labels
+         * are aligned within the plot area in the direction of the y-axis. So
+         * in a regular column chart, the labels are aligned vertically
+         * according to the `verticalAlign` setting. In a bar chart, which is
+         * inverted, the labels are aligned horizontally according to the
+         * `align` setting. Applies to cartesian series only.
+         *
+         * @sample {highcharts} highcharts/series-bar/datalabels-alignto/
+         *         Align to plot edges
+         *
+         * @type      {string}
+         * @since 11.4.2
+         * @apioption plotOptions.series.dataLabels.alignTo
+         */
         /**
          * Whether to allow data labels to overlap. To make the labels less
          * sensitive for overlapping, the

package/assets/js/highcharts/es-modules/Core/Templating.js

@@ -231,7 +231,7 @@ function format(str = '', ctx, chart) {
             // Block helpers may return true or false. They may also return a
             // string, like the `each` helper.
             if (match.isBlock && typeof replacement === 'boolean') {
-                replacement = format(replacement ? body : elseBody, ctx);
+                replacement = format(replacement ? body : elseBody, ctx, chart);
             }
             // Simple variable replacement
         }
@@ -348,6 +348,9 @@ function numberFormat(number, decimals, decimalPoint, thousandsSep) {
         // Get the decimal component
         ret += decimalPoint + roundedNumber.slice(-decimals);
     }
+    else if (+ret === 0) { // Remove signed minus #20564
+        ret = '0';
+    }
     if (exponent[1] && +ret !== 0) {
         ret += 'e' + exponent[1];
     }