highcharts 11.3.0 → 11.4.0

package/es-modules/Stock/Navigator/StandaloneNavigator.js

@@ -0,0 +1,334 @@
+/* *
+ *
+ *  (c) 2010-2024 Mateusz Bernacik
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import Chart from '../../Core/Chart/Chart.js';
+import Navigator from './Navigator.js';
+import G from '../../Core/Globals.js';
+import U from '../../Core/Utilities.js';
+import Axis from '../../Core/Axis/Axis.js';
+import standaloneNavigatorDefaults from './StandaloneNavigatorDefaults.js';
+const { merge, addEvent, fireEvent, pick } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The StandaloneNavigator class. The StandaloneNavigator class allows for
+ * creating a standalone navigator component that synchronizes the extremes
+ * across multiple bound charts.
+ *
+ * @class
+ * @name Highcharts.StandaloneNavigator
+ *
+ * @param {string|Highcharts.HTMLDOMElement} [renderTo]
+ * The DOM element to render to, or its id.
+ *
+ * @param {StandaloneNavigatorOptions} userOptions
+ * The standalone navigator options.
+ */
+class StandaloneNavigator {
+    /* *
+     *
+     *  Static Functions
+     *
+     * */
+    /**
+     * Factory function for standalone navigator.
+     *
+     * @function Highcharts.navigator
+     *
+     * @param {string|Highcharts.HTMLDOMElement} [renderTo]
+     * The DOM element to render to, or its id.
+     *
+     * @param {StandaloneNavigatorOptions} options
+     * The standalone navigator options with chart-like structure.
+     *
+     * Returns the navigator object.
+     */
+    static navigator(renderTo, options) {
+        const nav = new StandaloneNavigator(renderTo, options);
+        if (!G.navigators) {
+            G.navigators = [nav];
+        }
+        else {
+            G.navigators.push(nav);
+        }
+        return nav;
+    }
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(element, userOptions) {
+        this.boundAxes = [];
+        this.userOptions = userOptions;
+        this.chartOptions = merge(G.getOptions(), standaloneNavigatorDefaults, { navigator: userOptions });
+        const chart = new Chart(element, this.chartOptions);
+        chart.options = merge(chart.options, { navigator: { enabled: true }, scrollbar: { enabled: true } });
+        if (this.chartOptions.navigator && this.chartOptions.scrollbar) {
+            this.chartOptions.navigator.enabled = true;
+            this.chartOptions.scrollbar.enabled = true;
+        }
+        this.navigator = new Navigator(chart);
+        chart.navigator = this.navigator;
+        this.initNavigator();
+    }
+    /**
+     * Binds an axis to the standalone navigator,
+     * allowing the navigator to control the axis' range.
+     *
+     * @sample stock/standalone-navigator/bind/
+     *         Bind chart with a button
+     *
+     * @function Highcharts.StandaloneNavigator#bind
+     *
+     * @param {Axis | Chart} axisOrChart
+     *        The Axis or Chart to bind to the navigator.
+     *
+     * @param {boolean} [twoWay=true]
+     *        Enables two-way binding between the navigator and the axis/chart.
+     *        When true, changes in the navigator's range will update the axis
+     *        and vice versa. When false, changes in the navigator's range will
+     *        be reflected in the axis, but changes in the axis ranges won't be
+     *        reflected on the navigator.
+     */
+    bind(axisOrChart, twoWay = true) {
+        const nav = this;
+        // If the chart is passed, bind the first xAxis
+        const axis = (axisOrChart instanceof Chart) ?
+            axisOrChart.xAxis[0] :
+            axisOrChart;
+        if (!(axis instanceof Axis)) {
+            return;
+        }
+        const { min, max } = this.navigator.xAxis, removeEventCallbacks = [];
+        if (twoWay) {
+            const removeSetExtremesEvent = addEvent(axis, 'setExtremes', (e) => {
+                if (e.trigger === 'pan' ||
+                    e.trigger === 'zoom' ||
+                    e.trigger === 'mouseWheelZoom') {
+                    nav.setRange(e.min, e.max, true, e.trigger !== 'pan', { trigger: axis });
+                }
+            });
+            removeEventCallbacks.push(removeSetExtremesEvent);
+        }
+        const removeSetRangeEvent = addEvent(this.navigator, 'setRange', (e) => {
+            axis.setExtremes(e.min, e.max, e.redraw, e.animation);
+        });
+        removeEventCallbacks.push(removeSetRangeEvent);
+        let boundAxis = this.boundAxes.filter(function (boundAxis) {
+            return boundAxis.axis === axis;
+        })[0];
+        if (!boundAxis) {
+            boundAxis = { axis, callbacks: [] };
+            this.boundAxes.push(boundAxis);
+        }
+        boundAxis.callbacks = removeEventCallbacks;
+        // Show axis' series in navigator based on showInNavigator property
+        axis.series.forEach((series) => {
+            if (series.options.showInNavigator) {
+                nav.addSeries(series.options);
+            }
+        });
+        // Set extremes to match the navigator's extremes
+        axis.setExtremes(min, max);
+        // Unbind the axis before it's destroyed
+        addEvent(axis, 'destroy', (e) => {
+            if (!e.keepEvents) {
+                this.unbind(axis);
+            }
+        });
+    }
+    /**
+     * Unbinds a single axis or all bound axes from the standalone navigator.
+     *
+     * @sample stock/standalone-navigator/unbind/
+     *         Unbind chart with a button
+     *
+     * @function Highcharts.StandaloneNavigator#unbind
+     *
+     * @param {Chart | Axis | undefined} axisOrChart
+     *        Passing a Chart object unbinds the first X axis of the chart,
+     *        an Axis object unbinds that specific axis,
+     *        and undefined unbinds all axes bound to the navigator.
+     */
+    unbind(axisOrChart) {
+        // If no axis or chart is provided, unbind all bound axes
+        if (!axisOrChart) {
+            this.boundAxes.forEach(({ callbacks }) => {
+                callbacks.forEach((removeCallback) => removeCallback());
+            });
+            this.boundAxes.length = 0;
+            return;
+        }
+        const axis = (axisOrChart instanceof Axis) ?
+            axisOrChart :
+            axisOrChart.xAxis[0];
+        for (let i = this.boundAxes.length - 1; i >= 0; i--) {
+            if (this.boundAxes[i].axis === axis) {
+                this.boundAxes[i].callbacks.forEach((callback) => callback());
+                this.boundAxes.splice(i, 1);
+            }
+        }
+    }
+    /**
+     * Destroys allocated standalone navigator elements.
+     *
+     * @function Highcharts.StandaloneNavigator#destroy
+     */
+    destroy() {
+        // Disconnect events
+        this.boundAxes.forEach(({ callbacks }) => {
+            callbacks.forEach((removeCallback) => removeCallback());
+        });
+        this.boundAxes.length = 0;
+        this.navigator.destroy();
+        this.navigator.chart.destroy();
+    }
+    /**
+     * Updates the standalone navigator's options with a new set of user
+     * options.
+     *
+     * @sample stock/standalone-navigator/update/
+     *         Bind chart with a button
+     *
+     * @function Highcharts.StandaloneNavigator#update
+     *
+     * @param  {StandaloneNavigatorOptions} newOptions
+     *         Updates the standalone navigator's options with new user options.
+     *
+     * @param  {boolean | undefined} redraw
+     *         Whether to redraw the standalone navigator. By default, if not
+     *         specified, the standalone navigator will be redrawn.
+     */
+    update(newOptions, redraw) {
+        this.chartOptions = merge(this.chartOptions, { navigator: newOptions });
+        this.navigator.chart.update(this.chartOptions, redraw);
+    }
+    /**
+     * Redraws the standalone navigator.
+     *
+     * @function Highcharts.StandaloneNavigator#redraw
+     */
+    redraw() {
+        this.navigator.chart.redraw();
+    }
+    /**
+     * Adds a series to the standalone navigator.
+     *
+     * @private
+     *
+     * @param {SeriesOptions} seriesOptions
+     *        Options for the series to be added to the navigator.
+     */
+    addSeries(seriesOptions) {
+        this.navigator.chart.addSeries(merge(seriesOptions, { showInNavigator: pick(seriesOptions.showInNavigator, true) }));
+        this.navigator.setBaseSeries();
+    }
+    /**
+     * Initialize the standalone navigator.
+     *
+     * @private
+     */
+    initNavigator() {
+        const nav = this.navigator;
+        nav.top = 1;
+        nav.xAxis.setScale();
+        nav.yAxis.setScale();
+        nav.xAxis.render();
+        nav.yAxis.render();
+        nav.series?.forEach((s) => {
+            s.translate();
+            s.render();
+            s.redraw();
+        });
+        const { min, max } = this.getInitialExtremes();
+        nav.chart.xAxis[0].userMin = min;
+        nav.chart.xAxis[0].userMax = max;
+        nav.render(min, max);
+    }
+    /**
+     * Get the current range of the standalone navigator.
+     *
+     * @sample stock/standalone-navigator/getrange/
+     *         Report the standalone navigator's range by clicking on a button
+     *
+     * @function Highcharts.StandaloneNavigator#getRange
+     *
+     * @return {Highcharts.ExtremesObject}
+     *         The current range of the standalone navigator.
+     */
+    getRange() {
+        const { min, max } = this.navigator.chart.xAxis[0].getExtremes(), { userMin, userMax, min: dataMin, max: dataMax } = this.navigator.xAxis.getExtremes();
+        return {
+            min: pick(min, dataMin),
+            max: pick(max, dataMax),
+            dataMin,
+            dataMax,
+            userMin,
+            userMax
+        };
+    }
+    /**
+     * Set the range of the standalone navigator.
+     *
+     * @sample stock/standalone-navigator/setrange/
+     *         Set range from a button
+     *
+     * @function Highcharts.StandaloneNavigator#setRange
+     *
+     * @param {number | undefined} min
+     *        The new minimum value.
+     *
+     * @param {number | undefined} max
+     *        The new maximum value.
+     *
+     * @emits Highcharts.StandaloneNavigator#event:setRange
+     */
+    setRange(min, max, redraw, animation, eventArguments) {
+        fireEvent(this.navigator, 'setRange', {
+            min,
+            max,
+            redraw,
+            animation,
+            eventArguments: merge(eventArguments, { trigger: 'navigator' })
+        });
+    }
+    /**
+     * Get the initial, options based extremes for the standalone navigator.
+     *
+     * @private
+     *
+     * @return {{ min: number, max: number }}
+     *         The initial minimum and maximum extremes values.
+     */
+    getInitialExtremes() {
+        const { min, max } = this.navigator.xAxis.getExtremes();
+        return {
+            min: min,
+            max: max
+        };
+    }
+}
+export default StandaloneNavigator;
+/* *
+ *
+ *  API Declarations
+ *
+ * */
+/**
+ * Standalone Navigator options.
+ *
+ * @interface Highcharts.StandaloneNavigatorOptions
+ */ /**
+*/
+''; // detach doclets above

