highcharts 11.3.0 → 11.4.0

package/es-modules/Series/Sunburst/SunburstSeriesDefaults.js

@@ -194,9 +194,9 @@ const SunburstSeriesDefaults = {
          * `parallel` and `perpendicular`. When `circular`, the best fit
          * will be computed for the point, so that the label is curved
          * around the center when there is room for it, otherwise
-         * perpendicular. The legacy `auto` option works similiar to
+         * perpendicular. The legacy `auto` option works similar to
          * `circular`, but instead of curving the labels they are tangent to
-         * the perimiter.
+         * the perimeter.
          *
          * The `rotation` option takes precedence over `rotationMode`.
          *
@@ -258,7 +258,7 @@ const SunburstSeriesDefaults = {
          * - `pixels` gives the ring a fixed width in pixels.
          *
          * - `weight` takes the remaining width after percentage and pixels,
-         *   and distributes it accross all "weighted" levels. The value
+         *   and distributes it across all "weighted" levels. The value
          *   relative to the sum of all weights determines the width.
          *
          * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/

package/es-modules/Series/Sunburst/SunburstUtilities.js

@@ -47,7 +47,7 @@ function calculateLevelSizes(levelOptions, params) {
             p.diffRadius : 0;
         // Convert percentage to pixels.
         // Calculate the remaining size to divide between "weight" levels.
-        // Calculate total weight to use in convertion from weight to
+        // Calculate total weight to use in conversion from weight to
         // pixels.
         for (const level of levels) {
             const options = result[level], unit = options.levelSize.unit, value = options.levelSize.value;

package/es-modules/Series/TiledWebMap/TiledWebMapSeries.js

@@ -22,8 +22,8 @@ const { addEvent, defined, error, merge, pick, pushUnique } = U;
  *
  * */
 /** @private */
-function onChartBeforeMapViewInit(e) {
-    const twm = (this.options.series || []).filter((s) => s.type === 'tiledwebmap')[0], { geoBounds } = e;
+function onRecommendMapView(e) {
+    const { geoBounds, chart } = e, twm = (chart.options.series || []).filter((s) => s.type === 'tiledwebmap')[0];
     if (twm && twm.provider && twm.provider.type && !twm.provider.url) {
         const ProviderDefinition = TilesProvidersRegistry[twm.provider.type];
         if (!defined(ProviderDefinition)) {
@@ -32,25 +32,23 @@ function onChartBeforeMapViewInit(e) {
         }
         else {
             const def = new ProviderDefinition(), { initialProjectionName: providerProjectionName } = def;
-            if (this.options.mapView) {
-                if (geoBounds) {
-                    const { x1, y1, x2, y2 } = geoBounds;
-                    this.options.mapView.recommendedMapView = {
-                        projection: {
-                            name: providerProjectionName,
-                            parallels: [y1, y2],
-                            rotation: [-(x1 + x2) / 2]
-                        }
-                    };
-                }
-                else {
-                    this.options.mapView.recommendedMapView = {
-                        projection: {
-                            name: providerProjectionName
-                        },
-                        minZoom: 0
-                    };
-                }
+            if (geoBounds) {
+                const { x1, y1, x2, y2 } = geoBounds;
+                this.recommendedMapView = {
+                    projection: {
+                        name: providerProjectionName,
+                        parallels: [y1, y2],
+                        rotation: [-(x1 + x2) / 2]
+                    }
+                };
+            }
+            else {
+                this.recommendedMapView = {
+                    projection: {
+                        name: providerProjectionName
+                    },
+                    minZoom: 0
+                };
             }
             return false;
         }
@@ -87,9 +85,9 @@ class TiledWebMapSeries extends MapSeries {
      *  Static Functions
      *
      * */
-    static compose(ChartClass) {
-        if (pushUnique(composed, this.compose)) {
-            addEvent(ChartClass, 'beforeMapViewInit', onChartBeforeMapViewInit);
+    static compose(MapViewClass) {
+        if (pushUnique(composed, 'TiledWebMapSeries')) {
+            addEvent(MapViewClass, 'onRecommendMapView', onRecommendMapView);
         }
     }
     /* *
@@ -478,7 +476,7 @@ class TiledWebMapSeries extends MapSeries {
             this.transformGroups = [];
         }
         if (mapView &&
-            !defined(mapView.options.projection) &&
+            !defined(chart.userOptions.mapView?.projection) &&
             provider &&
             provider.type) {
             const ProviderDefinition = TilesProvidersRegistry[provider.type];

package/es-modules/Series/Tilemap/TilemapSeries.js

@@ -81,7 +81,7 @@ class TilemapSeries extends HeatmapSeries {
      *
      * */
     static compose(AxisClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'TilemapSeries')) {
             addEvent(AxisClass, 'afterSetAxisTranslation', onAxisAfterSetAxisTranslation);
         }
     }
@@ -168,7 +168,7 @@ extend(TilemapSeries.prototype, {
     getSymbol: noop,
     // Use drawPoints, markerAttribs, pointAttribs methods from the old
     // heatmap implementation.
-    // TODO: Consider standarizing heatmap and tilemap into more
+    // TODO: Consider standardizing heatmap and tilemap into more
     // consistent form.
     markerAttribs: ScatterSeries.prototype.markerAttribs,
     pointAttribs: ColumnSeries.prototype.pointAttribs,

package/es-modules/Series/Timeline/TimelineSeries.js

@@ -176,8 +176,8 @@ class TimelineSeries extends LineSeries {
                     // Initialize the targetPosition field within data label
                     // object. It's necessary because there is need to know
                     // expected position of specific data label, when
-                    // aligning connectors. This field is overrided inside
-                    // of SVGElement.animate() wrapped  method.
+                    // aligning connectors. This field is overridden inside
+                    // of SVGElement.animate() wrapped method.
                     if (!dataLabel.targetPosition) {
                         dataLabel.targetPosition = {};
                     }

package/es-modules/Series/TreeUtilities.js

@@ -12,7 +12,7 @@
 'use strict';
 import Color from '../Core/Color/Color.js';
 import U from '../Core/Utilities.js';
-const { extend, isArray, isNumber, isObject, merge, pick } = U;
+const { extend, isArray, isNumber, isObject, merge, pick, relativeLength } = U;
 /* *
  *
  *  Functions
@@ -177,6 +177,27 @@ function updateRootId(series) {
     }
     return rootId;
 }
+/**
+ * Get the node width, which relies on the plot width and the nodeDistance
+ * option.
+ *
+ * @private
+ */
+function getNodeWidth(series, columnCount) {
+    const { chart, options } = series, { nodeDistance = 0, nodeWidth = 0 } = options, { plotSizeX = 1 } = chart;
+    // Node width auto means they are evenly distributed along the width of
+    // the plot area
+    if (nodeWidth === 'auto') {
+        if (typeof nodeDistance === 'string' && /%$/.test(nodeDistance)) {
+            const fraction = parseFloat(nodeDistance) / 100, total = columnCount + fraction * (columnCount - 1);
+            return plotSizeX / total;
+        }
+        const nDistance = Number(nodeDistance);
+        return ((plotSizeX + nDistance) /
+            (columnCount || 1)) - nDistance;
+    }
+    return relativeLength(nodeWidth, plotSizeX);
+}
 /* *
  *
  *  Default Export
@@ -185,6 +206,7 @@ function updateRootId(series) {
 const TreeUtilities = {
     getColor,
     getLevelOptions,
+    getNodeWidth,
     setTreeValues,
     updateRootId
 };

package/es-modules/Series/Treegraph/TreegraphLayout.js

@@ -32,14 +32,12 @@ class TreegraphLayout {
      * @param {TreegraphNode} child
      *        Child node, which should be connected to dummyNode.
      * @param {number} gapSize
-     *        Remainig gap size.
-     * @param {number} index
-     *        The index of the link.
+     *        Remaining gap size.
      *
      * @return {TreegraphNode}
      *         DummyNode as a parent of nodes, which column changes.
      */
-    static createDummyNode(parent, child, gapSize, index) {
+    static createDummyNode(parent, child, gapSize) {
         // Initialise dummy node.
         const dummyNode = new TreegraphNode();
         dummyNode.id = parent.id + '-' + gapSize;
@@ -93,7 +91,6 @@ class TreegraphLayout {
      */
     beforeLayout(nodes) {
         for (const node of nodes) {
-            let index = 0;
             for (let child of node.children) {
                 // Support for children placed in distant columns.
                 if (child && child.level - node.level > 1) {
@@ -102,16 +99,15 @@ class TreegraphLayout {
                     let gapSize = child.level - node.level - 1;
                     // parent -> dummyNode -> child
                     while (gapSize > 0) {
-                        child = TreegraphLayout.createDummyNode(node, child, gapSize, index);
+                        child = TreegraphLayout.createDummyNode(node, child, gapSize);
                         gapSize--;
                     }
                 }
-                ++index;
             }
         }
     }
     /**
-     * Reset the caluclated values from the previous run.
+     * Reset the calculated values from the previous run.
      * @param {TreegraphNode[]} nodes all of the nodes.
      */
     resetValues(nodes) {
@@ -166,7 +162,7 @@ class TreegraphLayout {
         else {
             // If the node has children, perform the recursive first walk for
             // its children, and then calculate its shift in the apportion
-            // function (most crucial part part of the algorythm).
+            // function (most crucial part of the algorithm).
             let defaultAncestor = node.getLeftMostChild();
             for (const child of node.children) {
                 treeLayout.firstWalk(child);
@@ -231,9 +227,9 @@ class TreegraphLayout {
      * are left(right)Int(Out)node where Int means internal and Out means
      * outernal. For summing up the modifiers along the contour we use the
      * `left(right)Int(Out)mod` variable. Whenever two nodes of the inside
-     * contours are in conflict we comute the left one of the greatest uncommon
+     * contours are in conflict we commute the left one of the greatest uncommon
      * ancestors using the getAncestor function and we call the moveSubtree
-     * method to shift the subtree and prepare the shifts of smaller subrtees.
+     * method to shift the subtree and prepare the shifts of smaller subtrees.
      * Finally we add a new thread (if necessary) and we adjust ancestor of
      * right outernal node or defaultAncestor.
      *

package/es-modules/Series/Treegraph/TreegraphPoint.js

@@ -30,6 +30,7 @@ class TreegraphPoint extends TreemapPoint {
          *
          * */
         super(...arguments);
+        this.dataLabelOnHidden = true;
         this.isLink = false;
         this.setState = Point.prototype.setState;
     }

package/es-modules/Series/Treegraph/TreegraphSeries.js

@@ -17,9 +17,9 @@ const { prototype: { symbols } } = SVGRenderer;
 import TreegraphNode from './TreegraphNode.js';
 import TreegraphPoint from './TreegraphPoint.js';
 import TU from '../TreeUtilities.js';
-const { getLevelOptions } = TU;
+const { getLevelOptions, getNodeWidth } = TU;
 import U from '../../Core/Utilities.js';
-const { extend, merge, pick, relativeLength, splat } = U;
+const { arrayMax, extend, merge, pick, relativeLength, splat } = U;
 import TreegraphLink from './TreegraphLink.js';
 import TreegraphLayout from './TreegraphLayout.js';
 import TreegraphSeriesDefaults from './TreegraphSeriesDefaults.js';
@@ -64,7 +64,7 @@ class TreegraphSeries extends TreemapSeries {
      * @return {LayoutModifiers} `a` and `b` parameter for x and y direction.
      */
     getLayoutModifiers() {
-        const chart = this.chart, series = this, plotSizeX = chart.plotSizeX, plotSizeY = chart.plotSizeY;
+        const chart = this.chart, series = this, plotSizeX = chart.plotSizeX, plotSizeY = chart.plotSizeY, columnCount = arrayMax(this.points.map((p) => p.node.xPosition));
         let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, maxXSize = 0, minXSize = 0, maxYSize = 0, minYSize = 0;
         this.points.forEach((point) => {
             // When fillSpace is on, stop the layout calculation when the hidden
@@ -72,11 +72,11 @@ class TreegraphSeries extends TreemapSeries {
             if (this.options.fillSpace && !point.visible) {
                 return;
             }
-            const node = point.node, level = series.mapOptionsToLevel[point.node.level] || {}, markerOptions = merge(this.options.marker, level.marker, point.options.marker), radius = relativeLength(markerOptions.radius || 0, Math.min(plotSizeX, plotSizeY)), symbol = markerOptions.symbol, nodeSizeY = (symbol === 'circle' || !markerOptions.height) ?
+            const node = point.node, level = series.mapOptionsToLevel[point.node.level] || {}, markerOptions = merge(this.options.marker, level.marker, point.options.marker), nodeWidth = markerOptions.width ?? getNodeWidth(this, columnCount), radius = relativeLength(markerOptions.radius || 0, Math.min(plotSizeX, plotSizeY)), symbol = markerOptions.symbol, nodeSizeY = (symbol === 'circle' || !markerOptions.height) ?
                 radius * 2 :
-                relativeLength(markerOptions.height, plotSizeY), nodeSizeX = symbol === 'circle' || !markerOptions.width ?
+                relativeLength(markerOptions.height, plotSizeY), nodeSizeX = symbol === 'circle' || !nodeWidth ?
                 radius * 2 :
-                relativeLength(markerOptions.width, plotSizeX);
+                relativeLength(nodeWidth, plotSizeX);
             node.nodeSizeX = nodeSizeX;
             node.nodeSizeY = nodeSizeY;
             let lineWidth;
@@ -113,7 +113,7 @@ class TreegraphSeries extends TreemapSeries {
     getLinks() {
         const series = this;
         const links = [];
-        this.data.forEach((point, index) => {
+        this.data.forEach((point) => {
             const levelOptions = series.mapOptionsToLevel[point.node.level || 0] || {};
             if (point.node.parent) {
                 const pointOptions = merge(levelOptions, point.options);
@@ -483,7 +483,7 @@ export default TreegraphSeries;
  * points can be given in the following ways:
  *
  * 1. The array of arrays, with `keys` property, which defines how the fields in
- *     array should be interpretated
+ *     array should be interpreted
  *    ```js
  *       keys: ['id', 'parent'],
  *       data: [

package/es-modules/Series/Treegraph/TreegraphSeriesDefaults.js

@@ -26,7 +26,7 @@
  * @extends      plotOptions.treemap
  * @excluding    layoutAlgorithm, dashStyle, linecap, lineWidth,
  *               negativeColor, threshold, zones, zoneAxis, colorAxis,
- *               colorKey, compare, dataGrouping, endAgle, gapSize, gapUnit,
+ *               colorKey, compare, dataGrouping, endAngle, gapSize, gapUnit,
  *               ignoreHiddenPoint, innerSize, joinBy, legendType, linecap,
  *               minSize, navigatorOptions, pointRange, allowTraversingTree,
  *               alternateStartingDirection, borderRadius, breadcrumbs,
@@ -237,7 +237,44 @@ const TreegraphSeriesDefaults = {
         style: {
             textOverflow: 'none'
         }
-    }
+    },
+    /**
+     * The distance between nodes in a tree graph in the longitudinal direction.
+     * The longitudinal direction means the direction that the chart flows - in
+     * a horizontal chart the distance is horizontal, in an inverted chart
+     * (vertical), the distance is vertical.
+     *
+     * If a number is given, it denotes pixels. If a percentage string is given,
+     * the distance is a percentage of the rendered node width. A `nodeDistance`
+     * of `100%` will render equal widths for the nodes and the gaps between
+     * them.
+     *
+     * This option applies only when the `nodeWidth` option is `auto`, making
+     * the node width respond to the number of columns.
+     *
+     * @since 11.4.0
+     * @sample highcharts/series-treegraph/node-distance
+     *         Node distance of 100% means equal to node width
+     * @type   {number|string}
+     */
+    nodeDistance: 30,
+    /**
+     * The pixel width of each node in a, or the height in case the chart is
+     * inverted. For tree graphs, the node width is only applied if the marker
+     * symbol is `rect`, otherwise the `marker` sizing options apply.
+     *
+     * Can be a number or a percentage string, or `auto`. If `auto`, the nodes
+     * are sized to fill up the plot area in the longitudinal direction,
+     * regardless of the number of levels.
+     *
+     * @since 11.4.0
+     * @see    [treegraph.nodeDistance](#nodeDistance)
+     * @sample highcharts/series-treegraph/node-distance
+     *         Node width is auto and combined with node distance
+     *
+     * @type {number|string}
+     */
+    nodeWidth: void 0
 };
 /* *
  *

package/es-modules/Series/Treemap/TreemapSeries.js

@@ -94,7 +94,7 @@ class TreemapSeries extends ScatterSeries {
      *
      * */
     static compose(SeriesClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'TreemapSeries')) {
             addEvent(SeriesClass, 'afterBindAxes', onSeriesAfterBindAxes);
         }
     }
@@ -591,7 +591,9 @@ class TreemapSeries extends ScatterSeries {
                     chart.breadcrumbs.updateProperties(series.createList(e));
                 }
             }));
-            series.eventsToUnbind.push(addEvent(series, 'update', function (e, redraw) {
+            series.eventsToUnbind.push(addEvent(series, 'update', 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            function (e, redraw) {
                 const breadcrumbs = this.chart.breadcrumbs;
                 if (breadcrumbs && e.options.breadcrumbs) {
                     breadcrumbs.update(e.options.breadcrumbs);

package/es-modules/Series/Treemap/TreemapUtilities.js

@@ -10,13 +10,6 @@
  *
  * */
 'use strict';
-/* *
- *
- *  Imports
- *
- * */
-import U from '../../Core/Utilities.js';
-const { objectEach } = U;
 /* *
  *
  *  Namespace

package/es-modules/Series/Variwide/VariwideComposition.js

@@ -23,7 +23,7 @@ const { addEvent, pushUnique, wrap } = U;
  * @private
  */
 function compose(AxisClass, TickClass) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'Variwide')) {
         const tickProto = TickClass.prototype;
         addEvent(AxisClass, 'afterDrawCrosshair', onAxisAfterDrawCrosshair);
         addEvent(AxisClass, 'afterRender', onAxisAfterRender);
@@ -87,7 +87,11 @@ function tickPostTranslate(xy, xOrY, index) {
 /**
  * @private
  */
-function wrapTickGetLabelPosition(proceed, _x, _y, _label, horiz, _labelOptions, _tickmarkOffset, _index) {
+function wrapTickGetLabelPosition(proceed, _x, _y, _label, horiz, 
+/* eslint-disable @typescript-eslint/no-unused-vars */
+_labelOptions, _tickmarkOffset, _index
+/* eslint-enable @typescript-eslint/no-unused-vars */
+) {
     const args = Array.prototype.slice.call(arguments, 1), xOrY = horiz ? 'x' : 'y';
     // Replace the x with the original x
     if (this.axis.variwide &&

package/es-modules/Series/Variwide/VariwideSeries.js

@@ -127,7 +127,7 @@ class VariwideSeries extends ColumnSeries {
  * */
 VariwideSeries.compose = VariwideComposition.compose;
 VariwideSeries.defaultOptions = merge(ColumnSeries.defaultOptions, VariwideSeriesDefaults);
-// Extend translation by distoring X position based on Z.
+// Extend translation by distorting X position based on Z.
 addEvent(VariwideSeries, 'afterColumnTranslate', function () {
     // Temporarily disable crisping when computing original shapeArgs
     const xAxis = this.xAxis, inverted = this.chart.inverted, crisp = this.borderWidth % 2 / 2;

package/es-modules/Series/Venn/VennSeries.js

@@ -51,7 +51,7 @@ class VennSeries extends ScatterSeries {
      * */
     /**
      * Finds the optimal label position by looking for a position that has a low
-     * distance from the internal circles, and as large possible distane to the
+     * distance from the internal circles, and as large possible distance to the
      * external circles.
      * @private
      * @todo Optimize the intial position.
@@ -120,7 +120,7 @@ class VennSeries extends ScatterSeries {
         return best;
     }
     /**
-     * Calulates data label values for a given relations object.
+     * Calculates data label values for a given relations object.
      *
      * @private
      * @todo add unit tests
@@ -150,7 +150,7 @@ class VennSeries extends ScatterSeries {
         // Filter out external circles that are completely overlapping all
         // internal
         data.external = data.external.filter((externalCircle) => data.internal.some((internalCircle) => !isCircle1CompletelyOverlappingCircle2(externalCircle, internalCircle)));
-        // Calulate the label position.
+        // Calculate the label position.
         const position = VennSeries.getLabelPosition(data.internal, data.external);
         // Calculate the label width
         const width = VennUtils.getLabelWidth(position, data.internal, data.external);
@@ -167,7 +167,7 @@ class VennSeries extends ScatterSeries {
      * @todo Add support for constrained MDS.
      * @param {Array<Highchats.VennRelationObject>} relations
      * List of the overlap between two or more sets, or the size of a single
-     * sset.
+     * set.
      * @return {Highcharts.Dictionary<*>}
      * List of circles and their calculated positions.
      */

package/es-modules/Series/Venn/VennUtils.js

@@ -148,7 +148,7 @@ function getCentroid(simplex) {
  * @param {number} r1
  * Radius of the first circle.
  * @param {number} r2
- * Radiues of the second circle.
+ * Radius of the second circle.
  * @param {number} overlap
  * The wanted overlap between the two circles.
  * @return {number}
@@ -169,7 +169,7 @@ function getDistanceBetweenCirclesByOverlap(r1, r2, overlap) {
     else {
         distance = bisect((x) => {
             const actualOverlap = getOverlapBetweenCirclesByDistance(r1, r2, x);
-            // Return the differance between wanted and actual overlap.
+            // Return the difference between wanted and actual overlap.
             return overlap - actualOverlap;
         }, 0, maxDistance);
     }
@@ -202,8 +202,7 @@ function getLabelWidth(pos, internal, external) {
             }, isValid = (isPointInsideAllCircles(testPos, internal) &&
                 isPointOutsideAllCircles(testPos, filteredExternals));
             // If the position is valid, then we want to move towards the
-            // max distance. If not, then we want to  away from the max
-            // distance.
+            // max distance. If not, then we want to away from the max distance.
             return -(maxDistance - x) + (isValid ? 0 : Number.MAX_VALUE);
         }, 0, maxDistance);
     };
@@ -211,7 +210,7 @@ function getLabelWidth(pos, internal, external) {
     return Math.min(findDistance(radius, -1), findDistance(radius, 1)) * 2;
 }
 /**
- * Calculates a margin for a point based on the iternal and external
+ * Calculates a margin for a point based on the internal and external
  * circles. The margin describes if the point is well placed within the
  * internal circles, and away from the external.
  * @private
@@ -436,7 +435,7 @@ function loss(mapOfIdToCircle, relations) {
  * @param {Highcharts.NelderMeadPointArray} initial
  *        The initial point to optimize.
  * @return {Highcharts.NelderMeadPointArray}
- *         Returns the opimized position of a point.
+ *         Returns the optimized position of a point.
  */
 function nelderMead(fn, initial) {
     const maxIterations = 100, sortByFx = function (a, b) {

package/es-modules/Series/Waterfall/WaterfallSeriesDefaults.js

@@ -173,7 +173,7 @@ const WaterfallSeriesDefaults = {
  */
 /**
  * When this property is true, the points acts as a summary column for
- * the values added or substracted since the last intermediate sum,
+ * the values added or subtracted since the last intermediate sum,
  * or since the start of the series. The `y` value is ignored.
  *
  * @sample {highcharts} highcharts/demo/waterfall/

package/es-modules/Series/Windbarb/WindbarbSeries.js

@@ -193,7 +193,7 @@ class WindbarbSeries extends ColumnSeries {
             }, animObject(this.options.animation));
         }
     }
-    markerAttribs(point, state) {
+    markerAttribs() {
         return {};
     }
     getExtremes() {

package/es-modules/Series/Wordcloud/WordcloudUtils.js

@@ -210,7 +210,7 @@ function archimedeanSpiral(attempt, params) {
     return result;
 }
 /**
- * Gives a set of cordinates for an rectangular spiral.
+ * Gives a set of coordinates for an rectangular spiral.
  *
  * @private
  * @function squareSpiral
@@ -225,7 +225,9 @@ function archimedeanSpiral(attempt, params) {
  * Resulting coordinates, x and y. False if the word should be dropped from
  * the visualization.
  */
-function squareSpiral(attempt, params) {
+function squareSpiral(attempt, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+params) {
     const a = attempt * 4, k = Math.ceil((Math.sqrt(a) - 1) / 2), isBoolean = (x) => (typeof x === 'boolean');
     let t = 2 * k + 1, m = Math.pow(t, 2), result = false;
     t -= 1;
@@ -264,7 +266,7 @@ function squareSpiral(attempt, params) {
     return result;
 }
 /**
- * Gives a set of cordinates for an rectangular spiral.
+ * Gives a set of coordinates for an rectangular spiral.
  *
  * @private
  * @function rectangularSpiral
@@ -435,7 +437,7 @@ function getRotation(orientations, index, from, to) {
 function getSpiral(fn, params) {
     const length = 10000, arr = [];
     for (let i = 1; i < length; i++) {
-        // @todo unnecessary amount of precaclulation
+        // @todo unnecessary amount of precalculation
         arr.push(fn(i, params));
     }
     return (attempt) => (attempt <= length ? arr[attempt - 1] : false);

package/es-modules/Series/XRange/XRangePoint.js

@@ -68,8 +68,8 @@ class XRangePoint extends ColumnPoint {
                 this.colorIndex = colorByPoint.colorIndex;
             }
         }
-        else if (!this.color) {
-            this.color = series.color;
+        else {
+            this.color = this.options.color || series.color;
         }
     }
     /**

package/es-modules/Series/XRange/XRangeSeries.js

@@ -67,7 +67,7 @@ class XRangeSeries extends ColumnSeries {
      *
      * */
     static compose(AxisClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'Series.XRange')) {
             addEvent(AxisClass, 'afterGetSeriesExtremes', onAxisAfterGetSeriesExtremes);
         }
     }

package/es-modules/Shared/BaseForm.js

@@ -64,7 +64,7 @@ class BaseForm {
     addCloseButton(className = 'highcharts-popup-close') {
         const popup = this, iconsURL = this.iconsURL;
         // Create close popup button.
-        const closeButton = createElement('div', { className }, void 0, this.container);
+        const closeButton = createElement('button', { className }, void 0, this.container);
         closeButton.style['background-image'] = 'url(' +
             (iconsURL.match(/png|svg|jpeg|jpg|gif/ig) ?
                 iconsURL : iconsURL + 'close.svg') + ')';

package/es-modules/Stock/Indicators/AD/ADIndicator.js

@@ -29,7 +29,9 @@ class ADIndicator extends SMAIndicator {
      *  Static Functions
      *
      * */
-    static populateAverage(xVal, yVal, yValVolume, i, _period) {
+    static populateAverage(xVal, yVal, yValVolume, i, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _period) {
         const high = yVal[i][1], low = yVal[i][2], close = yVal[i][3], volume = yValVolume[i], adY = close === high && close === low || high === low ?
             0 :
             ((2 * close - low - high) / (high - low)) * volume, adX = xVal[i];

package/es-modules/Stock/Indicators/APO/APOIndicator.js

@@ -94,7 +94,7 @@ class APOIndicator extends EMAIndicator {
  */
 APOIndicator.defaultOptions = merge(EMAIndicator.defaultOptions, {
     /**
-     * Paramters used in calculation of Absolute Price Oscillator
+     * Parameters used in calculation of Absolute Price Oscillator
      * series points.
      *
      * @excluding period

package/es-modules/Stock/Indicators/Aroon/AroonIndicator.js

@@ -108,7 +108,7 @@ class AroonIndicator extends SMAIndicator {
  */
 AroonIndicator.defaultOptions = merge(SMAIndicator.defaultOptions, {
     /**
-     * Paramters used in calculation of aroon series points.
+     * Parameters used in calculation of aroon series points.
      *
      * @excluding index
      */

package/es-modules/Stock/Indicators/CMF/CMFIndicator.js

@@ -205,7 +205,7 @@ CMFIndicator.defaultOptions = merge(SMAIndicator.defaultOptions, {
         index: void 0,
         /**
          * The id of another series to use its data as volume data for the
-         * indiator calculation.
+         * indicator calculation.
          */
         volumeSeriesID: 'volume'
     }