highcharts 11.3.0 → 11.4.0

package/es-modules/Extensions/DataGrouping/DataGroupingDefaults.js

@@ -92,7 +92,7 @@ const seriesSpecific = {
     },
     hlc: {
         groupPixelWidth: 5
-        // Move to HeikinAshiSeries.ts aftre refactoring data grouping.
+        // Move to HeikinAshiSeries.ts after refactoring data grouping.
     },
     heikinashi: {
         groupPixelWidth: 10

package/es-modules/Extensions/DataGrouping/DataGroupingSeriesComposition.js

@@ -12,12 +12,10 @@ import ApproximationRegistry from './ApproximationRegistry.js';
 import DataGroupingDefaults from './DataGroupingDefaults.js';
 import DateTimeAxis from '../../Core/Axis/DateTimeAxis.js';
 import D from '../../Core/Defaults.js';
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 const { series: { prototype: seriesProto } } = SeriesRegistry;
 import U from '../../Core/Utilities.js';
-const { addEvent, defined, error, extend, isNumber, merge, pick, pushUnique } = U;
+const { addEvent, defined, error, extend, isNumber, merge, pick } = U;
 /* *
  *
  *  Constants
@@ -92,7 +90,7 @@ function anchorPoints(series, groupedXData, xMax) {
     }
     // Change the last point position but only when it is
     // the last point in the data set not in the current zoom,
-    // or if it is not the 1st point simutainously.
+    // or if it is not the 1st point simultaneously.
     if (groupedDataLastIndex > 0 &&
         lastAnchor &&
         totalRange &&
@@ -231,8 +229,9 @@ function applyGrouping(hasExtremesChanged) {
  * @private
  */
 function compose(SeriesClass) {
-    const PointClass = SeriesClass.prototype.pointClass;
-    if (pushUnique(composed, compose)) {
+    const seriesProto = SeriesClass.prototype;
+    if (!seriesProto.applyGrouping) {
+        const PointClass = SeriesClass.prototype.pointClass;
         // Override point prototype to throw a warning when trying to update
         // grouped points.
         addEvent(PointClass, 'update', function () {
@@ -243,7 +242,7 @@ function compose(SeriesClass) {
         });
         addEvent(SeriesClass, 'afterSetOptions', onAfterSetOptions);
         addEvent(SeriesClass, 'destroy', destroyGroupedData);
-        extend(SeriesClass.prototype, {
+        extend(seriesProto, {
             applyGrouping,
             destroyGroupedData,
             generatePoints,

package/es-modules/Extensions/Debugger/Debugger.js

@@ -47,7 +47,7 @@ const defaultOptions = {
  * @private
  */
 function compose(ChartClass) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'Debugger')) {
         addEvent(ChartClass, 'beforeRedraw', onChartBeforeRedraw);
         addEvent(H, 'displayError', onHighchartsDisplayError);
         setOptions(defaultOptions);

package/es-modules/Extensions/Debugger/ErrorMessages.js

@@ -11,8 +11,8 @@
 const errorMessages = {
     "10": {
         "title": "Can't plot zero or subzero values on a logarithmic axis",
-        "text": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations: </p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithimic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>Note: As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to true, and add custom conversion functions. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/type-log-negative/\">View live demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>",
-        "enduser": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations:</p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithimic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to <code>true</code> and add custom conversion functions. <a href=\"http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/type-log-negative/\">\">View Live Demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>"
+        "text": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations: </p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithmic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>Note: As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to true, and add custom conversion functions. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/type-log-negative/\">View live demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>",
+        "enduser": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations:</p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithmic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to <code>true</code> and add custom conversion functions. <a href=\"http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/type-log-negative/\">\">View Live Demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>"
     },
     "11": {
         "title": "Can't link axes of different type",

package/es-modules/Extensions/DragPanes/AxisResizer.js

@@ -13,8 +13,6 @@
  * */
 'use strict';
 import AxisResizerDefaults from './AxisResizerDefaults.js';
-import H from '../../Core/Globals.js';
-const { hasTouch } = H;
 import U from '../../Core/Utilities.js';
 const { addEvent, clamp, isNumber, relativeLength } = U;
 /* *
@@ -111,14 +109,13 @@ class AxisResizer {
         // Make them as separate functions to enable wrapping them:
         resizer.mouseMoveHandler = mouseMoveHandler = (e) => (resizer.onMouseMove(e));
         resizer.mouseUpHandler = mouseUpHandler = (e) => (resizer.onMouseUp(e));
-        resizer.mouseDownHandler = mouseDownHandler = (e) => (resizer.onMouseDown(e));
-        // Add mouse move and mouseup events. These are bind to doc/container,
+        resizer.mouseDownHandler = mouseDownHandler = () => (resizer.onMouseDown());
+        eventsToUnbind.push(
+        // Add mouse move and mouseup events. These are bind to doc/div,
         // because resizer.grabbed flag is stored in mousedown events.
-        eventsToUnbind.push(addEvent(container, 'mousemove', mouseMoveHandler), addEvent(container.ownerDocument, 'mouseup', mouseUpHandler), addEvent(ctrlLineElem, 'mousedown', mouseDownHandler));
+        addEvent(container, 'mousemove', mouseMoveHandler), addEvent(container.ownerDocument, 'mouseup', mouseUpHandler), addEvent(ctrlLineElem, 'mousedown', mouseDownHandler), 
         // Touch events.
-        if (hasTouch) {
-            eventsToUnbind.push(addEvent(container, 'touchmove', mouseMoveHandler), addEvent(container.ownerDocument, 'touchend', mouseUpHandler), addEvent(ctrlLineElem, 'touchstart', mouseDownHandler));
-        }
+        addEvent(container, 'touchmove', mouseMoveHandler), addEvent(container.ownerDocument, 'touchend', mouseUpHandler), addEvent(ctrlLineElem, 'touchstart', mouseDownHandler));
         resizer.eventsToUnbind = eventsToUnbind;
     }
     /**
@@ -136,11 +133,11 @@ class AxisResizer {
          * be ignored. Borrowed from Navigator.
          */
         if (!e.touches || e.touches[0].pageX !== 0) {
+            const pointer = this.axis.chart.pointer;
             // Drag the control line
-            if (this.grabbed) {
+            if (this.grabbed && pointer) {
                 this.hasDragged = true;
-                this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
-                    this.options.y);
+                this.updateAxes(pointer.normalize(e).chartY - (this.options.y || 0));
             }
         }
     }
@@ -153,9 +150,9 @@ class AxisResizer {
      *        Mouse event.
      */
     onMouseUp(e) {
-        if (this.hasDragged) {
-            this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
-                this.options.y);
+        const pointer = this.axis.chart.pointer;
+        if (this.hasDragged && pointer) {
+            this.updateAxes(pointer.normalize(e).chartY - (this.options.y || 0));
         }
         // Restore runPointActions.
         this.grabbed = this.hasDragged = this.axis.chart.activeResizer = void 0;
@@ -166,9 +163,9 @@ class AxisResizer {
      *
      * @function Highcharts.AxisResizer#onMouseDown
      */
-    onMouseDown(e) {
+    onMouseDown() {
         // Clear all hover effects.
-        this.axis.chart.pointer.reset(false, 0);
+        this.axis.chart.pointer?.reset(false, 0);
         // Disable runPointActions.
         this.grabbed = this.axis.chart.activeResizer = true;
     }

package/es-modules/Extensions/DragPanes/DragPanes.js

@@ -15,10 +15,8 @@
 import AxisResizer from './AxisResizer.js';
 import D from '../../Core/Defaults.js';
 const { defaultOptions } = D;
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, merge, pushUnique, wrap } = U;
+const { addEvent, merge, wrap } = U;
 /* *
  *
  *  Functions
@@ -28,7 +26,7 @@ const { addEvent, merge, pushUnique, wrap } = U;
  * @private
  */
 function compose(AxisClass, PointerClass) {
-    if (pushUnique(composed, compose)) {
+    if (!AxisClass.keepProps.includes('resizer')) {
         merge(true, defaultOptions.yAxis, AxisResizer.resizerOptions);
         // Keep resizer reference on axis update
         AxisClass.keepProps.push('resizer');

package/es-modules/Extensions/DraggablePoints/DragDropDefaults.js

@@ -304,8 +304,9 @@ const DragDropDefaults = {
      * Style options for the guide box. The guide box has one state by default,
      * the `default` state.
      *
-     * @type  {Highcharts.Dictionary<Highcharts.DragDropGuideBoxOptionsObject>}
+     * @declare Highcharts.PlotOptionsSeriesDragDropGuideBoxOptions
      * @since 6.2.0
+     * @type  {Highcharts.Dictionary<Highcharts.DragDropGuideBoxOptionsObject>}
      */
     guideBox: {
         /**

package/es-modules/Extensions/DraggablePoints/DragDropUtilities.js

@@ -94,7 +94,7 @@ function getFirstProp(obj) {
 function getNormalizedEvent(e, chart) {
     return (typeof e.chartX === 'undefined' ||
         typeof e.chartY === 'undefined' ?
-        chart.pointer.normalize(e) :
+        chart.pointer?.normalize(e) || e :
         e);
 }
 /* *

package/es-modules/Extensions/DraggablePoints/DraggableChart.js

@@ -16,9 +16,9 @@ import DDU from './DragDropUtilities.js';
 const { addEvents, countProps, getFirstProp, getNormalizedEvent } = DDU;
 import DragDropDefaults from './DragDropDefaults.js';
 import H from '../../Core/Globals.js';
-const { composed, doc } = H;
+const { doc } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, merge, pick, pushUnique } = U;
+const { addEvent, merge, pick } = U;
 /* *
  *
  *  Functions
@@ -132,8 +132,8 @@ function chartZoomOrPanKeyPressed(e) {
  *        Class constructor of chart.
  */
 function compose(ChartClass) {
-    if (pushUnique(composed, compose)) {
-        const chartProto = ChartClass.prototype;
+    const chartProto = ChartClass.prototype;
+    if (!chartProto.hideDragHandles) {
         chartProto.hideDragHandles = chartHideDragHandles;
         chartProto.setGuideBoxState = chartSetGuideBoxState;
         chartProto.zoomOrPanKeyPressed = chartZoomOrPanKeyPressed;

package/es-modules/Extensions/DraggablePoints/DraggablePoints.js

@@ -16,10 +16,8 @@ import DraggableChart from './DraggableChart.js';
 const { initDragDrop } = DraggableChart;
 import DragDropDefaults from './DragDropDefaults.js';
 import DragDropProps from './DragDropProps.js';
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, clamp, isNumber, merge, pick, pushUnique } = U;
+const { addEvent, clamp, isNumber, merge, pick } = U;
 /* *
  *
  *  Functions
@@ -29,7 +27,7 @@ const { addEvent, clamp, isNumber, merge, pick, pushUnique } = U;
 Add drag/drop support to specific data props for different series types.
 
 The dragDrop.draggableX/Y user options on series enable/disable all of these per
-irection unless they are specifically set in options using
+direction unless they are specifically set in options using
 dragDrop.{optionName}. If the prop does not specify an optionName here, it can
 only be enabled/disabled by the user with draggableX/Y.
 
@@ -70,8 +68,9 @@ Supported options for each prop:
 /** @private */
 function compose(ChartClass, SeriesClass) {
     DraggableChart.compose(ChartClass);
-    if (pushUnique(composed, compose)) {
-        const PointClass = SeriesClass.prototype.pointClass, seriesTypes = SeriesClass.types, seriesProto = SeriesClass.prototype, pointProto = PointClass.prototype;
+    const seriesProto = SeriesClass.prototype;
+    if (!seriesProto.dragDropProps) {
+        const PointClass = SeriesClass.prototype.pointClass, seriesTypes = SeriesClass.types, pointProto = PointClass.prototype;
         pointProto.getDropValues = pointGetDropValues;
         pointProto.showDragHandles = pointShowDragHandles;
         addEvent(PointClass, 'mouseOut', onPointMouseOut);
@@ -551,7 +550,7 @@ export default DraggablePoints;
  * @callback Highcharts.PointDragCallbackFunction
  *
  * @param {Highcharts.Point} this
- *        Point where the event occured.
+ *        Point where the event occurred.
  *
  * @param {Highcharts.PointDragEventObject} event
  *        Event arguments.
@@ -608,7 +607,7 @@ export default DraggablePoints;
  * @callback Highcharts.PointDragStartCallbackFunction
  *
  * @param {Highcharts.Point} this
- *        Point where the event occured.
+ *        Point where the event occurred.
  *
  * @param {Highcharts.PointDragStartEventObject} event
  *        Event arguments.
@@ -629,7 +628,7 @@ export default DraggablePoints;
  * @callback Highcharts.PointDropCallbackFunction
  *
  * @param {Highcharts.Point} this
- *        Point where the event occured.
+ *        Point where the event occurred.
  *
  * @param {Highcharts.PointDropEventObject} event
  *        Event arguments.

package/es-modules/Extensions/Drilldown/Drilldown.js

@@ -15,11 +15,11 @@ const { animObject } = A;
 import Breadcrumbs from '../Breadcrumbs/Breadcrumbs.js';
 import Color from '../../Core/Color/Color.js';
 import H from '../../Core/Globals.js';
-const { composed, noop } = H;
+const { noop } = H;
 import DrilldownDefaults from './DrilldownDefaults.js';
 import DrilldownSeries from './DrilldownSeries.js';
 import U from '../../Core/Utilities.js';
-const { addEvent, defined, diffObjects, extend, fireEvent, merge, objectEach, pick, pushUnique, removeEvent, syncTimeout } = U;
+const { addEvent, defined, diffObjects, extend, fireEvent, merge, objectEach, pick, removeEvent, syncTimeout } = U;
 /* *
  *
  *  Variables
@@ -95,7 +95,7 @@ function createBreadcrumbsList(chart) {
                 levelOptions: drilldownLevels[0].seriesOptions
             });
         }
-        drilldownLevels.forEach(function (level, i) {
+        drilldownLevels.forEach(function (level) {
             const lastBreadcrumb = list[list.length - 1];
             // If level is already added to breadcrumbs list,
             // don't add it again- drilling categories
@@ -157,6 +157,7 @@ class ChartAdditions {
     addSeriesAsDrilldown(point, options) {
         const chart = (this.chart ||
             this);
+        fireEvent(this, 'addSeriesAsDrilldown', { seriesOptions: options });
         if (chart.mapView) {
             // stop hovering while drilling down
             point.series.isDrilling = true;
@@ -345,13 +346,13 @@ class ChartAdditions {
                                 // If it is the last series
                                 if (!(level.levelSeries.filter((el) => Object.keys(el).length)).length) {
                                     // We have a reset zoom button. Hide it and
-                                    // detatch it from the chart. It is
+                                    // detach it from the chart. It is
                                     // preserved to the layer config above.
                                     if (chart.resetZoomButton) {
                                         chart.resetZoomButton.hide();
                                         delete chart.resetZoomButton;
                                     }
-                                    chart.pointer.reset();
+                                    chart.pointer?.reset();
                                     fireEvent(chart, 'afterDrilldown');
                                     if (chart.mapView) {
                                         chart.series.forEach((series) => {
@@ -370,13 +371,13 @@ class ChartAdditions {
             });
         }
         if (!chart.mapView) {
-            // We have a reset zoom button. Hide it and detatch it from the
+            // We have a reset zoom button. Hide it and detach it from the
             // chart. It is preserved to the layer config above.
             if (chart.resetZoomButton) {
                 chart.resetZoomButton.hide();
                 delete chart.resetZoomButton;
             }
-            chart.pointer.reset();
+            chart.pointer?.reset();
             fireEvent(chart, 'afterDrilldown');
             // Axes shouldn't be visible after drilling into non-cartesian
             // (#19725)
@@ -645,8 +646,9 @@ var Drilldown;
     /** @private */
     function compose(AxisClass, ChartClass, highchartsDefaultOptions, SeriesClass, seriesTypes, SVGRendererClass, TickClass) {
         DrilldownSeries.compose(SeriesClass, seriesTypes);
-        if (pushUnique(composed, compose)) {
-            const DrilldownChart = ChartClass, SVGElementClass = SVGRendererClass.prototype.Element, addonProto = ChartAdditions.prototype, axisProto = AxisClass.prototype, chartProto = DrilldownChart.prototype, elementProto = SVGElementClass.prototype, tickProto = TickClass.prototype;
+        const DrilldownChart = ChartClass, chartProto = DrilldownChart.prototype;
+        if (!chartProto.drillUp) {
+            const SVGElementClass = SVGRendererClass.prototype.Element, addonProto = ChartAdditions.prototype, axisProto = AxisClass.prototype, elementProto = SVGElementClass.prototype, tickProto = TickClass.prototype;
             axisProto.drilldownCategory = axisDrilldownCategory;
             axisProto.getDDPoints = axisGetDDPoints;
             Breadcrumbs.compose(ChartClass, highchartsDefaultOptions);

package/es-modules/Extensions/Drilldown/DrilldownSeries.js

@@ -12,10 +12,8 @@
 'use strict';
 import A from '../../Core/Animation/AnimationUtilities.js';
 const { animObject } = A;
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, extend, fireEvent, merge, pick, pushUnique, syncTimeout } = U;
+const { addEvent, extend, fireEvent, merge, pick, syncTimeout } = U;
 /* *
  *
  *  Functions
@@ -172,8 +170,9 @@ function columnAnimateDrillupTo(init) {
 }
 /** @private */
 function compose(SeriesClass, seriesTypes) {
-    if (pushUnique(composed, compose)) {
-        const PointClass = SeriesClass.prototype.pointClass, pointProto = PointClass.prototype, { column: ColumnSeriesClass, map: MapSeriesClass, pie: PieSeriesClass } = seriesTypes;
+    const PointClass = SeriesClass.prototype.pointClass, pointProto = PointClass.prototype;
+    if (!pointProto.doDrilldown) {
+        const { column: ColumnSeriesClass, map: MapSeriesClass, pie: PieSeriesClass } = seriesTypes;
         addEvent(PointClass, 'afterInit', onPointAfterInit);
         addEvent(PointClass, 'afterSetState', onPointAfterSetState);
         addEvent(PointClass, 'update', onPointUpdate);
@@ -437,7 +436,7 @@ function pointRunDrilldown(holdRedraw, category, originalEvent) {
         }
     }
     // Fire the event. If seriesOptions is undefined, the implementer can check
-    // for  seriesOptions, and call addSeriesAsDrilldown async if necessary.
+    // for seriesOptions, and call addSeriesAsDrilldown async if necessary.
     fireEvent(chart, 'drilldown', {
         point,
         seriesOptions: seriesOptions,

package/es-modules/Extensions/ExportData/ExportData.js

@@ -20,11 +20,9 @@ import DownloadURL from '../DownloadURL.js';
 const { downloadURL } = DownloadURL;
 import ExportDataDefaults from './ExportDataDefaults.js';
 import H from '../../Core/Globals.js';
-const { composed, doc, win } = H;
-import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
-const { series: SeriesClass, seriesTypes: { arearange: AreaRangeSeries, gantt: GanttSeries, map: MapSeries, mapbubble: MapBubbleSeries, treemap: TreemapSeries, xrange: XRangeSeries } } = SeriesRegistry;
+const { doc, win } = H;
 import U from '../../Core/Utilities.js';
-const { addEvent, defined, extend, find, fireEvent, isNumber, pick, pushUnique } = U;
+const { addEvent, defined, extend, find, fireEvent, isNumber, pick } = U;
 /* *
  *
  *  Functions
@@ -187,9 +185,11 @@ function chartGetDataRows(multiLevelHeaders) {
         if (!item) {
             return categoryHeader;
         }
-        if (!(item instanceof SeriesClass)) {
-            return (item.options.title && item.options.title.text) ||
-                (item.dateTime ? categoryDatetimeHeader : categoryHeader);
+        if (!item.bindAxes) {
+            return (item.options.title &&
+                item.options.title.text) || (item.dateTime ?
+                categoryDatetimeHeader :
+                categoryHeader);
         }
         if (multiLevelHeaders) {
             return {
@@ -270,7 +270,6 @@ function chartGetDataRows(multiLevelHeaders) {
                 pointArrayMap: series.pointArrayMap,
                 index: series.index
             };
-            const seriesIndex = mockSeries.index;
             // Export directly from options.data because we need the uncropped
             // data (#7913), and we need to support Boost (#7026).
             series.options.data.forEach(function eachData(options, pIdx) {
@@ -305,7 +304,7 @@ function chartGetDataRows(multiLevelHeaders) {
                     for (let i = 0; i < series.chart.series.length; i++) {
                         arr[i] = 0;
                     }
-                    // Create poiners array, holding information how many
+                    // Create pointers array, holding information how many
                     // duplicates of specific x occurs in each series.
                     // Used for creating rows with duplicates.
                     rows[key].pointers = arr;
@@ -695,12 +694,14 @@ function chartViewData() {
 /**
  * @private
  */
-function compose(ChartClass) {
-    if (pushUnique(composed, compose)) {
-        const chartProto = ChartClass.prototype, exportingOptions = getOptions().exporting;
+function compose(ChartClass, SeriesClass) {
+    const chartProto = ChartClass.prototype;
+    if (!chartProto.getCSV) {
+        const exportingOptions = getOptions().exporting;
         // Add an event listener to handle the showTable option
         addEvent(ChartClass, 'afterViewData', onChartAfterViewData);
         addEvent(ChartClass, 'render', onChartRenderer);
+        addEvent(ChartClass, 'destroy', onChartDestroy);
         chartProto.downloadCSV = chartDownloadCSV;
         chartProto.downloadXLS = chartDownloadXLS;
         chartProto.getCSV = chartGetCSV;
@@ -739,6 +740,7 @@ function compose(ChartClass) {
             }
         }
         setOptions(ExportDataDefaults);
+        const { arearange: AreaRangeSeries, gantt: GanttSeries, map: MapSeries, mapbubble: MapBubbleSeries, treemap: TreemapSeries, xrange: XRangeSeries } = SeriesClass.types;
         if (AreaRangeSeries) {
             AreaRangeSeries.prototype.keyToAxis = {
                 low: 'y',
@@ -752,11 +754,6 @@ function compose(ChartClass) {
                 end: 'x'
             };
         }
-        if (XRangeSeries) {
-            XRangeSeries.prototype.keyToAxis = {
-                x2: 'x'
-            };
-        }
         if (MapSeries) {
             MapSeries.prototype.exportKey = 'name';
         }
@@ -766,6 +763,11 @@ function compose(ChartClass) {
         if (TreemapSeries) {
             TreemapSeries.prototype.exportKey = 'name';
         }
+        if (XRangeSeries) {
+            XRangeSeries.prototype.keyToAxis = {
+                x2: 'x'
+            };
+        }
     }
 }
 /**
@@ -848,6 +850,13 @@ function onChartRenderer() {
         this.viewData();
     }
 }
+/**
+ * Clean up
+ * @private
+ */
+function onChartDestroy() {
+    this.dataTableDiv?.remove();
+}
 /* *
  *
  *  Default Export
@@ -871,7 +880,7 @@ export default ExportData;
  * @extends Highcharts.EventCallbackFunction<Highcharts.Chart>
  *
  * @param {Highcharts.Chart} this
- * Chart context where the event occured.
+ * Chart context where the event occurred.
  *
  * @param {Highcharts.ExportDataEventObject} event
  * Event object with data rows that can be modified.

package/es-modules/Extensions/Exporting/Exporting.js

@@ -14,15 +14,15 @@ import AST from '../../Core/Renderer/HTML/AST.js';
 import Chart from '../../Core/Chart/Chart.js';
 import ChartNavigationComposition from '../../Core/Chart/ChartNavigationComposition.js';
 import D from '../../Core/Defaults.js';
-const { defaultOptions, setOptions } = D;
+const { defaultOptions } = D;
 import ExportingDefaults from './ExportingDefaults.js';
 import ExportingSymbols from './ExportingSymbols.js';
 import Fullscreen from './Fullscreen.js';
 import G from '../../Core/Globals.js';
-const { composed, doc, SVG_NS, win } = G;
+const { doc, SVG_NS, win } = G;
 import HU from '../../Core/HttpUtilities.js';
 import U from '../../Core/Utilities.js';
-const { addEvent, css, createElement, discardElement, extend, find, fireEvent, isObject, merge, objectEach, pick, pushUnique, removeEvent, uniqueKey } = U;
+const { addEvent, css, createElement, discardElement, extend, find, fireEvent, isObject, merge, objectEach, pick, removeEvent, uniqueKey } = U;
 /* *
  *
  *  Composition
@@ -183,7 +183,7 @@ var Exporting;
         chart.exportSVGElements.push(button, symbol);
     }
     /**
-     * Clena up after printing a chart.
+     * Clean up after printing a chart.
      *
      * @function Highcharts#afterPrint
      *
@@ -234,7 +234,7 @@ var Exporting;
             resetParams: void 0
         };
         chart.isPrinting = true;
-        chart.pointer.reset(null, 0);
+        chart.pointer?.reset(void 0, 0);
         fireEvent(chart, 'beforePrint');
         // Handle printMaxWidth
         const handleMaxWidth = printMaxWidth &&
@@ -309,8 +309,8 @@ var Exporting;
     function compose(ChartClass, SVGRendererClass) {
         ExportingSymbols.compose(SVGRendererClass);
         Fullscreen.compose(ChartClass);
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.exportChart) {
             chartProto.afterPrint = afterPrint;
             chartProto.exportChart = exportChart;
             chartProto.inlineStyles = inlineStyles;
@@ -386,7 +386,7 @@ var Exporting;
                     padding: menuPadding + 'px',
                     pointerEvents: 'auto',
                     ...chart.renderer.style
-                }, chart.fixedDiv || chart.container);
+                }, chart.scrollablePlotArea?.fixedDiv || chart.container);
             innerMenu = createElement('ul', { className: 'highcharts-menu' }, chart.styledMode ? {} : {
                 listStyle: 'none',
                 margin: 0,
@@ -422,7 +422,7 @@ var Exporting;
             // Hide it on clicking or touching outside the menu (#2258,
             // #2335, #2407)
             addEvent(doc, 'mouseup', function (e) {
-                if (!chart.pointer.inClass(e.target, className)) {
+                if (!chart.pointer?.inClass(e.target, className)) {
                     menu.hideMenu();
                 }
             }), addEvent(menu, 'click', function () {
@@ -851,7 +851,7 @@ var Exporting;
             let styles, parentStyles, dummy, denylisted, allowlisted, i;
             /**
              * Check computed styles and whether they are in the allow/denylist
-             * for styles or atttributes.
+             * for styles or attributes.
              * @private
              * @param {string} val
              *        Style value
@@ -985,10 +985,15 @@ var Exporting;
      *        Move target
      */
     function moveContainers(moveTo) {
-        const chart = this;
-        (chart.fixedDiv ? // When scrollablePlotArea is active (#9533)
-            [chart.fixedDiv, chart.scrollingContainer] :
-            [chart.container]).forEach(function (div) {
+        const { scrollablePlotArea } = this;
+        (
+        // When scrollablePlotArea is active (#9533)
+        scrollablePlotArea ?
+            [
+                scrollablePlotArea.fixedDiv,
+                scrollablePlotArea.scrollingContainer
+            ] :
+            [this.container]).forEach(function (div) {
             moveTo.appendChild(div);
         });
     }
@@ -1096,7 +1101,7 @@ var Exporting;
     }
     /**
      * Exporting module only. A collection of fixes on the produced SVG to
-     * account for expando properties, browser bugs.
+     * account for expand properties, browser bugs.
      * Returns a cleaned SVG.
      *
      * @private
@@ -1136,7 +1141,7 @@ var Exporting;
             .replace(/url\([^#]+#/g, 'url(#')
             .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
             .replace(/ (|NS[0-9]+\:)href=/g, ' xlink:href=') // #3567
-            .replace(/\n/, ' ')
+            .replace(/\n+/g, ' ')
             // Batik doesn't support rgba fills and strokes (#3095)
             .replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g, // eslint-disable-line max-len
         '$1="rgb($2)" $1-opacity="$3"')
@@ -1164,10 +1169,10 @@ export default Exporting;
  * @callback Highcharts.ExportingAfterPrintCallbackFunction
  *
  * @param {Highcharts.Chart} this
- *        The chart on which the event occured.
+ *        The chart on which the event occurred.
  *
  * @param {global.Event} event
- *        The event that occured.
+ *        The event that occurred.
  */
 /**
  * Gets fired before a chart is printed through the context menu item or the
@@ -1176,10 +1181,10 @@ export default Exporting;
  * @callback Highcharts.ExportingBeforePrintCallbackFunction
  *
  * @param {Highcharts.Chart} this
- *        The chart on which the event occured.
+ *        The chart on which the event occurred.
  *
  * @param {global.Event} event
- *        The event that occured.
+ *        The event that occurred.
  */
 /**
  * Function to call if the offline-exporting module fails to export a chart on

package/es-modules/Extensions/Exporting/ExportingDefaults.js

@@ -767,7 +767,7 @@ const navigation = {
              * The default fill exists only to capture hover events.
              *
              * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-             * @default   #ffffff
+             * @default   ${palette.backgroundColor}
              * @apioption navigation.buttonOptions.theme.fill
              */
             /**