highcharts 9.3.3 → 10.0.0

package/modules/drilldown.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.3.3 (2022-02-01)
+ * @license Highcharts JS v10.0.0 (2022-03-07)
  *
  * Highcharts Drilldown module
  *
@@ -7,7 +7,6 @@
  * License: www.highcharts.com/license
  *
  */
-'use strict';
 (function (factory) {
     if (typeof module === 'object' && module.exports) {
         factory['default'] = factory;
@@ -22,13 +21,950 @@
         factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
     }
 }(function (Highcharts) {
+    'use strict';
     var _modules = Highcharts ? Highcharts._modules : {};
     function _registerModule(obj, path, args, fn) {
         if (!obj.hasOwnProperty(path)) {
             obj[path] = fn.apply(null, args);
+
+            if (typeof CustomEvent === 'function') {
+                window.dispatchEvent(
+                    new CustomEvent(
+                        'HighchartsModuleLoaded',
+                        { detail: { path: path, module: obj[path] }
+                    })
+                );
+            }
         }
     }
-    _registerModule(_modules, 'Extensions/Drilldown.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Utilities.js']], function (A, Axis, Chart, Color, ColumnSeries, F, H, D, Point, Series, SeriesRegistry, SVGRenderer, Tick, U) {
+    _registerModule(_modules, 'Extensions/Breadcrumbs.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js'], _modules['Core/FormatUtilities.js']], function (Chart, H, D, U, F) {
+        /* *
+         *
+         *  Highcharts Breadcrumbs module
+         *
+         *  Authors: Grzegorz Blachlinski, Karol Kolodziej
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var defaultOptions = D.defaultOptions;
+        var format = F.format;
+        var addEvent = U.addEvent,
+            objectEach = U.objectEach,
+            extend = U.extend,
+            fireEvent = U.fireEvent,
+            merge = U.merge,
+            pick = U.pick,
+            defined = U.defined,
+            isString = U.isString;
+        // Add language support.
+        extend(defaultOptions.lang, 
+        /**
+         * @optionparent lang
+         */
+        {
+            /**
+             * @since 10.0.0
+             * @product  highcharts
+             */
+            mainBreadcrumb: 'Main'
+        });
+        /**
+         * The Breadcrumbs class
+         *
+         * @private
+         * @class
+         * @name Highcharts.Breadcrumbs
+         *
+         * @param {Highcharts.Chart} chart
+         *        Chart object
+         * @param {Highcharts.Options} userOptions
+         *        User options
+         */
+        var Breadcrumbs = /** @class */ (function () {
+                function Breadcrumbs(chart, userOptions) {
+                    /* *
+                     *
+                     * Properties
+                     *
+                     * */
+                    this.group = void 0;
+                this.list = [];
+                this.elementList = {};
+                this.isDirty = true;
+                this.level = 0;
+                this.options = void 0;
+                var chartOptions = merge(chart.options.drilldown &&
+                        chart.options.drilldown.drillUpButton,
+                    Breadcrumbs.defaultBreadcrumbsOptions,
+                    chart.options.navigation && chart.options.navigation.breadcrumbs,
+                    userOptions);
+                this.chart = chart;
+                this.options = chartOptions || {};
+            }
+            /**
+             * Update Breadcrumbs properties, like level and list.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#updateProperties
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.updateProperties = function (list) {
+                this.setList(list);
+                this.setLevel();
+                this.isDirty = true;
+            };
+            /**
+             * Set breadcrumbs list.
+             * @function Highcharts.Breadcrumbs#setList
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             * @param {Highcharts.BreadcrumbsOptions} list
+             *        Breadcrumbs list.
+             */
+            Breadcrumbs.prototype.setList = function (list) {
+                this.list = list;
+            };
+            /**
+             * Calcule level on which chart currently is.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#setLevel
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.setLevel = function () {
+                this.level = this.list.length && this.list.length - 1;
+            };
+            /**
+             * Get Breadcrumbs level
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#getLevel
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.getLevel = function () {
+                return this.level;
+            };
+            /**
+             * Default button text formatter.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#getButtonText
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             * @param {Highcharts.Breadcrumbs} breadcrumb
+             *        Breadcrumb.
+             * @return {string}
+             *         Formatted text.
+             */
+            Breadcrumbs.prototype.getButtonText = function (breadcrumb) {
+                var breadcrumbs = this,
+                    chart = breadcrumbs.chart,
+                    breadcrumbsOptions = breadcrumbs.options,
+                    lang = chart.options.lang,
+                    textFormat = pick(breadcrumbsOptions.format,
+                    breadcrumbsOptions.showFullPath ?
+                        '{level.name}' : '← {level.name}'),
+                    defaultText = lang && pick(lang.drillUpText,
+                    lang.mainBreadcrumb);
+                var returnText = breadcrumbsOptions.formatter &&
+                        breadcrumbsOptions.formatter(breadcrumb) ||
+                        format(textFormat, { level: breadcrumb.levelOptions },
+                    chart) || '';
+                if (((isString(returnText) &&
+                    !returnText.length) ||
+                    returnText === '← ') &&
+                    defined(defaultText)) {
+                    returnText = !breadcrumbsOptions.showFullPath ?
+                        '← ' + defaultText :
+                        defaultText;
+                }
+                return returnText;
+            };
+            /**
+             * Redraw.
+             *
+             * @requires  modules/breadcrums
+             *
+             * @function Highcharts.Breadcrumbs#redraw
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.redraw = function () {
+                if (this.isDirty) {
+                    this.render();
+                }
+                if (this.group) {
+                    this.group.align();
+                }
+                this.isDirty = false;
+            };
+            /**
+             * Create a group, then draw breadcrumbs together with the separators.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#render
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.render = function () {
+                var breadcrumbs = this,
+                    chart = breadcrumbs.chart,
+                    breadcrumbsOptions = breadcrumbs.options;
+                // A main group for the breadcrumbs.
+                if (!breadcrumbs.group && breadcrumbsOptions) {
+                    breadcrumbs.group = chart.renderer
+                        .g('breadcrumbs-group')
+                        .addClass('highcharts-no-tooltip highcharts-breadcrumbs')
+                        .attr({
+                        zIndex: breadcrumbsOptions.zIndex
+                    })
+                        .add();
+                }
+                // Draw breadcrumbs.
+                if (breadcrumbsOptions.showFullPath) {
+                    this.renderFullPathButtons();
+                }
+                else {
+                    this.renderSingleButton();
+                }
+                this.alignBreadcrumbsGroup();
+            };
+            /**
+             * Draw breadcrumbs together with the separators.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#renderFullPathButtons
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.renderFullPathButtons = function () {
+                // Make sure that only one type of button is visible.
+                this.destroySingleButton();
+                this.resetElementListState();
+                this.updateListElements();
+                this.destroyListElements();
+            };
+            /**
+             * Render Single button - when showFullPath is not used. The button is
+             * similar to the old drillUpButton
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#renderSingleButton
+             * @param {Highcharts.Breadcrumbs} this Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.renderSingleButton = function () {
+                var breadcrumbs = this,
+                    chart = breadcrumbs.chart,
+                    list = breadcrumbs.list,
+                    breadcrumbsOptions = breadcrumbs.options,
+                    buttonSpacing = breadcrumbsOptions.buttonSpacing;
+                // Make sure that only one type of button is visible.
+                this.destroyListElements();
+                // Draw breadcrumbs. Inital position for calculating the breadcrumbs
+                // group.
+                var posX = breadcrumbs.group ?
+                        breadcrumbs.group.getBBox().width :
+                        buttonSpacing,
+                    posY = buttonSpacing;
+                var previousBreadcrumb = list[list.length - 2];
+                if (!chart.drillUpButton && (this.level > 0)) {
+                    chart.drillUpButton = breadcrumbs.renderButton(previousBreadcrumb, posX, posY);
+                }
+                else if (chart.drillUpButton) {
+                    if (this.level > 0) {
+                        // Update button.
+                        this.updateSingleButton();
+                    }
+                    else {
+                        this.destroySingleButton();
+                    }
+                }
+            };
+            /**
+             * Update group position based on align and it's width.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#renderSingleButton
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.alignBreadcrumbsGroup = function (xOffset) {
+                var breadcrumbs = this;
+                if (breadcrumbs.group) {
+                    var breadcrumbsOptions = breadcrumbs.options,
+                        buttonTheme = breadcrumbsOptions.buttonTheme,
+                        positionOptions = breadcrumbsOptions.position,
+                        alignTo = (breadcrumbsOptions.relativeTo === 'chart' ||
+                            breadcrumbsOptions.relativeTo === 'spacingBox' ?
+                            void 0 :
+                            'scrollablePlotBox'),
+                        bBox = breadcrumbs.group.getBBox(),
+                        additionalSpace = 2 * (buttonTheme.padding || 0) +
+                            breadcrumbsOptions.buttonSpacing;
+                    // Store positionOptions
+                    positionOptions.width = bBox.width + additionalSpace;
+                    positionOptions.height = bBox.height + additionalSpace;
+                    var newPositions = merge(positionOptions);
+                    // Add x offset if specified.
+                    if (xOffset) {
+                        newPositions.x += xOffset;
+                    }
+                    newPositions.y = pick(newPositions.y, this.yOffset, 0);
+                    breadcrumbs.group.align(newPositions, true, alignTo);
+                }
+            };
+            /**
+             * Render a button.
+             *
+             * @requires  modules/breadcrums
+             *
+             * @function Highcharts.Breadcrumbs#renderButton
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             * @param {Highcharts.Breadcrumbs} breadcrumb
+             *        Current breadcrumb
+             * @param {Highcharts.Breadcrumbs} posX
+             *        Initial horizontal position
+             * @param {Highcharts.Breadcrumbs} posY
+             *        Initial vertical position
+             * @return {SVGElement|void}
+             *        Returns the SVG button
+             */
+            Breadcrumbs.prototype.renderButton = function (breadcrumb, posX, posY) {
+                var breadcrumbs = this,
+                    chart = this.chart,
+                    breadcrumbsOptions = breadcrumbs.options,
+                    buttonTheme = merge(breadcrumbsOptions.buttonTheme),
+                    states = buttonTheme.states;
+                delete buttonTheme.states;
+                var button = chart.renderer
+                        .button(breadcrumbs.getButtonText(breadcrumb),
+                    posX,
+                    posY,
+                    function (e) {
+                        // Extract events from button object and call
+                        var buttonEvents = breadcrumbsOptions.events &&
+                            breadcrumbsOptions.events.click;
+                    var callDefaultEvent;
+                    if (buttonEvents) {
+                        callDefaultEvent = buttonEvents.call(breadcrumbs, e, breadcrumb);
+                    }
+                    // (difference in behaviour of showFullPath and drillUp)
+                    if (callDefaultEvent !== false) {
+                        // For single button we are not going to the button
+                        // level, but the one level up
+                        if (!breadcrumbsOptions.showFullPath) {
+                            e.newLevel = breadcrumbs.level - 1;
+                        }
+                        else {
+                            e.newLevel = breadcrumb.level;
+                        }
+                        fireEvent(breadcrumbs, 'up', e);
+                    }
+                }, buttonTheme, states && states.hover, states && states.select, states && states.disabled)
+                    .addClass('highcharts-breadcrumbs-button')
+                    .add(breadcrumbs.group);
+                if (!chart.styledMode) {
+                    button.attr(breadcrumbsOptions.style);
+                }
+                return button;
+            };
+            /**
+             * Render a separator.
+             *
+             * @requires  modules/breadcrums
+             *
+             * @function Highcharts.Breadcrumbs#renderSeparator
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             * @param {Highcharts.Breadcrumbs} posX
+             *        Initial horizontal position
+             * @param {Highcharts.Breadcrumbs} posY
+             *        Initial vertical position
+             * @return {Highcharts.SVGElement}
+             *        Returns the SVG button
+             */
+            Breadcrumbs.prototype.renderSeparator = function (posX, posY) {
+                var breadcrumbs = this,
+                    chart = this.chart,
+                    breadcrumbsOptions = breadcrumbs.options,
+                    separatorOptions = breadcrumbsOptions.separator;
+                var separator = chart.renderer
+                        .label(separatorOptions.text,
+                    posX,
+                    posY,
+                    void 0,
+                    void 0,
+                    void 0,
+                    false)
+                        .addClass('highcharts-breadcrumbs-separator')
+                        .add(breadcrumbs.group);
+                if (!chart.styledMode) {
+                    separator.css(separatorOptions.style);
+                }
+                return separator;
+            };
+            /**
+             * Update.
+             * @function Highcharts.Breadcrumbs#update
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             * @param {Highcharts.BreadcrumbsOptions} options
+             *        Breadcrumbs class.
+             * @param {boolean} redraw
+             *        Redraw flag
+             */
+            Breadcrumbs.prototype.update = function (options) {
+                merge(true, this.options, options);
+                this.destroy();
+                this.isDirty = true;
+            };
+            /**
+             * Update button text when the showFullPath set to false.
+             * @function Highcharts.Breadcrumbs#updateSingleButton
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.updateSingleButton = function () {
+                var chart = this.chart,
+                    currentBreadcrumb = this.list[this.level - 1];
+                if (chart.drillUpButton) {
+                    chart.drillUpButton.attr({
+                        text: this.getButtonText(currentBreadcrumb)
+                    });
+                }
+            };
+            /**
+             * Destroy the chosen breadcrumbs group
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#destroy
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.destroy = function () {
+                this.destroySingleButton();
+                // Destroy elements one by one. It's necessary beacause
+                // g().destroy() does not remove added HTML
+                this.destroyListElements(true);
+                // Then, destroy the group itself.
+                if (this.group) {
+                    this.group.destroy();
+                }
+                this.group = void 0;
+            };
+            /**
+             * Destroy the elements' buttons and separators.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#destroyListElements
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.destroyListElements = function (force) {
+                var elementList = this.elementList;
+                objectEach(elementList, function (element, level) {
+                    if (force ||
+                        !elementList[level].updated) {
+                        element = elementList[level];
+                        element.button && element.button.destroy();
+                        element.separator && element.separator.destroy();
+                        delete element.button;
+                        delete element.separator;
+                        delete elementList[level];
+                    }
+                });
+                if (force) {
+                    this.elementList = {};
+                }
+            };
+            /**
+             * Destroy the single button if exists.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#destroySingleButton
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.destroySingleButton = function () {
+                if (this.chart.drillUpButton) {
+                    this.chart.drillUpButton.destroy();
+                    this.chart.drillUpButton = void 0;
+                }
+            };
+            /**
+             * Reset state for all buttons in elementList.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#resetElementListState
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.resetElementListState = function () {
+                objectEach(this.elementList, function (element) {
+                    element.updated = false;
+                });
+            };
+            /**
+             * Update rendered elements inside the elementList.
+             *
+             * @requires  modules/breadcrumbs
+             *
+             * @function Highcharts.Breadcrumbs#updateListElements
+             * @param {Highcharts.Breadcrumbs} this
+             *        Breadcrumbs class.
+             */
+            Breadcrumbs.prototype.updateListElements = function () {
+                var updateXPosition = function (element,
+                    spacing) {
+                        return element.getBBox().width + spacing;
+                }, breadcrumbs = this, elementList = breadcrumbs.elementList, buttonSpacing = breadcrumbs.options.buttonSpacing, list = breadcrumbs.list;
+                // Inital position for calculating the breadcrumbs group.
+                var posX = breadcrumbs.group ?
+                        updateXPosition(breadcrumbs.group,
+                    buttonSpacing) :
+                        buttonSpacing,
+                    posY = buttonSpacing,
+                    currentBreadcrumb;
+                list.forEach(function (breadcrumb, index) {
+                    var isLast = index === list.length - 1;
+                    var button,
+                        separator;
+                    if (elementList[breadcrumb.level]) {
+                        currentBreadcrumb = elementList[breadcrumb.level];
+                        button = currentBreadcrumb.button;
+                        // Render a separator if it was not created before.
+                        if (!currentBreadcrumb.separator &&
+                            !isLast) {
+                            // Add spacing for the next separator
+                            posX += buttonSpacing;
+                            currentBreadcrumb.separator =
+                                breadcrumbs.renderSeparator(posX, posY);
+                            posX += updateXPosition(currentBreadcrumb.separator, buttonSpacing);
+                        }
+                        else if (currentBreadcrumb.separator &&
+                            isLast) {
+                            currentBreadcrumb.separator.destroy();
+                            delete currentBreadcrumb.separator;
+                        }
+                        elementList[breadcrumb.level].updated = true;
+                    }
+                    else {
+                        // Render a button.
+                        button = breadcrumbs.renderButton(breadcrumb, posX, posY);
+                        posX += updateXPosition(button, buttonSpacing);
+                        // Render a separator.
+                        if (!isLast) {
+                            separator = breadcrumbs.renderSeparator(posX, posY);
+                            posX += updateXPosition(separator, buttonSpacing);
+                        }
+                        elementList[breadcrumb.level] = {
+                            button: button,
+                            separator: separator,
+                            updated: true
+                        };
+                    }
+                    if (button) {
+                        button.setState(isLast ? 2 : 0);
+                    }
+                });
+            };
+            /**
+             * Options for breadcrumbs. Breadcrumbs general options are defined in
+             * `navigation.breadcrumbs`. Specific options for drilldown are set in
+             * `drilldown.breadcrumbs` and for tree-like series traversing, in
+             * `plotOptions[series].breadcrumbs`.
+             *
+             * @since 10.0.0
+             * @product highcharts
+             * @optionparent navigation.breadcrumbs
+             */
+            Breadcrumbs.defaultBreadcrumbsOptions = {
+                /**
+                 * A collection of attributes for the buttons. The object takes SVG
+                 * attributes like `fill`, `stroke`, `stroke-width`, as well as `style`,
+                 * a collection of CSS properties for the text.
+                 *
+                 * The object can also be extended with states, so you can set
+                 * presentational options for `hover`, `select` or `disabled` button
+                 * states.
+                 *
+                 * @sample {highcharts} highcharts/breadcrumbs/single-button
+                 *         Themed, single button
+                 *
+                 * @type       {Highcharts.SVGAttributes}
+                 * @since 10.0.0
+                 * @product    highcharts
+                 */
+                buttonTheme: {
+                    /** @ignore */
+                    fill: 'none',
+                    /** @ignore */
+                    height: 18,
+                    /** @ignore */
+                    padding: 2,
+                    /** @ignore */
+                    'stroke-width': 0,
+                    /** @ignore */
+                    zIndex: 7,
+                    /** @ignore */
+                    states: {
+                        select: {
+                            fill: 'none'
+                        }
+                    },
+                    style: {
+                        color: "#335cad" /* highlightColor80 */
+                    }
+                },
+                /**
+                 * The default padding for each button and separator in each direction.
+                 *
+                 * @type      {number}
+                 * @since 10.0.0
+                 */
+                buttonSpacing: 5,
+                /**
+                 * Fires when clicking on the breadcrumbs button. Two arguments are
+                 * passed to the function. First breadcrumb button as an SVG element.
+                 * Second is the breadcrumbs class, containing reference to the chart,
+                 * series etc.
+                 *
+                 * ```js
+                 * click: function(button, breadcrumbs) {
+                 *   console.log(button);
+                 * }
+                 * ```
+                 *
+                 * Return false to stop default buttons click action.
+                 *
+                 * @type      {Highcharts.BreadcrumbsClickCallbackFunction}
+                 * @since 10.0.0
+                 * @apioption navigation.breadcrumbs.events.click
+                 */
+                /**
+                 * When the breadcrumbs are floating, the plot area will not move to
+                 * make space for it. By default, the chart will not make space for the
+                 * buttons. This property won't work when positioned in the middle.
+                 *
+                 * @sample highcharts/breadcrumbs/single-button
+                 *         Floating button
+                 * @type      {boolean}
+                 * @since 10.0.0
+                 */
+                floating: false,
+                /**
+                 * A format string for the breadcrumbs button. Variables are enclosed by
+                 * curly brackets. Available values are passed in the declared point
+                 * options.
+                 *
+                 * @type      {string|undefined}
+                 * @since 10.0.0
+                 * @default   undefined
+                 * @sample {highcharts} highcharts/breadcrumbs/format Display custom
+                 *          values in breadcrumb button.
+                 */
+                format: void 0,
+                /**
+                 * Callback function to format the breadcrumb text from scratch.
+                 *
+                 * @type      {Highcharts.BreadcrumbsFormatterCallbackFunction}
+                 * @since 10.0.0
+                 * @default   undefined
+                 * @apioption navigation.breadcrumbs.formatter
+                 */
+                /**
+                 * What box to align the button to. Can be either `plotBox` or
+                 * `spacingBox`.
+                 *
+                 * @type       {Highcharts.ButtonRelativeToValue}
+                 * @default    plotBox
+                 * @since 10.0.0
+                 * @product    highcharts highmaps
+                 */
+                relativeTo: 'plotBox',
+                /**
+                 * Positioning for the button row. The breadcrumbs buttons will be
+                 * aligned properly for the default chart layout (title,  subtitle,
+                 * legend, range selector) for the custom chart layout set the position
+                 * properties.
+                 * @type       {Highcharts.BreadcrumbsAlignOptions}
+                 * @since 10.0.0
+                 * @product    highcharts highmaps
+                 * @sample     {highcharts} highcharts/breadcrumbs/single-button
+                 *             Single, right aligned button
+                 */
+                position: {
+                    /**
+                     * Horizontal alignment of the breadcrumbs buttons.
+                     *
+                     * @type {Highcharts.AlignValue}
+                     */
+                    align: 'left',
+                    /**
+                     * Vertical alignment of the breadcrumbs buttons.
+                     *
+                     * @type {Highcharts.VerticalAlignValue}
+                     */
+                    verticalAlign: 'top',
+                    /**
+                     * The X offset of the breadcrumbs button group.
+                     *
+                     * @type {number}
+                     */
+                    x: 0,
+                    /**
+                     * The Y offset of the breadcrumbs button group. When `undefined`,
+                     * and `floating` is `false`, the `y` position is adapted so that
+                     * the breadcrumbs are rendered outside the target area.
+                     *
+                     * @type {number|undefined}
+                     */
+                    y: void 0
+                },
+                /**
+                 * Options object for Breadcrumbs separator.
+                 *
+                 * @since 10.0.0
+                 */
+                separator: {
+                    /**
+                     * @type {string}
+                     * @since 10.0.0
+                     * @product highcharts
+                     */
+                    text: '/',
+                    /**
+                     * CSS styles for the breadcrumbs separator.
+                     *
+                     * In styled mode, the breadcrumbs separators are styled by the
+                     * `.highcharts-separator` rule with its different states.
+                     *  @type {Highcharts.CSSObject}
+                     *  @since 10.0.0
+                     */
+                    style: {
+                        color: "#666666" /* neutralColor60 */
+                    }
+                },
+                /**
+                 * Show full path or only a single button.
+                 *
+                 * @type      {boolean}
+                 * @since 10.0.0
+                 * @sample {highcharts} highcharts/breadcrumbs/single-button
+                 *          Single, styled button
+                 */
+                showFullPath: true,
+                /**
+                 * CSS styles for all breadcrumbs.
+                 *
+                 * In styled mode, the breadcrumbs buttons are styled by the
+                 * `.highcharts-breadcrumbs-buttons .highcharts-button` rule with its
+                 * different states.
+                 *  @type {Highcharts.SVGAttributes}
+                 *  @since 10.0.0
+                 */
+                style: {},
+                /**
+                 * Whether to use HTML to render the breadcrumbs items texts.
+                 *
+                 * @type      {boolean}
+                 * @since 10.0.0
+                 */
+                useHTML: false,
+                /**
+                 * The z index of the breadcrumbs group.
+                 *
+                 * @type      {number}
+                 * @since 10.0.0
+                 */
+                zIndex: 7
+            };
+            return Breadcrumbs;
+        }());
+        /* eslint-disable no-invalid-this */
+        if (!H.Breadcrumbs) {
+            H.Breadcrumbs = Breadcrumbs;
+            // Logic for making space for the buttons above the plot area
+            addEvent(Chart, 'getMargins', function () {
+                var breadcrumbs = this.breadcrumbs;
+                if (breadcrumbs &&
+                    !breadcrumbs.options.floating &&
+                    breadcrumbs.level) {
+                    var breadcrumbsOptions = breadcrumbs.options,
+                        buttonTheme = breadcrumbsOptions.buttonTheme,
+                        breadcrumbsHeight = ((buttonTheme.height || 0) +
+                            2 * (buttonTheme.padding || 0) +
+                            breadcrumbsOptions.buttonSpacing),
+                        verticalAlign = breadcrumbsOptions.position.verticalAlign;
+                    if (verticalAlign === 'bottom') {
+                        this.marginBottom = (this.marginBottom || 0) + breadcrumbsHeight;
+                        breadcrumbs.yOffset = breadcrumbsHeight;
+                    }
+                    else if (verticalAlign !== 'middle') {
+                        this.plotTop += breadcrumbsHeight;
+                        breadcrumbs.yOffset = -breadcrumbsHeight;
+                    }
+                    else {
+                        breadcrumbs.yOffset = void 0;
+                    }
+                }
+            });
+            addEvent(Chart, 'redraw', function () {
+                this.breadcrumbs && this.breadcrumbs.redraw();
+            });
+            // Remove resize/afterSetExtremes at chart destroy
+            addEvent(Chart, 'destroy', function destroyEvents() {
+                if (this.breadcrumbs) {
+                    this.breadcrumbs.destroy();
+                    this.breadcrumbs = void 0;
+                }
+            });
+            // Shift the drillUpButton to make the space for resetZoomButton, #8095.
+            addEvent(Chart, 'afterShowResetZoom', function () {
+                var chart = this;
+                if (chart.breadcrumbs) {
+                    var bbox = chart.resetZoomButton &&
+                            chart.resetZoomButton.getBBox(),
+                        breadcrumbsOptions = chart.breadcrumbs.options;
+                    if (bbox &&
+                        breadcrumbsOptions.position.align === 'right' &&
+                        breadcrumbsOptions.relativeTo === 'plotBox') {
+                        chart.breadcrumbs.alignBreadcrumbsGroup(-bbox.width - breadcrumbsOptions.buttonSpacing);
+                    }
+                }
+            });
+            // After zooming out, shift the drillUpButton
+            // to the previous position, #8095.
+            addEvent(Chart, 'selection', function (event) {
+                if (event.resetSelection === true &&
+                    this.breadcrumbs) {
+                    this.breadcrumbs.alignBreadcrumbsGroup();
+                }
+            });
+        }
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        /* *
+         *
+         *  API Declarations
+         *
+         * */
+        /**
+         * Callback function to react on button clicks.
+         *
+         * @callback Highcharts.BreadcrumbsClickCallbackFunction
+         *
+         * @param {Highcharts.Event} event
+         * Event.
+         *
+         * @param {Highcharts.BreadcrumbOptions} options
+         * Breadcrumb options.
+         *
+         * @param {global.Event} e
+         * Event arguments.
+         */
+        /**
+         * Callback function to format the breadcrumb text from scratch.
+         *
+         * @callback Highcharts.BreadcrumbsFormatterCallbackFunction
+         *
+         * @param {Highcharts.Event} event
+         * Event.
+         *
+         * @param {Highcharts.BreadcrumbOptions} options
+         * Breadcrumb options.
+         *
+         * @return {string}
+         * Formatted text or false
+         */
+        /**
+         * Options for the one breadcrumb.
+         *
+         * @interface Highcharts.BreadcrumbOptions
+         */
+        /**
+         * Level connected to a specific breadcrumb.
+         * @name Highcharts.BreadcrumbOptions#level
+         * @type {number}
+         */
+        /**
+         * Options for series or point connected to a specific breadcrumb.
+         * @name Highcharts.BreadcrumbOptions#levelOptions
+         * @type {SeriesOptions|PointOptionsObject}
+         */
+        /**
+         * Options for aligning breadcrumbs group.
+         *
+         * @interface Highcharts.BreadcrumbsAlignOptions
+         */
+        /**
+         * Align of a Breadcrumb group.
+         * @default right
+         * @name Highcharts.BreadcrumbsAlignOptions#align
+         * @type {AlignValue}
+         */
+        /**
+         * Vertical align of a Breadcrumb group.
+         * @default top
+         * @name Highcharts.BreadcrumbsAlignOptions#verticalAlign
+         * @type {VerticalAlignValue}
+         */
+        /**
+         * X offset of a Breadcrumbs group.
+         * @name Highcharts.BreadcrumbsAlignOptions#x
+         * @type {number}
+         */
+        /**
+         * Y offset of a Breadcrumbs group.
+         * @name Highcharts.BreadcrumbsAlignOptions#y
+         * @type {number}
+         */
+        /**
+         * Options for all breadcrumbs.
+         *
+         * @interface Highcharts.BreadcrumbsOptions
+         */
+        /**
+         * Button theme.
+         * @name Highcharts.BreadcrumbsOptions#buttonTheme
+         * @type { SVGAttributes | undefined }
+         */
+        (''); // Keeps doclets above in JS file
+
+        return Breadcrumbs;
+    });
+    _registerModule(_modules, 'Extensions/Drilldown.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Axis/Axis.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Color/Color.js'], _modules['Series/Column/ColumnSeries.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Series/Point.js'], _modules['Core/Series/Series.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Utilities.js'], _modules['Extensions/Breadcrumbs.js']], function (A, Axis, Chart, Color, ColumnSeries, F, H, D, Point, Series, SeriesRegistry, SVGRenderer, Tick, U, Breadcrumbs) {
         /* *
          *
          *  Highcharts Drilldown module
@@ -174,18 +1110,20 @@
          * @optionparent lang
          */
         {
-            /**
-             * The text for the button that appears when drilling down, linking back
-             * to the parent series. The parent series' name is inserted for
-             * `{series.name}`.
-             *
-             * @since    3.0.8
-             * @product  highcharts highmaps
-             * @requires modules/drilldown
-             *
-             * @private
-             */
-            drillUpText: '◁ Back to {series.name}'
+        /**
+         * The text for the button that appears when drilling down, linking back
+         * to the parent series. The parent series' name is inserted for
+         * `{series.name}`.
+         *
+         * @since    3.0.8
+         * @product  highcharts highmaps
+         * @requires modules/drilldown
+         * @apioption lang.drillUpText
+         *
+         * @deprecated
+         *
+         * @private
+         */
         });
         /**
          * Options for drill down, the concept of inspecting increasingly high
@@ -217,6 +1155,15 @@
              * @product   highcharts
              * @apioption drilldown.allowPointDrilldown
              */
