highcharts 11.3.0 → 11.4.0

package/es-modules/Core/Tooltip.js

@@ -41,7 +41,7 @@ class Tooltip {
      *  Constructors
      *
      * */
-    constructor(chart, options) {
+    constructor(chart, options, pointer) {
         /* *
          *
          *  Properties
@@ -57,6 +57,7 @@ class Tooltip {
         this.outside = false;
         this.chart = chart;
         this.init(chart, options);
+        this.pointer = pointer;
     }
     /* *
      *
@@ -155,7 +156,7 @@ class Tooltip {
      * @function Highcharts.Tooltip#getAnchor
      */
     getAnchor(points, mouseEvent) {
-        const chart = this.chart, pointer = chart.pointer, inverted = chart.inverted, plotTop = chart.plotTop, plotLeft = chart.plotLeft;
+        const { chart, pointer } = this, inverted = chart.inverted, plotTop = chart.plotTop, plotLeft = chart.plotLeft;
         let ret;
         points = splat(points);
         // If reversedStacks are false the tooltip position should be taken from
@@ -339,7 +340,7 @@ class Tooltip {
         const { body, documentElement } = doc, { chart, distance, outside } = this;
         return {
             width: outside ?
-                // Substract distance to prevent scrollbars
+                // Subtract distance to prevent scrollbars
                 Math.max(body.scrollWidth, documentElement.scrollWidth, body.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth) - 2 * distance :
                 chart.chartWidth,
             height: outside ?
@@ -366,10 +367,10 @@ class Tooltip {
      *         Recommended position of the tooltip.
      */
     getPosition(boxWidth, boxHeight, point) {
-        const { distance, chart, outside } = this, { inverted, plotLeft, plotTop, polar } = chart, { plotX = 0, plotY = 0 } = point, ret = {}, 
+        const { distance, chart, outside, pointer } = this, { inverted, plotLeft, plotTop, polar } = chart, { plotX = 0, plotY = 0 } = point, ret = {}, 
         // Don't use h if chart isn't inverted (#7242) ???
         h = (inverted && point.h) || 0, // #4117 ???
-        { height: outerHeight, width: outerWidth } = this.getPlayingField(), chartPosition = chart.pointer.getChartPosition(), scaleX = (val) => (val * chartPosition.scaleX), scaleY = (val) => (val * chartPosition.scaleY), 
+        { height: outerHeight, width: outerWidth } = this.getPlayingField(), chartPosition = pointer.getChartPosition(), scaleX = (val) => (val * chartPosition.scaleX), scaleY = (val) => (val * chartPosition.scaleY), 
         // Build parameter arrays for firstDimension()/secondDimension()
         buildDimensionArray = (dim) => {
             const isX = dim === 'x';
@@ -624,7 +625,7 @@ class Tooltip {
     shouldStickOnContact(pointerEvent) {
         return !!(!this.followPointer &&
             this.options.stickOnContact &&
-            (!pointerEvent || this.chart.pointer.inClass(pointerEvent.target, 'highcharts-tooltip')));
+            (!pointerEvent || this.pointer.inClass(pointerEvent.target, 'highcharts-tooltip')));
     }
     /**
      * Moves the tooltip with a soft animation to a new position.
@@ -687,7 +688,7 @@ class Tooltip {
      *        used for the tooltip update.
      */
     refresh(pointOrPoints, mouseEvent) {
-        const tooltip = this, chart = this.chart, options = tooltip.options, pointer = chart.pointer, points = splat(pointOrPoints), point = points[0], pointConfig = [], formatString = options.format, formatter = options.formatter || tooltip.defaultFormatter, shared = tooltip.shared, styledMode = chart.styledMode;
+        const tooltip = this, { chart, options, pointer, shared } = this, points = splat(pointOrPoints), point = points[0], pointConfig = [], formatString = options.format, formatter = options.formatter || tooltip.defaultFormatter, styledMode = chart.styledMode;
         let formatterContext = {};
         if (!options.enabled || !point.series) { // #16820
             return;
@@ -704,7 +705,7 @@ class Tooltip {
         // shared tooltip, array is sent over
         if (shared && tooltip.allowShared) {
             pointer.applyInactiveState(points);
-            // Now set hover state for the choosen ones:
+            // Now set hover state for the chosen ones:
             points.forEach(function (item) {
                 item.setState('hover');
                 pointConfig.push(item.getLabelConfig());
@@ -807,7 +808,8 @@ class Tooltip {
      */
     renderSplit(labels, points) {
         const tooltip = this;
-        const { chart, chart: { chartWidth, chartHeight, plotHeight, plotLeft, plotTop, pointer, scrollablePixelsY = 0, scrollablePixelsX, scrollingContainer: { scrollLeft, scrollTop } = { scrollLeft: 0, scrollTop: 0 }, styledMode }, distance, options, options: { positioner } } = tooltip;
+        const { chart, chart: { chartWidth, chartHeight, plotHeight, plotLeft, plotTop, scrollablePixelsY = 0, scrollablePixelsX, styledMode }, distance, options, options: { positioner }, pointer } = tooltip;
+        const { scrollLeft = 0, scrollTop = 0 } = chart.scrollablePlotArea?.scrollingContainer || {};
         // The area which the tooltip should be limited to. Limit to scrollable
         // plot area if enabled, otherwise limit to the chart container. If
         // outside is true it should be the whole viewport
@@ -956,7 +958,7 @@ class Tooltip {
                         series: {}
                     });
                 const isHeader = point.isHeader;
-                // Store the tooltip label referance on the series
+                // Store the tooltip label reference on the series
                 const owner = isHeader ? tooltip : point.series;
                 const tt = owner.tt = updatePartialTooltip(owner.tt, point, str.toString());
                 // Get X position now, so we can move all to the other side in
@@ -999,7 +1001,7 @@ class Tooltip {
             return boxes;
         }, []);
         // Realign the tooltips towards the right if there is not enough space
-        // to the left and there is space to to the right
+        // to the left and there is space to the right
         if (!positioner && boxes.some((box) => {
             // Always realign if the beginning of a label is outside bounds
             const { outside } = tooltip;
@@ -1074,7 +1076,7 @@ class Tooltip {
             // Put the label in place
             box.tt.attr(attributes);
         });
-        /* If we have a seperate tooltip container, then update the necessary
+        /* If we have a separate tooltip container, then update the necessary
          * container properties.
          * Test that tooltip has its own container and renderer before executing
          * the operation.
@@ -1093,7 +1095,7 @@ class Tooltip {
         // can remove this.
         if (isSafari) {
             tooltipLabel.attr({
-                // Force a redraw of the whole group by chaning the opacity
+                // Force a redraw of the whole group by chaining the opacity
                 // slightly
                 opacity: tooltipLabel.opacity === 1 ? 0.999 : 1
             });
@@ -1223,7 +1225,7 @@ class Tooltip {
      * @param {Highcharts.Point} point
      */
     updatePosition(point) {
-        const { chart, container, distance, options, renderer } = this, { height = 0, width = 0 } = this.getLabel(), pointer = chart.pointer, 
+        const { chart, container, distance, options, pointer, renderer } = this, { height = 0, width = 0 } = this.getLabel(), 
         // Needed for outside: true (#11688)
         { left, top, scaleX, scaleY } = pointer.getChartPosition(), pos = (options.positioner || this.getPosition).call(this, width, height, point);
         let anchorX = (point.plotX || 0) + chart.plotLeft, anchorY = (point.plotY || 0) + chart.plotTop, pad;
@@ -1276,7 +1278,7 @@ class Tooltip {
      * @private
      */
     function compose(PointerClass) {
-        if (pushUnique(composed, compose)) {
+        if (pushUnique(composed, 'Core.Tooltip')) {
             addEvent(PointerClass, 'afterInit', function () {
                 const chart = this.chart;
                 if (chart.options.tooltip) {
@@ -1286,7 +1288,7 @@ class Tooltip {
                      * @name Highcharts.Chart#tooltip
                      * @type {Highcharts.Tooltip}
                      */
-                    chart.tooltip = new Tooltip(chart, chart.options.tooltip);
+                    chart.tooltip = new Tooltip(chart, chart.options.tooltip, this);
                 }
             });
         }
@@ -1307,7 +1309,7 @@ export default Tooltip;
 /**
  * Callback function to format the text of the tooltip from scratch.
  *
- * In case of single or shared tooltips, a string should be be returned. In case
+ * In case of single or shared tooltips, a string should be returned. In case
  * of splitted tooltips, it should return an array where the first item is the
  * header, and subsequent items are mapped to the points. Return `false` to
  * disable tooltip for a specific point on series.

package/es-modules/Core/Utilities.js

@@ -234,7 +234,9 @@ function diffObjects(newer, older, keepOlder, collectionsWithUpdate) {
             else if (newer[key] !== older[key] ||
                 // If the newer key is explicitly undefined, keep it (#10525)
                 (key in newer && !(key in older))) {
-                ret[key] = keeper[key];
+                if (key !== '__proto__' && key !== 'constructor') {
+                    ret[key] = keeper[key];
+                }
             }
         });
     }
@@ -613,11 +615,6 @@ function pick() {
  * @return {void}
  */
 function css(el, styles) {
-    if (H.isMS && !H.svg) { // #2686
-        if (styles && defined(styles.opacity)) {
-            styles.filter = `alpha(opacity=${styles.opacity * 100})`;
-        }
-    }
     extend(el.style, styles);
 }
 /**
@@ -729,6 +726,32 @@ function relativeLength(value, base, offset) {
         (base * parseFloat(value) / 100) + (offset || 0) :
         parseFloat(value);
 }
+/**
+ * Replaces text in a string with a given replacement in a loop to catch nested
+ * matches after previous replacements.
+ *
+ * @function Highcharts.replaceNested
+ *
+ * @param {string} text
+ * Text to search and modify.
+ *
+ * @param {...Array<(RegExp|string)>} replacements
+ * One or multiple tuples with search pattern (`[0]: (string|RegExp)`) and
+ * replacement (`[1]: string`) for matching text.
+ *
+ * @return {string}
+ * Text with replacements.
+ */
+function replaceNested(text, ...replacements) {
+    let previous, replacement;
+    do {
+        previous = text;
+        for (replacement of replacements) {
+            text = text.replace(replacement[0], replacement[1]);
+        }
+    } while (text !== previous);
+    return text;
+}
 /**
  * Wrap a method with extended functionality, preserving the original function.
  *
@@ -931,15 +954,17 @@ function arrayMax(data) {
  * @param {*} [except]
  *        Exception, do not destroy this property, only delete it.
  */
-function destroyObjectProperties(obj, except) {
+function destroyObjectProperties(obj, except, destructablesOnly) {
     objectEach(obj, function (val, n) {
         // If the object is non-null and destroy is defined
-        if (val && val !== except && val.destroy) {
+        if (val !== except && val?.destroy) {
             // Invoke the destroy
             val.destroy();
         }
-        // Delete the property from the object.
-        delete obj[n];
+        // Delete the property from the object
+        if (val?.destroy || !destructablesOnly) {
+            delete obj[n];
+        }
     });
 }
 /**
@@ -1337,7 +1362,7 @@ function objectEach(obj, fn, ctx) {
  *        The array to test
  *
  * @param {Function} fn
- *        The function to run on each item. Return truty to pass the test.
+ *        The function to run on each item. Return truthy to pass the test.
  *        Receives arguments `currentValue`, `index` and `array`.
  *
  * @param {*} ctx
@@ -1363,18 +1388,21 @@ objectEach({
  *
  * @function Highcharts.addEvent<T>
  *
- * @param {Highcharts.Class<T>|T} el
- *        The element or object to add a listener to. It can be a
- *        {@link HTMLDOMElement}, an {@link SVGElement} or any other object.
+ * @param  {Highcharts.Class<T>|T} el
+ *         The element or object to add a listener to. It can be a
+ *         {@link HTMLDOMElement}, an {@link SVGElement} or any other object.
  *
- * @param {string} type
- *        The event type.
+ * @param  {string} type
+ *         The event type.
+ *
+ * @param  {Highcharts.EventCallbackFunction<T>|Function} fn
+ *         The function callback to execute when the event is fired.
  *
- * @param {Highcharts.EventCallbackFunction<T>|Function} fn
- *        The function callback to execute when the event is fired.
+ * @param  {Highcharts.EventOptionsObject} [options]
+ *         Options for adding the event.
  *
- * @param {Highcharts.EventOptionsObject} [options]
- *        Options for adding the event.
+ * @sample highcharts/members/addevent
+ *         Use a general `render` event to draw shapes on a chart
  *
  * @return {Function}
  *         A callback function to remove the added event.
@@ -1525,14 +1553,13 @@ function removeEvent(el, type, fn) {
  */
 function fireEvent(el, type, eventArguments, defaultFunction) {
     /* eslint-enable valid-jsdoc */
-    let e, i;
     eventArguments = eventArguments || {};
     if (doc.createEvent &&
         (el.dispatchEvent ||
             (el.fireEvent &&
                 // Enable firing events on Highcharts instance.
                 el !== H))) {
-        e = doc.createEvent('Events');
+        const e = doc.createEvent('Events');
         e.initEvent(type, true, true);
         eventArguments = extend(e, eventArguments);
         if (el.dispatchEvent) {
@@ -1675,7 +1702,7 @@ if (win.jQuery) {
     *        The chart options structure.
     *
     * @param {Highcharts.ChartCallbackFunction} [callback]
-    *        Function to run when the chart has loaded and and all external
+    *        Function to run when the chart has loaded and all external
     *        images are loaded. Defining a
     *        [chart.events.load](https://api.highcharts.com/highcharts/chart.events.load)
     *        handler is equivalent.
@@ -1749,6 +1776,7 @@ const Utilities = {
     pushUnique,
     relativeLength,
     removeEvent,
+    replaceNested,
     splat,
     stableSort,
     syncTimeout,
@@ -1770,7 +1798,7 @@ export default Utilities;
  *
  * @interface Highcharts.AnimationOptionsObject
  */ /**
-* A callback function to exectute when the animation finishes.
+* A callback function to execute when the animation finishes.
 * @name Highcharts.AnimationOptionsObject#complete
 * @type {Function|undefined}
 */ /**
@@ -1808,7 +1836,7 @@ export default Utilities;
  * @interface Highcharts.Class<T>
  * @extends Function
  */ /**
-* Class costructor.
+* Class constructor.
 * @function Highcharts.Class<T>#new
 * @param {...Array<*>} args
 *        Constructor arguments.
@@ -1978,7 +2006,7 @@ export default Utilities;
 * @type boolean
 */
 /**
- * Formats data as a string. Usually the data is accessible throught the `this`
+ * Formats data as a string. Usually the data is accessible through the `this`
  * keyword.
  *
  * @callback Highcharts.FormatterCallbackFunction<T>

package/es-modules/Data/Connectors/CSVConnector.js

@@ -71,14 +71,14 @@ class CSVConnector extends DataConnector {
             detail: eventDetail,
             table
         });
-        // If already loaded, clear the current rows
-        table.deleteRows();
         return Promise
             .resolve(csvURL ?
             fetch(csvURL).then((response) => response.text()) :
             csv || '')
             .then((csv) => {
             if (csv) {
+                // If already loaded, clear the current rows
+                table.deleteColumns();
                 converter.parse({ csv });
                 table.setColumns(converter.getTable().getColumns());
             }

package/es-modules/Data/Connectors/DataConnector.js

@@ -99,14 +99,16 @@ class DataConnector {
      * @return {Array<string>|undefined}
      * Order of columns.
      */
-    getColumnOrder(usePresentationState) {
+    getColumnOrder(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    usePresentationState) {
         const connector = this, columns = connector.metadata.columns, names = Object.keys(columns || {});
         if (names.length) {
             return names.sort((a, b) => (pick(columns[a].index, 0) - pick(columns[b].index, 0)));
         }
     }
     /**
-     * Retrieves the columns of the the dataTable,
+     * Retrieves the columns of the dataTable,
      * applies column order from meta.
      *
      * @param {boolean} [usePresentationOrder]

package/es-modules/Data/Connectors/GoogleSheetsConnector.js

@@ -83,8 +83,6 @@ class GoogleSheetsConnector extends DataConnector {
             table,
             url
         });
-        // If already loaded, clear the current table
-        table.deleteColumns();
         return fetch(url)
             .then((response) => (response.json()))
             .then((json) => {
@@ -95,6 +93,8 @@ class GoogleSheetsConnector extends DataConnector {
                 firstRowAsNames,
                 json
             });
+            // If already loaded, clear the current table
+            table.deleteColumns();
             table.setColumns(converter.getTable().getColumns());
             return connector.setModifierOptions(dataModifier);
         })

package/es-modules/Data/Connectors/HTMLTableConnector.js

@@ -66,8 +66,6 @@ class HTMLTableConnector extends DataConnector {
             table,
             tableElement: connector.tableElement
         });
-        // If already loaded, clear the current rows
-        table.deleteColumns();
         let tableElement;
         if (typeof tableHTML === 'string') {
             connector.tableID = tableHTML;
@@ -89,6 +87,8 @@ class HTMLTableConnector extends DataConnector {
             return Promise.reject(new Error(error));
         }
         converter.parse(merge({ tableElement: connector.tableElement }, connector.options), eventDetail);
+        // If already loaded, clear the current rows
+        table.deleteColumns();
         table.setColumns(converter.getTable().getColumns());
         return connector
             .setModifierOptions(dataModifier)

package/es-modules/Data/Connectors/JSONConnector.js

@@ -68,20 +68,18 @@ class JSONConnector extends DataConnector {
             detail: eventDetail,
             table
         });
-        // If already loaded, clear the current rows
-        table.deleteRows();
         return Promise
             .resolve(dataUrl ?
             fetch(dataUrl).then((json) => json.json()) :
             data || [])
             .then((data) => {
             if (data) {
+                // If already loaded, clear the current rows
+                table.deleteColumns();
                 converter.parse({ data });
                 table.setColumns(converter.getTable().getColumns());
             }
-            return connector
-                .setModifierOptions(dataModifier)
-                .then(() => data);
+            return connector.setModifierOptions(dataModifier).then(() => data);
         })
             .then((data) => {
             connector.emit({

package/es-modules/Data/Converters/CSVConverter.js

@@ -226,11 +226,9 @@ class CSVConverter extends DataConverter {
         if (!decimalPoint || decimalPoint === itemDelimiter) {
             decimalPoint = converter.guessedDecimalPoint || '.';
         }
-        let i = 0, c = '', cl = '', cn = '', token = '', actualColumn = 0, column = 0;
+        let i = 0, c = '', token = '', actualColumn = 0, column = 0;
         const read = (j) => {
             c = columnStr[j];
-            cl = columnStr[j - 1];
-            cn = columnStr[j + 1];
         };
         const pushType = (type) => {
             if (dataTypes.length < column + 1) {

package/es-modules/Data/Converters/DataConverter.js

@@ -347,7 +347,11 @@ class DataConverter {
      * @param {DataConverter.Options} [options]
      * Options for the export.
      */
-    export(connector, options) {
+    export(
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    connector, options
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ) {
         this.emit({
             type: 'exportError',
             columns: [],
@@ -422,7 +426,9 @@ class DataConverter {
      * @param {DataConverter.UserOptions} options
      * Options of the DataConverter.
      */
-    parse(options) {
+    parse(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    options) {
         this.emit({
             type: 'parseError',
             columns: [],

package/es-modules/Data/Converters/HTMLTableConverter.js

@@ -176,9 +176,7 @@ class HTMLTableConverter extends DataConverter {
      * Get table header markup from row data.
      */
     getTableHeaderHTML(topheaders = [], subheaders = [], options = this.options) {
-        const { useMultiLevelHeaders, useRowspanHeaders } = options, decimalPoint = (options.useLocalDecimalPoint ?
-            (1.1).toLocaleString()[1] :
-            '.');
+        const { useMultiLevelHeaders, useRowspanHeaders } = options;
         let html = '<thead>', i = 0, len = subheaders && subheaders.length, next, cur, curColspan = 0, rowspan;
         // Clean up multiple table headers. Chart.getDataRows() returns two
         // levels of headers when using multilevel, not merged. We need to

package/es-modules/Data/Converters/JSONConverter.js

@@ -75,6 +75,7 @@ class JSONConverter extends DataConverter {
         if (!data) {
             return;
         }
+        converter.columns = [];
         converter.emit({
             type: 'parse',
             columns: converter.columns,

package/es-modules/Data/DataTable.js

@@ -24,7 +24,6 @@ const { addEvent, fireEvent, uniqueKey } = U;
  * to add, remove, and manipulate columns and rows, as well as to retrieve data
  * from specific cells.
  *
- * @private
  * @class
  * @name Highcharts.DataTable
  *
@@ -890,7 +889,7 @@ class DataTable {
      * @emits #afterSetColumns
      */
     setColumns(columns, rowIndex, eventDetail) {
-        const table = this, tableColumns = table.columns, tableModifier = table.modifier, tableRowCount = table.rowCount, reset = (typeof rowIndex === 'undefined'), columnNames = Object.keys(columns);
+        const table = this, tableColumns = table.columns, tableModifier = table.modifier, reset = (typeof rowIndex === 'undefined'), columnNames = Object.keys(columns);
         table.emit({
             type: 'setColumns',
             columns,

package/es-modules/Data/Formula/FormulaProcessor.js

@@ -356,7 +356,7 @@ function processFormula(formula, table) {
     return isValue(x) ? x : NaN;
 }
 /**
- * Process a function  on the give table. If the arguments do not contain
+ * Process a function on the given table. If the arguments do not contain
  * references or ranges, then no table has to be provided.
  *
  * @private
@@ -373,7 +373,9 @@ function processFormula(formula, table) {
  * @return {Highcharts.FormulaValue|Array<Highcharts.FormulaValue>}
  * Result value (or values) of the process. `NaN` indicates an error.
  */
-function processFunction(formulaFunction, table, reference // @todo
+function processFunction(formulaFunction, table, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+reference // @todo
 ) {
     const processor = processorFunctions[formulaFunction.name];
     if (processor) {

package/es-modules/Data/Modifiers/DataModifier.js

@@ -146,7 +146,11 @@ class DataModifier {
      * @return {Highcharts.DataTable}
      * Table with `modified` property as a reference.
      */
-    modifyCell(table, columnName, rowIndex, cellValue, eventDetail) {
+    modifyCell(table, 
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    columnName, rowIndex, cellValue, eventDetail
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ) {
         return this.modifyTable(table);
     }
     /**
@@ -168,7 +172,11 @@ class DataModifier {
      * @return {Highcharts.DataTable}
      * Table with `modified` property as a reference.
      */
-    modifyColumns(table, columns, rowIndex, eventDetail) {
+    modifyColumns(table, 
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    columns, rowIndex, eventDetail
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ) {
         return this.modifyTable(table);
     }
     /**
@@ -190,7 +198,11 @@ class DataModifier {
      * @return {Highcharts.DataTable}
      * Table with `modified` property as a reference.
      */
-    modifyRows(table, rows, rowIndex, eventDetail) {
+    modifyRows(table, 
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    rows, rowIndex, eventDetail
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ) {
         return this.modifyTable(table);
     }
     /**

package/es-modules/Extensions/Annotations/Annotation.js

@@ -22,7 +22,6 @@ import ControlPoint from './ControlPoint.js';
 import ControlTarget from './ControlTarget.js';
 import EventEmitter from './EventEmitter.js';
 import MockPoint from './MockPoint.js';
-import NavigationBindings from './NavigationBindings.js';
 import PopupComposition from './Popup/PopupComposition.js';
 import U from '../../Core/Utilities.js';
 const { destroyObjectProperties, erase, fireEvent, merge, pick, splat } = U;
@@ -32,7 +31,7 @@ const { destroyObjectProperties, erase, fireEvent, merge, pick, splat } = U;
  *
  * */
 /**
- * Hide or show annotaiton attached to points.
+ * Hide or show annotation attached to points.
  * @private
  */
 function adjustVisibility(item) {
@@ -94,12 +93,12 @@ class Annotation extends EventEmitter {
     /**
      * @private
      */
-    static compose(ChartClass, PointerClass, SVGRendererClass) {
+    static compose(ChartClass, NavigationBindingsClass, PointerClass, SVGRendererClass) {
         AnnotationChart.compose(Annotation, ChartClass, PointerClass);
         ControllableLabel.compose(SVGRendererClass);
         ControllablePath.compose(ChartClass, SVGRendererClass);
-        NavigationBindings.compose(Annotation, ChartClass);
-        PopupComposition.compose(NavigationBindings, PointerClass);
+        NavigationBindingsClass.compose(Annotation, ChartClass);
+        PopupComposition.compose(NavigationBindingsClass, PointerClass);
     }
     /* *
      *
@@ -318,7 +317,7 @@ class Annotation extends EventEmitter {
      * Initialisation of a single shape
      * @private
      * @param {Object} shapeOptions
-     * a confg object for a single shape
+     * a config object for a single shape
      * @param {number} index
      * annotation may have many shapes, this is the shape's index saved in
      * shapes.index.
@@ -382,7 +381,7 @@ class Annotation extends EventEmitter {
      * @private
      */
     remove() {
-        // Let chart.update() remove annoations on demand
+        // Let chart.update() remove annotations on demand
         return this.chart.removeAnnotation(this);
     }
     /**

package/es-modules/Extensions/Annotations/AnnotationChart.js

@@ -8,10 +8,8 @@
  *
  * */
 'use strict';
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, erase, find, fireEvent, pick, pushUnique, wrap } = U;
+const { addEvent, erase, find, fireEvent, pick, wrap } = U;
 /* *
  *
  *  Functions
@@ -252,8 +250,9 @@ var AnnotationChart;
      * @private
      */
     function compose(AnnotationClass, ChartClass, PointerClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype, pointerProto = PointerClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.addAnnotation) {
+            const pointerProto = PointerClass.prototype;
             addEvent(ChartClass, 'afterInit', onChartAfterInit);
             chartProto.addAnnotation = chartAddAnnotation;
             chartProto.callbacks.push(chartCallback);