highcharts 10.0.0 → 10.1.0

package/es-modules/Core/Axis/Axis.js

@@ -20,7 +20,13 @@ import H from '../Globals.js';
 var deg2rad = H.deg2rad;
 import Tick from './Tick.js';
 import U from '../Utilities.js';
-var arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, error = U.error, extend = U.extend, fireEvent = U.fireEvent, getMagnitude = U.getMagnitude, isArray = U.isArray, isNumber = U.isNumber, isString = U.isString, merge = U.merge, normalizeTickInterval = U.normalizeTickInterval, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout;
+var arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, error = U.error, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isNumber = U.isNumber, isString = U.isString, merge = U.merge, normalizeTickInterval = U.normalizeTickInterval, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout;
+var getNormalizedTickInterval = function (axis, tickInterval) { return normalizeTickInterval(tickInterval, void 0, void 0, pick(axis.options.allowDecimals, 
+// If the tick interval is greather than 0.5, avoid decimals, as
+// linear axes are often used to render discrete values (#3363). If
+// a tick amount is set, allow decimals by default, as it increases
+// the chances for a good fit.
+tickInterval < 0.5 || axis.tickAmount !== void 0), !!axis.tickAmount); };
 /* *
  *
  *  Class
@@ -1280,15 +1286,9 @@ var Axis = /** @class */ (function () {
         if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
             axis.tickInterval = minTickInterval;
         }
-        // for linear axes, get magnitude and normalize the interval
+        // For linear axes, normalize the interval
         if (!axis.dateTime && !axis.logarithmic && !tickIntervalOption) {
-            axis.tickInterval = normalizeTickInterval(axis.tickInterval, void 0, getMagnitude(axis.tickInterval), pick(options.allowDecimals, 
-            // If the tick interval is greather than 0.5, avoid
-            // decimals, as linear axes are often used to render
-            // discrete values. #3363. If a tick amount is set, allow
-            // decimals by default, as it increases the chances for a
-            // good fit.
-            axis.tickInterval < 0.5 || this.tickAmount !== void 0), !!this.tickAmount);
+            axis.tickInterval = getNormalizedTickInterval(axis, axis.tickInterval);
         }
         // Prevent ticks from getting so close that we can't draw the labels
         if (!this.tickAmount) {
@@ -1365,7 +1365,21 @@ var Axis = /** @class */ (function () {
                 tickPositions = axis.logarithmic.getLogTickPositions(this.tickInterval, this.min, this.max);
             }
             else {
-                tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                var startingTickInterval = this.tickInterval;
+                var adjustedTickInterval = startingTickInterval;
+                while (adjustedTickInterval <= startingTickInterval * 2) {
+                    tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
+                    // If there are more tick positions than the set tickAmount,
+                    // increase the tickInterval and continue until it fits.
+                    // (#17100)
+                    if (this.tickAmount &&
+                        tickPositions.length > this.tickAmount) {
+                        this.tickInterval = getNormalizedTickInterval(this, adjustedTickInterval *= 1.1);
+                    }
+                    else {
+                        break;
+                    }
+                }
             }
             // Too dense ticks, keep only the first and last (#4477)
             if (tickPositions.length > this.len) {
@@ -1666,11 +1680,6 @@ var Axis = /** @class */ (function () {
                     }
                 }
                 adjustExtremes();
-                // We have too many ticks, run second pass to try to reduce ticks
-            }
-            else if (currentTickAmount > tickAmount) {
-                axis.tickInterval *= 2;
-                axis.setTickPositions();
             }
             // The finalTickAmt property is set in getTickAmount
             if (defined(finalTickAmt)) {
@@ -2509,18 +2518,18 @@ var Axis = /** @class */ (function () {
         // The part of a multiline text that is below the baseline of the
         // first line. Subtract 1 to preserve pixel-perfectness from the
         // old behaviour (v5.0.12), where only one line was allowed.
-        textHeightOvershoot = Math.max(axisTitle.getBBox(null, 0).height - fontMetrics.h - 1, 0), 
+        textHeightOvershoot = axisTitle ? Math.max(axisTitle.getBBox(false, 0).height - fontMetrics.h - 1, 0) : 0, 
         // the position in the length direction of the axis
-        alongAxis = {
+        alongAxis = ({
             low: margin + (horiz ? 0 : axisLength),
             middle: margin + axisLength / 2,
             high: margin + (horiz ? axisLength : 0)
-        }[axisTitleOptions.align], 
+        })[axisTitleOptions.align], 
         // the position in the perpendicular direction of the axis
         offAxis = (horiz ? axisTop + this.height : axisLeft) +
             (horiz ? 1 : -1) * // horizontal axis reverses the margin
                 (opposite ? -1 : 1) * // so does opposite axes
-                this.axisTitleMargin +
+                (this.axisTitleMargin || 0) +
             [
                 -textHeightOvershoot,
                 textHeightOvershoot,
@@ -2722,14 +2731,8 @@ var Axis = /** @class */ (function () {
         }
         if (axisTitle && showAxis) {
             var titleXy = axis.getTitlePosition();
-            if (isNumber(titleXy.y)) {
-                axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
-                axisTitle.isNew = false;
-            }
-            else {
-                axisTitle.attr('y', -9999);
-                axisTitle.isNew = true;
-            }
+            axisTitle[axisTitle.isNew ? 'attr' : 'animate'](titleXy);
+            axisTitle.isNew = false;
         }
         // Stacked totals:
         if (stackLabelOptions && stackLabelOptions.enabled && axis.stacking) {

package/es-modules/Core/Axis/GridAxis.js

@@ -357,7 +357,7 @@ var GridAxis;
                         });
                     }
                     // show or hide the line depending on options.showEmpty
-                    axis.axisLine[axis.showAxis ? 'show' : 'hide'](true);
+                    axis.axisLine[axis.showAxis ? 'show' : 'hide']();
                 }
             }
             (grid && grid.columns || []).forEach(function (column) {
@@ -951,7 +951,10 @@ dateFormats.E = function (timestamp) {
 };
 // Adds week date format
 dateFormats.W = function (timestamp) {
-    var d = new this.Date(timestamp);
+    var time = this, d = new this.Date(timestamp), unitsToOmit = ['Hours', 'Milliseconds', 'Minutes', 'Seconds'];
+    unitsToOmit.forEach(function (format) {
+        time.set(format, d, 0);
+    });
     var firstDay = (this.get('Day', d) + 6) % 7;
     var thursday = new this.Date(d.valueOf());
     this.set('Date', thursday, this.get('Date', d) - firstDay + 3);

package/es-modules/Core/Axis/LogarithmicAxis.js

@@ -172,7 +172,7 @@ var LogarithmicAxis;
                     axisLength;
                 interval = pick(filteredTickIntervalOption, log.minorAutoInterval, (realMax - realMin) *
                     tickPixelIntervalOption / (totalPixelLength || 1));
-                interval = normalizeTickInterval(interval, void 0, getMagnitude(interval));
+                interval = normalizeTickInterval(interval);
                 positions = axis.getLinearTickPositions(interval, realMin, realMax).map(log.log2lin);
                 if (!minor) {
                     log.minorAutoInterval = interval / 5;

package/es-modules/Core/Axis/OrdinalAxis.js

@@ -407,9 +407,10 @@ var OrdinalAxis;
             // how many ordinal units did we move?
             movedUnits = (mouseDownX - chartX) / pointPixelWidth, 
             // get index of all the chart's points
-            extendedAxis = {
+            extendedOrdinalPositions = xAxis.ordinal.getExtendedPositions(), extendedAxis = {
                 ordinal: {
-                    positions: xAxis.ordinal.getExtendedPositions()
+                    positions: extendedOrdinalPositions,
+                    extendedOrdinalPositions: extendedOrdinalPositions
                 }
             }, index2val_1 = xAxis.index2val, val2lin_1 = xAxis.val2lin;
             var trimmedRange = void 0, ordinalPositions = void 0, searchAxisLeft = void 0, searchAxisRight = void 0;

package/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBand.js

@@ -145,7 +145,7 @@ var PlotLineOrBand = /** @class */ (function () {
         }
         else if (svgElem) {
             if (path) {
-                svgElem.show(true);
+                svgElem.show();
                 svgElem.animate({ d: path });
             }
             else if (svgElem.d) {

package/es-modules/Core/Axis/StackingAxis.js

@@ -185,7 +185,6 @@ var StackingAxis;
                 renderer
                     .g('stack-labels')
                     .attr({
-                    visibility: 'visible',
                     zIndex: 6,
                     opacity: 0
                 })

package/es-modules/Core/Axis/Tick.js

@@ -647,11 +647,11 @@ var Tick = /** @class */ (function () {
             // Set the new position, and show or hide
             if (show && isNumber(xy.y)) {
                 xy.opacity = opacity;
-                label[tick.isNewLabel ? 'attr' : 'animate'](xy);
+                label[tick.isNewLabel ? 'attr' : 'animate'](xy).show(true);
                 tick.isNewLabel = false;
             }
             else {
-                label.attr('y', -9999); // #1338
+                label.hide(); // #1338, #15863
                 tick.isNewLabel = true;
             }
         }

package/es-modules/Core/Chart/Chart.js

@@ -29,7 +29,7 @@ import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
 import Time from '../Time.js';
 import U from '../Utilities.js';
 import AST from '../Renderer/HTML/AST.js';
-var addEvent = U.addEvent, attr = U.attr, cleanRecursively = U.cleanRecursively, createElement = U.createElement, css = U.css, defined = U.defined, discardElement = U.discardElement, erase = U.erase, error = U.error, extend = U.extend, find = U.find, fireEvent = U.fireEvent, getStyle = U.getStyle, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
+var addEvent = U.addEvent, attr = U.attr, cleanRecursively = U.cleanRecursively, createElement = U.createElement, css = U.css, defined = U.defined, discardElement = U.discardElement, erase = U.erase, error = U.error, extend = U.extend, find = U.find, fireEvent = U.fireEvent, getStyle = U.getStyle, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, relativeLength = U.relativeLength, removeEvent = U.removeEvent, splat = U.splat, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
 /* *
  *
  *  Class
@@ -1943,9 +1943,27 @@ var Chart = /** @class */ (function () {
         if (defined(this.index)) {
             this.setReflow(this.options.chart.reflow);
         }
+        this.warnIfA11yModuleNotLoaded();
         // Don't run again
         this.hasLoaded = true;
     };
+    /**
+     * Emit console warning if the a11y module is not loaded.
+     */
+    Chart.prototype.warnIfA11yModuleNotLoaded = function () {
+        var _this = this;
+        setTimeout(function () {
+            var opts = _this && _this.options;
+            if (opts && !_this.accessibility &&
+                !(opts.accessibility && opts.accessibility.enabled === false)) {
+                error('Highcharts warning: Consider including the ' +
+                    '"accessibility.js" module to make your chart more ' +
+                    'usable for people with disabilities. Set the ' +
+                    '"accessibility.enabled" option to false to remove this ' +
+                    'warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.', false, _this);
+            }
+        }, 100);
+    };
     /**
      * Add a series to the chart after render time. Note that this method should
      * never be used when adding data synchronously at chart render time, as it
@@ -2494,7 +2512,7 @@ var Chart = /** @class */ (function () {
      * @emits Highcharts.Chart#event:beforeShowResetZoom
      */
     Chart.prototype.showResetZoom = function () {
-        var chart = this, lang = defaultOptions.lang, btnOptions = chart.options.chart.resetZoomButton, theme = btnOptions.theme, states = theme.states, alignTo = (btnOptions.relativeTo === 'chart' ||
+        var chart = this, lang = defaultOptions.lang, btnOptions = chart.options.chart.resetZoomButton, theme = btnOptions.theme, alignTo = (btnOptions.relativeTo === 'chart' ||
             btnOptions.relativeTo === 'spacingBox' ?
             null :
             'scrollablePlotBox');
@@ -2506,7 +2524,7 @@ var Chart = /** @class */ (function () {
         }
         fireEvent(this, 'beforeShowResetZoom', null, function () {
             chart.resetZoomButton = chart.renderer
-                .button(lang.resetZoom, null, null, zoomOut, theme, states && states.hover)
+                .button(lang.resetZoom, null, null, zoomOut, theme)
                 .attr({
                 align: btnOptions.position.align,
                 title: lang.resetZoomTitle

package/es-modules/Core/Chart/ChartDefaults.js

@@ -484,6 +484,17 @@ var ChartDefaults = {
      * @since      5.0.0
      */
     colorCount: 10,
+    /**
+     * By default, (because of memory and performance reasons) the chart does
+     * not copy the data but keeps it as a reference. In some cases, this might
+     * result in mutating the original data source. In order to prevent that,
+     * set that property to false. Please note that changing that might decrease
+     * performance, especially with bigger sets of data.
+     *
+     * @type       {boolean}
+     * @since 10.1.0
+     */
+    allowMutatingData: true,
     /**
      * Alias of `type`.
      *

package/es-modules/Core/Chart/StockChart.js

@@ -562,7 +562,7 @@ addEvent(Axis, 'afterDrawCrosshair', function (event) {
         text: text,
         x: posx,
         y: posy,
-        visibility: isInside ? 'visible' : 'hidden'
+        visibility: isInside ? 'inherit' : 'hidden'
     });
     crossBox = crossLabel.getBBox();
     // now it is placed we can correct its position

package/es-modules/Core/DefaultOptions.js

@@ -1917,18 +1917,20 @@ var defaultOptions = {
          * @apioption tooltip.pointFormatter
          */
         /**
-         * A callback function to place the tooltip in a default position. The
+         * A callback function to place the tooltip in a custom position. The
          * callback receives three parameters: `labelWidth`, `labelHeight` and
          * `point`, where point contains values for `plotX` and `plotY` telling
          * where the reference point is in the plot area. Add `chart.plotLeft`
          * and `chart.plotTop` to get the full coordinates.
          *
+         * To find the actual hovered `Point` instance, use
+         * `this.chart.hoverPoint`. For shared or split tooltips, all the hover
+         * points are available in `this.chart.hoverPoints`.
+         *
          * Since v7, when [tooltip.split](#tooltip.split) option is enabled,
          * positioner is called for each of the boxes separately, including
          * xAxis header. xAxis header is not a point, instead `point` argument
-         * contains info:
-         * `{ plotX: Number, plotY: Number, isHeader: Boolean }`
-         *
+         * contains info: `{ plotX: Number, plotY: Number, isHeader: Boolean }`
          *
          * The return should be an object containing x and y values, for example
          * `{ x: 100, y: 100 }`.

package/es-modules/Core/Globals.js

@@ -23,7 +23,7 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.0.0', Globals.win = (typeof window !== 'undefined' ?
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.1.0', Globals.win = (typeof window !== 'undefined' ?
         window :
         {}), // eslint-disable-line node/no-unsupported-features/es-builtins
     Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&

package/es-modules/Core/Legend/Legend.js

@@ -1010,7 +1010,7 @@ var Legend = /** @class */ (function () {
             this.nav.attr({
                 translateX: padding,
                 translateY: clipHeight + this.padding + 7 + this.titleHeight,
-                visibility: 'visible'
+                visibility: 'inherit'
             });
             [this.up, this.upTracker].forEach(function (elem) {
                 elem.attr({

package/es-modules/Core/Navigator.js

@@ -904,7 +904,7 @@ var Navigator = /** @class */ (function () {
         zoomedMin = Math.round(navigator.zoomedMin);
         if (navigatorEnabled) {
             navigator.navigatorGroup.attr({
-                visibility: 'visible'
+                visibility: 'inherit'
             });
             // Place elements
             verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';

package/es-modules/Core/Renderer/HTML/AST.js

@@ -91,7 +91,9 @@ var AST = /** @class */ (function () {
                 valid = isString(val) && AST.allowedReferences.some(function (ref) { return val.indexOf(ref) === 0; });
             }
             if (!valid) {
-                error("Highcharts warning: Invalid attribute '" + key + "' in config");
+                error(33, false, void 0, {
+                    'Invalid attribute in config': "" + key
+                });
                 delete attributes[key];
             }
         });
@@ -101,9 +103,9 @@ var AST = /** @class */ (function () {
         return style
             .split(';')
             .reduce(function (styles, line) {
-            var pair = line.split(':').map(function (s) { return s.trim(); }), key = pair[0].replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-            if (pair[1]) {
-                styles[key] = pair[1];
+            var pair = line.split(':').map(function (s) { return s.trim(); }), key = pair.shift();
+            if (key && pair.length) {
+                styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
             }
             return styles;
         }, {});
@@ -203,8 +205,9 @@ var AST = /** @class */ (function () {
                         node = element;
                     }
                     else {
-                        error('Highcharts warning: Invalid tagName ' +
-                            tagName + ' in config');
+                        error(33, false, void 0, {
+                            'Invalid tagName in config': tagName
+                        });
                     }
                 }
                 // Add to the tree

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

@@ -1032,10 +1032,9 @@ var SVGElement = /** @class */ (function () {
      *         The bounding box with `x`, `y`, `width` and `height` properties.
      */
     SVGElement.prototype.getBBox = function (reload, rot) {
-        var wrapper = this, renderer = wrapper.renderer, element = wrapper.element, styles = wrapper.styles, textStr = wrapper.textStr, cache = renderer.cache, cacheKeys = renderer.cacheKeys, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
+        var wrapper = this, alignValue = wrapper.alignValue, element = wrapper.element, renderer = wrapper.renderer, styles = wrapper.styles, textStr = wrapper.textStr, cache = renderer.cache, cacheKeys = renderer.cacheKeys, isSVG = element.namespaceURI === wrapper.SVG_NS, rotation = pick(rot, wrapper.rotation, 0), fontSize = renderer.styledMode ? (element &&
             SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
-        var bBox, // = wrapper.bBox,
-        width, height, toggleTextShadowShim, cacheKey;
+        var bBox, width, height, toggleTextShadowShim, cacheKey;
         // Avoid undefined and null (#7316)
         if (defined(textStr)) {
             cacheKey = textStr.toString();
@@ -1052,6 +1051,7 @@ var SVGElement = /** @class */ (function () {
                 rotation,
                 fontSize,
                 wrapper.textWidth,
+                alignValue,
                 styles && styles.textOverflow,
                 styles && styles.fontWeight // #12163
             ].join(',');
@@ -1097,7 +1097,7 @@ var SVGElement = /** @class */ (function () {
                 // other condition is for Opera that returns a width of
                 // -Infinity on hidden elements.
                 if (!bBox || bBox.width < 0) {
-                    bBox = { width: 0, height: 0 };
+                    bBox = { x: 0, y: 0, width: 0, height: 0 };
                 }
                 // VML Renderer or useHTML within SVG
             }
@@ -1126,11 +1126,20 @@ var SVGElement = /** @class */ (function () {
                 }
                 // Adjust for rotated text
                 if (rotation) {
-                    var rad = rotation * deg2rad;
-                    bBox.width = Math.abs(height * Math.sin(rad)) +
-                        Math.abs(width * Math.cos(rad));
-                    bBox.height = Math.abs(height * Math.cos(rad)) +
-                        Math.abs(width * Math.sin(rad));
+                    var baseline = Number(element.getAttribute('y') || 0) - bBox.y, alignFactor = {
+                        'right': 1,
+                        'center': 0.5
+                    }[alignValue || 0] || 0, rad = rotation * deg2rad, rad90 = (rotation - 90) * deg2rad, wCosRad = width * Math.cos(rad), wSinRad = width * Math.sin(rad), cosRad90 = Math.cos(rad90), sinRad90 = Math.sin(rad90), 
+                    // Find the starting point on the left side baseline of
+                    // the text
+                    pX = bBox.x + alignFactor * (width - wCosRad), pY = bBox.y + baseline - alignFactor * wSinRad, 
+                    // Find all corners
+                    aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
+                    // Deduct the bounding box from the corners
+                    bBox.x = Math.min(aX, bX, cX, dX);
+                    bBox.y = Math.min(aY, bY, cY, dY);
+                    bBox.width = Math.max(aX, bX, cX, dX) - bBox.x;
+                    bBox.height = Math.max(aY, bY, cY, dY) - bBox.y;
                 }
             }
             // Cache it. When loading a chart in a hidden iframe in Firefox and
@@ -1189,21 +1198,11 @@ var SVGElement = /** @class */ (function () {
      *
      * @function Highcharts.SVGElement#hide
      *
-     * @param {boolean} [hideByTranslation=false]
-     *        The flag to determine if element should be hidden by moving out
-     *        of the viewport. Used for example for dataLabels.
-     *
      * @return {Highcharts.SVGElement}
      *         Returns the SVGElement for chaining.
      */
-    SVGElement.prototype.hide = function (hideByTranslation) {
-        if (hideByTranslation) {
-            this.attr({ y: -9999 });
-        }
-        else {
-            this.attr({ visibility: 'hidden' });
-        }
-        return this;
+    SVGElement.prototype.hide = function () {
+        return this.attr({ visibility: 'hidden' });
     };
     /**
      * @private
@@ -1604,7 +1603,7 @@ var SVGElement = /** @class */ (function () {
      *
      * @function Highcharts.SVGElement#show
      *
-     * @param {boolean} [inherit=false]
+     * @param {boolean} [inherit=true]
      *        Set the visibility attribute to `inherit` rather than `visible`.
      *        The difference is that an element with `visibility="visible"`
      *        will be visible even if the parent is hidden.
@@ -1613,6 +1612,7 @@ var SVGElement = /** @class */ (function () {
      *         Returns the SVGElement for chaining.
      */
     SVGElement.prototype.show = function (inherit) {
+        if (inherit === void 0) { inherit = true; }
         return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
     };
     /**

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

@@ -193,7 +193,7 @@ var SVGRenderer = /** @class */ (function () {
         this.url = this.getReferenceURL();
         // Add description
         var desc = this.createElement('desc').add();
-        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.0.0'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 10.1.0'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -502,7 +502,7 @@ var SVGRenderer = /** @class */ (function () {
      * @param {Highcharts.SVGAttributes} [hoverState]
      * SVG attributes for the hover state.
      *
-     * @param {Highcharts.SVGAttributes} [pressedState]
+     * @param {Highcharts.SVGAttributes} [selectState]
      * SVG attributes for the pressed state.
      *
      * @param {Highcharts.SVGAttributes} [disabledState]
@@ -517,8 +517,11 @@ var SVGRenderer = /** @class */ (function () {
      * @return {Highcharts.SVGElement}
      * The button element.
      */
-    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, pressedState, disabledState, shape, useHTML) {
-        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode;
+    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, selectState, disabledState, shape, useHTML) {
+        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode, states = (theme && theme.states) || {};
+        if (theme) {
+            delete theme.states;
+        }
         var curState = 0, 
         // Make a copy of normalState (#13798)
         // (reference to options.rangeSelector.buttonTheme)
@@ -535,7 +538,7 @@ var SVGRenderer = /** @class */ (function () {
         label.attr(merge({ padding: 8, r: 2 }, normalState));
         // Presentational. The string type is a mistake, it is just for
         // compliance with SVGAttribute and is not used in button theme.
-        var hoverStyle, pressedStyle, disabledStyle;
+        var hoverStyle, selectStyle, disabledStyle;
         if (!styledMode) {
             // Normal state - prepare the attributes
             normalState = merge({
@@ -546,25 +549,25 @@ var SVGRenderer = /** @class */ (function () {
             // Hover state
             hoverState = merge(normalState, {
                 fill: "#e6e6e6" /* neutralColor10 */
-            }, AST.filterUserAttributes(hoverState || {}));
+            }, AST.filterUserAttributes(hoverState || states.hover || {}));
             hoverStyle = hoverState.style;
             delete hoverState.style;
             // Pressed state
-            pressedState = merge(normalState, {
+            selectState = merge(normalState, {
                 fill: "#e6ebf5" /* highlightColor10 */,
                 style: {
                     color: "#000000" /* neutralColor100 */,
                     fontWeight: 'bold'
                 }
-            }, AST.filterUserAttributes(pressedState || {}));
-            pressedStyle = pressedState.style;
-            delete pressedState.style;
+            }, AST.filterUserAttributes(selectState || states.select || {}));
+            selectStyle = selectState.style;
+            delete selectState.style;
             // Disabled state
             disabledState = merge(normalState, {
                 style: {
                     color: "#cccccc" /* neutralColor20 */
                 }
-            }, AST.filterUserAttributes(disabledState || {}));
+            }, AST.filterUserAttributes(disabledState || states.disabled || {}));
             disabledStyle = disabledState.style;
             delete disabledState.style;
         }
@@ -595,13 +598,13 @@ var SVGRenderer = /** @class */ (function () {
                     .attr([
                     normalState,
                     hoverState,
-                    pressedState,
+                    selectState,
                     disabledState
                 ][state || 0]);
                 var css_1 = [
                     normalStyle,
                     hoverStyle,
-                    pressedStyle,
+                    selectStyle,
                     disabledStyle
                 ][state || 0];
                 if (isObject(css_1)) {

package/es-modules/Core/Renderer/SVG/SVGRenderer3D.js

@@ -165,7 +165,7 @@ var SVGRenderer3D = /** @class */ (function (_super) {
                 var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = shapeArea(vertexes2d);
                 hash.d = path;
                 hash.visibility = (this.enabled && area > 0) ?
-                    'visible' : 'hidden';
+                    'inherit' : 'hidden';
             }
             return SVGElement.prototype.attr.apply(this, arguments);
         };

package/es-modules/Core/Scrollbar.js

@@ -379,6 +379,8 @@ var Scrollbar = /** @class */ (function () {
     Scrollbar.prototype.position = function (x, y, width, height) {
         var scroller = this, options = scroller.options, vertical = options.vertical, method = scroller.rendered ? 'animate' : 'attr';
         var xOffset = height, yOffset = 0;
+        // Make the scrollbar visible when it is repositioned, #15763.
+        scroller.group.show();
         scroller.x = x;
         scroller.y = y + this.trackBorderWidth;
         scroller.width = width; // width with buttons
@@ -433,10 +435,12 @@ var Scrollbar = /** @class */ (function () {
      * @function Highcharts.Scrollbar#render
      */
     Scrollbar.prototype.render = function () {
-        var scroller = this, renderer = scroller.renderer, options = scroller.options, size = scroller.size, styledMode = scroller.chart.styledMode, group = renderer.g('scrollbar').attr({
-            zIndex: options.zIndex,
-            translateY: -99999
-        }).add();
+        var scroller = this, renderer = scroller.renderer, options = scroller.options, size = scroller.size, styledMode = scroller.chart.styledMode, group = renderer.g('scrollbar')
+            .attr({
+            zIndex: options.zIndex
+        })
+            .hide() // initially hide the scrollbar #15863
+            .add();
         // Draw the scrollbar group
         scroller.group = group;
         // Draw the scrollbar track:
@@ -558,7 +562,7 @@ var Scrollbar = /** @class */ (function () {
             scroller.scrollbarRifles.hide();
         }
         else {
-            scroller.scrollbarRifles.show(true);
+            scroller.scrollbarRifles.show();
         }
         // Show or hide the scrollbar based on the showFull setting
         if (options.showFull === false) {