package/es-modules/Stock/Navigator/StandaloneNavigatorDefaults.js

@@ -0,0 +1,64 @@
+/* *
+ *
+ *  (c) 2010-2024 Mateusz Bernacik
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+/* *
+ *
+ *  Constants
+ *
+ * */
+const standaloneNavigatorDefaults = {
+    chart: {
+        height: 70,
+        margin: [0, 5, 0, 5]
+    },
+    exporting: {
+        enabled: false
+    },
+    legend: {
+        enabled: false
+    },
+    navigator: {
+        enabled: false
+    },
+    plotOptions: {
+        series: {
+            states: {
+                hover: {
+                    enabled: false
+                }
+            },
+            marker: {
+                enabled: false
+            }
+        }
+    },
+    scrollbar: {
+        enabled: false
+    },
+    title: {
+        text: ''
+    },
+    tooltip: {
+        enabled: false
+    },
+    xAxis: {
+        visible: false
+    },
+    yAxis: {
+        height: 0,
+        visible: false
+    }
+};
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default standaloneNavigatorDefaults;

package/es-modules/Stock/RangeSelector/RangeSelector.js

@@ -106,8 +106,6 @@ class RangeSelector {
         if (dataMin === null || dataMax === null) {
             return;
         }
-        // Set the fixed range before range is altered
-        chart.fixedRange = range;
         rangeSelector.setSelected(i);
         // Apply dataGrouping associated to button
         if (dataGrouping) {
@@ -200,7 +198,7 @@ class RangeSelector {
         }
         // Update the chart
         if (!baseAxis) {
-            // Axis not yet instanciated. Temporarily set min and range
+            // Axis not yet instantiated. Temporarily set min and range
             // options and remove them on chart load (#4317).
             baseXAxisOptions = splat(chart.options.xAxis)[0];
             rangeSetting = baseXAxisOptions.range;
@@ -208,6 +206,7 @@ class RangeSelector {
             minSetting = baseXAxisOptions.min;
             baseXAxisOptions.min = rangeMin;
             addEvent(chart, 'load', function resetMinAndRange() {
+                chart.setFixedRange(rangeOptions._range);
                 baseXAxisOptions.range = rangeSetting;
                 baseXAxisOptions.min = minSetting;
             });
@@ -219,6 +218,7 @@ class RangeSelector {
                 trigger: 'rangeSelectorButton',
                 rangeSelectorButton: rangeOptions
             });
+            chart.setFixedRange(rangeOptions._range);
         }
         fireEvent(this, 'afterBtnClick');
     }
@@ -260,7 +260,7 @@ class RangeSelector {
         this.eventsToUnbind.push(addEvent(chart, 'resize', blurInputs));
         // Extend the buttonOptions with actual range
         buttonOptions.forEach(rangeSelector.computeButtonRange);
-        // zoomed range based on a pre-selected button index
+        // Zoomed range based on a pre-selected button index
         if (typeof selectedOption !== 'undefined' &&
             buttonOptions[selectedOption]) {
             this.clickButton(selectedOption, false);
@@ -270,8 +270,9 @@ class RangeSelector {
             // when extremes change
             if (chart.xAxis && chart.xAxis[0]) {
                 addEvent(chart.xAxis[0], 'setExtremes', function (e) {
-                    if (this.max - this.min !==
-                        chart.fixedRange &&
+                    if (isNumber(this.max) &&
+                        isNumber(this.min) &&
+                        this.max - this.min !== chart.fixedRange &&
                         e.trigger !== 'rangeSelectorButton' &&
                         e.trigger !== 'updatedData' &&
                         rangeSelector.forcedDataGrouping &&
@@ -312,8 +313,19 @@ class RangeSelector {
             if (isSelected && isTooGreatRange) {
                 isSelectedTooGreat = true;
             }
-            // Months and years have a variable range so we check the extremes
-            if ((type === 'month' || type === 'year') &&
+            if (baseAxis.isOrdinal &&
+                baseAxis.ordinal?.positions &&
+                range &&
+                actualRange < range) {
+                // Handle ordinal ranges
+                const positions = baseAxis.ordinal.positions;
+                if (positions[positions.length - 1] - positions[0] > range) {
+                    isSameRange = true;
+                }
+            }
+            else if (
+            // Months and years have variable range so we check the extremes
+            (type === 'month' || type === 'year') &&
                 (actualRange + 36e5 >=
                     { month: 28, year: 365 }[type] * day * count - offsetRange) &&
                 (actualRange - 36e5 <=
@@ -574,7 +586,7 @@ class RangeSelector {
             if (value !== Number(input.getAttribute('data-hc-time-previous')) &&
                 isNumber(value)) {
                 input.setAttribute('data-hc-time-previous', value);
-                // Validate the extremes. If it goes beyound the data min or
+                // Validate the extremes. If it goes beyond the data min or
                 // max, use the actual data extreme (#2438).
                 if (isMin && maxInput && isNumber(dataMin)) {
                     if (value > Number(maxInput.getAttribute('data-hc-time'))) {
@@ -593,7 +605,7 @@ class RangeSelector {
                     }
                 }
                 // Set the extremes
-                if (typeof value !== 'undefined') { // @todo typof undefined
+                if (typeof value !== 'undefined') { // @todo typeof undefined
                     chartAxis.setExtremes(isMin ? value : chartAxis.min, isMin ? chartAxis.max : value, void 0, void 0, { trigger: 'rangeSelectorInput' });
                 }
             }
@@ -608,8 +620,8 @@ class RangeSelector {
             height: text ? options.inputBoxHeight : 0
         })
             .add(inputGroup);
-        // Create an SVG label that shows updated date ranges and and records
-        // click events that bring in the HTML input.
+        // Create an SVG label that shows updated date ranges and records click
+        // events that bring in the HTML input.
         const dateBox = renderer
             .label('', 0)
             .addClass('highcharts-range-input')
@@ -666,7 +678,7 @@ class RangeSelector {
         };
         // Hide away the input box
         input.onblur = () => {
-            // update extermes only when inputs are active
+            // update extremes only when inputs are active
             if (input === H.doc.activeElement) { // Only when focused
                 // Update also when no `change` event is triggered, like when
                 // clicking inside the SVG (#4710)
@@ -715,7 +727,7 @@ class RangeSelector {
     getPosition() {
         const chart = this.chart, options = chart.options.rangeSelector, top = options.verticalAlign === 'top' ?
             chart.plotTop - chart.axisOffset[0] :
-            0; // set offset only for varticalAlign top
+            0; // set offset only for verticalAlign top
         return {
             buttonTop: top + options.buttonPosition.y,
             inputTop: top + options.inputPosition.y - 10
@@ -933,7 +945,7 @@ class RangeSelector {
             chartOptions.navigation.buttonOptions);
         const { buttonPosition, inputPosition, verticalAlign } = options;
         // Get the X offset required to avoid overlapping with the exporting
-        // button. This is is used both by the buttonGroup and the inputGroup.
+        // button. This is used both by the buttonGroup and the inputGroup.
         const getXOffsetForExportButton = (group, position) => {
             if (navButtonOptions &&
                 this.titleCollision(chart) &&
@@ -1065,7 +1077,7 @@ class RangeSelector {
      * @param {number} [width]
      */
     alignButtonGroup(xOffsetForExportButton, width) {
-        const { chart, options, buttonGroup, buttons } = this;
+        const { chart, options, buttonGroup } = this;
         const { buttonPosition } = options;
         const plotLeft = chart.plotLeft - chart.spacing[3];
         let translateX = buttonPosition.x - chart.spacing[3];

package/es-modules/Stock/RangeSelector/RangeSelectorComposition.js

@@ -66,7 +66,7 @@ function axisMinFromRange() {
         min = max + getTrueRange(max, -(rangeOptions.count || 1));
         // Let the fixedRange reflect initial settings (#5930)
         if (this.chart) {
-            this.chart.fixedRange = max - min;
+            this.chart.setFixedRange(max - min);
         }
     }
     const dataMin = pick(this.dataMin, Number.MIN_VALUE);
@@ -95,7 +95,7 @@ function axisMinFromRange() {
  */
 function compose(AxisClass, ChartClass, RangeSelectorClass) {
     RangeSelectorConstructor = RangeSelectorClass;
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'RangeSelector')) {
         const chartProto = ChartClass.prototype;
         AxisClass.prototype.minFromRange = axisMinFromRange;
         addEvent(ChartClass, 'afterGetContainer', onChartAfterGetContainer);

package/es-modules/Stock/Scrollbar/Scrollbar.js

@@ -113,8 +113,8 @@ class Scrollbar {
      */
     addEvents() {
         const buttonsOrder = this.options.inverted ? [1, 0] : [0, 1], buttons = this.scrollbarButtons, bar = this.scrollbarGroup.element, track = this.track.element, mouseDownHandler = this.mouseDownHandler.bind(this), mouseMoveHandler = this.mouseMoveHandler.bind(this), mouseUpHandler = this.mouseUpHandler.bind(this);
-        // Mouse events
         const _events = [
+            // Mouse events
             [
                 buttons[buttonsOrder[0]].element,
                 'click',
@@ -128,12 +128,12 @@ class Scrollbar {
             [track, 'click', this.trackClick.bind(this)],
             [bar, 'mousedown', mouseDownHandler],
             [bar.ownerDocument, 'mousemove', mouseMoveHandler],
-            [bar.ownerDocument, 'mouseup', mouseUpHandler]
+            [bar.ownerDocument, 'mouseup', mouseUpHandler],
+            // Touch events
+            [bar, 'touchstart', mouseDownHandler],
+            [bar.ownerDocument, 'touchmove', mouseMoveHandler],
+            [bar.ownerDocument, 'touchend', mouseUpHandler]
         ];
-        // Touch events
-        if (H.hasTouch) {
-            _events.push([bar, 'touchstart', mouseDownHandler], [bar.ownerDocument, 'touchmove', mouseMoveHandler], [bar.ownerDocument, 'touchend', mouseUpHandler]);
-        }
         // Add them all
         _events.forEach(function (args) {
             addEvent.apply(null, args);
@@ -299,7 +299,7 @@ class Scrollbar {
         }
     }
     mouseDownHandler(e) {
-        const scroller = this, normalizedEvent = scroller.chart.pointer.normalize(e), mousePosition = scroller.cursorToScrollbarPosition(normalizedEvent);
+        const scroller = this, normalizedEvent = scroller.chart.pointer?.normalize(e) || e, mousePosition = scroller.cursorToScrollbarPosition(normalizedEvent);
         scroller.chartX = mousePosition.chartX;
         scroller.chartY = mousePosition.chartY;
         scroller.initPositions = [scroller.from, scroller.to];
@@ -310,7 +310,7 @@ class Scrollbar {
      * @private
      */
     mouseMoveHandler(e) {
-        const scroller = this, normalizedEvent = scroller.chart.pointer.normalize(e), options = scroller.options, direction = options.vertical ?
+        const scroller = this, normalizedEvent = scroller.chart.pointer?.normalize(e) || e, options = scroller.options, direction = options.vertical ?
             'chartY' : 'chartX', initPositions = scroller.initPositions || [];
         let scrollPosition, chartPosition, change;
         // In iOS, a mousemove event with e.pageX === 0 is fired when
@@ -368,7 +368,7 @@ class Scrollbar {
      * @param {number} width
      *        width of the scrollbar
      * @param {number} height
-     *        height of the scorllbar
+     *        height of the scrollbar
      */
     position(x, y, width, height) {
         const scroller = this, options = scroller.options, { buttonsEnabled, margin = 0, vertical } = options, method = scroller.rendered ? 'animate' : 'attr';
@@ -592,7 +592,7 @@ class Scrollbar {
     }
     trackClick(e) {
         const scroller = this;
-        const normalizedEvent = scroller.chart.pointer.normalize(e), range = scroller.to - scroller.from, top = scroller.y + scroller.scrollbarTop, left = scroller.x + scroller.scrollbarLeft;
+        const normalizedEvent = scroller.chart.pointer?.normalize(e) || e, range = scroller.to - scroller.from, top = scroller.y + scroller.scrollbarTop, left = scroller.x + scroller.scrollbarLeft;
         if ((scroller.options.vertical && normalizedEvent.chartY > top) ||
             (!scroller.options.vertical && normalizedEvent.chartX > left)) {
             // On the top or on the left side of the track:

package/es-modules/Stock/Scrollbar/ScrollbarDefaults.js

@@ -8,8 +8,6 @@
  *
  * */
 'use strict';
-import H from '../../Core/Globals.js';
-const { isTouchDevice } = H;
 /* *
  *
  *  Constant
@@ -18,7 +16,7 @@ const { isTouchDevice } = H;
 /**
  *
  * The scrollbar is a means of panning over the X axis of a stock chart.
- * Scrollbars can  also be applied to other types of axes.
+ * Scrollbars can also be applied to other types of axes.
  *
  * Another approach to scrollable charts is the [chart.scrollablePlotArea](
  * https://api.highcharts.com/highcharts/chart.scrollablePlotArea) option that

package/es-modules/Stock/StockTools/StockToolbar.js

@@ -191,7 +191,7 @@ class Toolbar {
         });
     }
     /**
-     * Create single button. Consist of HTML elements `li`, `span`, and (if
+     * Create single button. Consist of HTML elements `li`, `button`, and (if
      * exists) submenu container.
      *
      * @private
@@ -219,13 +219,14 @@ class Toolbar {
             title: lang[btnName] || btnName
         }, void 0, target);
         // single button
-        const mainButton = createElement('span', {
+        const elementType = (btnOptions.elementType || 'button');
+        const mainButton = createElement(elementType, {
             className: 'highcharts-menu-item-btn'
         }, void 0, buttonWrapper);
         // submenu
         if (items && items.length) {
             // arrow is a hook to show / hide submenu
-            const submenuArrow = createElement('span', {
+            const submenuArrow = createElement('button', {
                 className: 'highcharts-submenu-item-arrow ' +
                     'highcharts-arrow-right'
             }, void 0, buttonWrapper);
@@ -312,7 +313,7 @@ class Toolbar {
         ].forEach((eventType) => {
             addEvent(wrapper, eventType, (e) => e.stopPropagation());
         });
-        addEvent(wrapper, 'mouseover', (e) => chart.pointer.onContainerMouseLeave(e));
+        addEvent(wrapper, 'mouseover', (e) => chart.pointer?.onContainerMouseLeave(e));
         // toolbar
         this.toolbar = toolbar = createElement('ul', {
             className: 'highcharts-stocktools-toolbar ' +
@@ -487,7 +488,7 @@ class Toolbar {
     getIconsURL() {
         return this.chart.options.navigation.iconsURL ||
             this.options.iconsURL ||
-            'https://code.highcharts.com/11.3.0/gfx/stock-icons/';
+            'https://code.highcharts.com/@product.version@/gfx/stock-icons/';
     }
 }
 Toolbar.prototype.classMapping = {