+            /**
+             * Options for the breadcrumbs, the navigation at the top leading the way
+             * up through the drilldown levels.
+             *
+             * @since 10.0.0
+             * @product   highcharts
+             * @extends   navigation.breadcrumbs
+             * @optionparent drilldown.breadcrumbs
+             */
             /**
              * An array of series configurations for the drill down. Each series
              * configuration uses the same syntax as the [series](#series) option set.
@@ -303,17 +1250,23 @@
                 duration: 500
             },
             /**
+             *
              * Options for the drill up button that appears when drilling down on a
              * series. The text for the button is defined in
              * [lang.drillUpText](#lang.drillUpText).
              *
-             * @sample {highcharts} highcharts/drilldown/drillupbutton/
-             *         Drill up button
-             * @sample {highmaps} highcharts/drilldown/drillupbutton/
-             *         Drill up button
+             * This option is deprecated since 9.3.2, use `drilldown.breadcrumbs`
+             * instead.
+             *
+             * @sample highcharts/breadcrumbs/single-button
+             *         Breadcrumbs set up like a legacy button
+             * @sample {highcharts} highcharts/drilldown/drillupbutton/ Drill up button
+             * @sample {highmaps} highcharts/drilldown/drillupbutton/ Drill up button
              *
              * @since   3.0.8
              * @product highcharts highmaps
+             *
+             * @deprecated
              */
             drillUpButton: {
                 /**
@@ -610,50 +1563,51 @@
                 delete this.resetZoomButton;
             }
             this.pointer.reset();
-            this.redraw();
-            this.showDrillUpButton();
             fireEvent(this, 'afterDrilldown');
+            this.redraw();
+            fireEvent(this, 'afterApplyDrilldown');
         };
-        Chart.prototype.getDrilldownBackText = function () {
-            var drilldownLevels = this.drilldownLevels,
-                lastLevel;
-            if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
-                lastLevel = drilldownLevels[drilldownLevels.length - 1];
-                lastLevel.series = lastLevel.seriesOptions;
-                return format(this.options.lang.drillUpText || '', lastLevel);
-            }
-        };
-        Chart.prototype.showDrillUpButton = function () {
-            var chart = this,
-                backText = this.getDrilldownBackText(),
-                buttonOptions = chart.options.drilldown.drillUpButton,
-                attr,
-                states,
-                alignTo = (buttonOptions.relativeTo === 'chart' ||
-                    buttonOptions.relativeTo === 'spacingBox' ?
-                    null :
-                    'scrollablePlotBox');
-            if (!this.drillUpButton) {
-                attr = buttonOptions.theme;
-                states = attr && attr.states;
-                this.drillUpButton = this.renderer
-                    .button(backText, null, null, function () {
-                    chart.drillUp();
-                }, attr, states && states.hover, states && states.select)
-                    .addClass('highcharts-drillup-button')
-                    .attr({
-                    align: buttonOptions.position.align,
-                    zIndex: 7
-                })
-                    .add()
-                    .align(buttonOptions.position, false, alignTo);
-            }
-            else {
-                this.drillUpButton.attr({
-                    text: backText
-                })
-                    .align();
+        /**
+         * This method creates an array of arrays containing a level number
+         * with the corresponding series/point.
+         *
+         * @requires  modules/breadcrumbs
+         *
+         * @private
+         * @param {Highcharts.Chart} chart
+         *        Highcharts Chart object.
+         * @return {Array<Breadcrumbs.BreadcrumbOptions>}
+         *        List for Highcharts Breadcrumbs.
+         */
+        var createBreadcrumbsList = function (chart) {
+                var list = [],
+            drilldownLevels = chart.drilldownLevels;
+            // The list is based on drilldown levels from the chart object
+            if (drilldownLevels && drilldownLevels.length) {
+                // Add the initial series as the first element.
+                if (!list[0]) {
+                    list.push({
+                        level: 0,
+                        levelOptions: drilldownLevels[0].seriesOptions
+                    });
+                }
+                var lastBreadcrumb_1 = list[list.length - 1];
+                drilldownLevels.forEach(function (level) {
+                    // If level is already added to breadcrumbs list,
+                    // don't add it again- drilling categories
+                    // + 1 because of the wrong levels numeration
+                    // in drilldownLevels array.
+                    if (level.levelNumber + 1 > lastBreadcrumb_1.level) {
+                        list.push({
+                            level: level.levelNumber + 1,
+                            levelOptions: merge({
+                                name: level.lowerSeries.name
+                            }, level.pointOptions)
+                        });
+                    }
+                });
             }
+            return list;
         };
         /**
          * When the chart is drilled down to a child series, calling `chart.drillUp()`
@@ -670,6 +1624,7 @@
             if (!this.drilldownLevels || this.drilldownLevels.length === 0) {
                 return;
             }
+            fireEvent(this, 'beforeDrillUp');
             var chart = this,
                 drilldownLevels = chart.drilldownLevels,
                 levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
@@ -696,6 +1651,7 @@
                     newSeries = addedSeries;
                 }
             };
+            var drilldownLevelsNumber = chart.drilldownLevels.length;
             while (i--) {
                 level = drilldownLevels[i];
                 if (level.levelNumber === levelNumber) {
@@ -715,12 +1671,19 @@
                         }
                     }
                     oldSeries.xData = []; // Overcome problems with minRange (#2898)
+                    // Reset the names to start new series from the beginning.
+                    // Do it once to preserve names when multiple
+                    // series are added for the same axis, #16135.
+                    if (oldSeries.xAxis &&
+                        oldSeries.xAxis.names &&
+                        (drilldownLevelsNumber === 0 || i === drilldownLevelsNumber)) {
+                        oldSeries.xAxis.names.length = 0;
+                    }
                     level.levelSeriesOptions.forEach(addSeries);
                     fireEvent(chart, 'drillup', {
                         seriesOptions: level.seriesPurgedOptions ||
                             level.seriesOptions
                     });
-                    this.resetZoomButton && this.resetZoomButton.destroy(); // #8095
                     if (newSeries.type === oldSeries.type) {
                         newSeries.drilldownLevel = level;
                         newSeries.options.animation =
@@ -741,30 +1704,46 @@
                     // it to the chart and show it.
                     if (level.resetZoomButton) {
                         chart.resetZoomButton = level.resetZoomButton;
-                        chart.resetZoomButton.show();
                     }
                 }
             }
+            fireEvent(chart, 'afterDrillUp');
             this.redraw();
-            if (this.drilldownLevels.length === 0) {
-                this.drillUpButton = this.drillUpButton.destroy();
-            }
-            else {
-                this.drillUpButton.attr({
-                    text: this.getDrilldownBackText()
-                })
-                    .align();
-            }
             this.ddDupes.length = []; // #3315
             // Fire a once-off event after all series have been drilled up (#5158)
             fireEvent(chart, 'drillupall');
         };
+        /**
+         * A function to fade in a group. First, the element is being hidden,
+         * then, using `opactiy`, is faded in. Used for example by `dataLabelsGroup`
+         * where simple SVGElement.fadeIn() is not enough, because of other features
+         * (e.g. InactiveState) using `opacity` to fadeIn/fadeOut.
+         *
+         * @requires module:modules/drilldown
+         *
+         * @param {undefined|SVGElement} [group]
+         * The SVG element to be faded in.
+         */
+        function fadeInGroup(group) {
+            var animationOptions = animObject(this.chart.options.drilldown.animation);
+            if (group) {
+                group.hide();
+                syncTimeout(function () {
+                    // Make sure neither the group, or the chart, were destroyed
+                    if (group && group.added) {
+                        group.fadeIn();
+                    }
+                }, Math.max(animationOptions.duration - 50, 0));
+            }
+        }
         /* eslint-disable no-invalid-this */
         // Add update function to be called internally from Chart.update
         // (#7600, #12855)
         addEvent(Chart, 'afterInit', function () {
             var chart = this;
             chart.drilldown = {
+                chart: chart,
+                fadeInGroup: fadeInGroup,
                 update: function (options, redraw) {
                     merge(true, chart.options.drilldown, options);
                     if (pick(redraw, true)) {
@@ -773,24 +1752,6 @@
                 }
             };
         });
-        // Shift the drillUpButton to make the space for resetZoomButton, #8095.
-        addEvent(Chart, 'afterShowResetZoom', function () {
-            var chart = this,
-                bbox = chart.resetZoomButton && chart.resetZoomButton.getBBox(),
-                buttonOptions = (chart.options.drilldown &&
-                    chart.options.drilldown.drillUpButton);
-            if (this.drillUpButton &&
-                bbox &&
-                buttonOptions &&
-                buttonOptions.position &&
-                buttonOptions.position.x) {
-                this.drillUpButton.align({
-                    x: buttonOptions.position.x - bbox.width - 10,
-                    y: buttonOptions.position.y,
-                    align: buttonOptions.position.align
-                }, false, buttonOptions.relativeTo || 'plotBox');
-            }
-        });
         addEvent(Chart, 'render', function () {
             (this.xAxis || []).forEach(function (axis) {
                 axis.ddPoints = {};
@@ -824,6 +1785,35 @@
                 objectEach(axis.ticks, Tick.prototype.drillable);
             });
         });
+        addEvent(H.Breadcrumbs, 'up', function (e) {
+            var chart = this.chart,
+                drillUpsNumber = this.getLevel() - e.newLevel;
+            for (var i = 0; i < drillUpsNumber; i++) {
+                chart.drillUp();
+            }
+        });
+        addEvent(Chart, 'afterDrilldown', function () {
+            var chart = this,
+                drilldownOptions = chart.options.drilldown,
+                breadcrumbsOptions = drilldownOptions && drilldownOptions.breadcrumbs;
+            if (!chart.breadcrumbs) {
+                chart.breadcrumbs = new Breadcrumbs(chart, breadcrumbsOptions);
+            }
+            chart.breadcrumbs.updateProperties(createBreadcrumbsList(chart));
+        });
+        addEvent(Chart, 'afterDrillUp', function () {
+            var chart = this;
+            chart.breadcrumbs &&
+                chart.breadcrumbs.updateProperties(createBreadcrumbsList(chart));
+        });
+        addEvent(Chart, 'update', function (e) {
+            var breadcrumbs = this.breadcrumbs,
+                breadcrumbOptions = e.options.drilldown &&
+                    e.options.drilldown.breadcrumbs;
+            if (breadcrumbs && breadcrumbOptions) {
+                breadcrumbs.update(e.options.drilldown.breadcrumbs);
+            }
+        });
         /**
          * When drilling up, keep the upper series invisible until the lower series has
          * moved into place.
@@ -916,10 +1906,10 @@
                             .attr(animateFrom)
                             .animate(extend(point.shapeArgs, { fill: point.color || series.color }), animationOptions);
                     }
-                    if (point.dataLabel) {
-                        point.dataLabel.fadeIn(animationOptions);
-                    }
                 });
+                if (chart.drilldown) {
+                    chart.drilldown.fadeInGroup(this.dataLabelsGroup);
+                }
                 // Reset to prototype
                 delete this.animate;
             }
@@ -1006,6 +1996,9 @@
                                     }))[animationOptions ? 'animate' : 'attr'](animateTo, animationOptions);
                                 }
                             });
+                            if (this.chart.drilldown) {
+                                this.chart.drilldown.fadeInGroup(this.dataLabelsGroup);
+                            }
                             // Reset to prototype
                             delete this.animate;
                         }
@@ -1239,24 +2232,16 @@
                 applyCursorCSS(this.series.halo, 'auto', false, styledMode);
             }
         });
-        // After zooming out, shift the drillUpButton to the previous position, #8095.
-        addEvent(Chart, 'selection', function (event) {
-            if (event.resetSelection === true && this.drillUpButton) {
-                var buttonOptions = (this.options.drilldown && this.options.drilldown.drillUpButton);
-                if (buttonOptions && buttonOptions.position) {
-                    this.drillUpButton.align({
-                        x: buttonOptions.position.x,
-                        y: buttonOptions.position.y,
-                        align: buttonOptions.position.align
-                    }, false, buttonOptions.relativeTo || 'plotBox');
-                }
-            }
-        });
         addEvent(Chart, 'drillup', function () {
             if (this.resetZoomButton) {
                 this.resetZoomButton = this.resetZoomButton.destroy();
             }
         });
+        addEvent(Chart, 'drillupall', function () {
+            if (this.resetZoomButton) {
+                this.showResetZoom();
+            }
+        });
 
     });
     _registerModule(_modules, 'masters/modules/drilldown.src.js', [], function () {