highcharts 10.0.0 → 10.2.1

package/modules/treegrid.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts Gantt JS v10.0.0 (2022-03-07)
+ * @license Highcharts Gantt JS v10.2.1 (2022-08-29)
  *
  * Tree Grid
  *
@@ -37,7 +37,7 @@
             }
         }
     }
-    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Extensions/Stacking.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
+    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Core/Axis/Stacking/StackItem.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
         /* *
          *
          *  (c) 2009-2021 Torstein Honsi
@@ -705,19 +705,49 @@
             pick = U.pick,
             timeUnits = U.timeUnits,
             wrap = U.wrap;
+        /* *
+         *
+         *  Enums
+         *
+         * */
+        /**
+         * Enum for which side the axis is on. Maps to axis.side.
+         * @private
+         */
+        var GridAxisSide;
+        (function (GridAxisSide) {
+            GridAxisSide[GridAxisSide["top"] = 0] = "top";
+            GridAxisSide[GridAxisSide["right"] = 1] = "right";
+            GridAxisSide[GridAxisSide["bottom"] = 2] = "bottom";
+            GridAxisSide[GridAxisSide["left"] = 3] = "left";
+        })(GridAxisSide || (GridAxisSide = {}));
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
         /* *
          *
          *  Functions
          *
          * */
-        /* eslint-disable require-jsdoc */
+        /**
+         * @private
+         */
         function argsToArray(args) {
             return Array.prototype.slice.call(args, 1);
         }
+        /**
+         * @private
+         */
         function isObject(x) {
             // Always use strict mode
             return U.isObject(x, true);
         }
+        /**
+         * @private
+         */
         function applyGridOptions(axis) {
             var options = axis.options;
             // Center-align by default
@@ -742,962 +772,925 @@
             options.labels.rotation = 0;
         }
         /**
-         * Axis with grid support.
+         * Extends axis class with grid support.
          * @private
          */
-        var GridAxis;
-        (function (GridAxis) {
-            /* *
-             *
-             *  Declarations
-             *
-             * */
-            /**
-             * Enum for which side the axis is on. Maps to axis.side.
-             * @private
-             */
-            var Side;
-            (function (Side) {
-                Side[Side["top"] = 0] = "top";
-                Side[Side["right"] = 1] = "right";
-                Side[Side["bottom"] = 2] = "bottom";
-                Side[Side["left"] = 3] = "left";
-            })(Side = GridAxis.Side || (GridAxis.Side = {}));
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * Extends axis class with grid support.
-             * @private
-             */
-            function compose(AxisClass, ChartClass, TickClass) {
-                if (AxisClass.keepProps.indexOf('grid') === -1) {
-                    AxisClass.keepProps.push('grid');
-                    AxisClass.prototype.getMaxLabelDimensions = getMaxLabelDimensions;
-                    wrap(AxisClass.prototype, 'unsquish', wrapUnsquish);
-                    // Add event handlers
-                    addEvent(AxisClass, 'init', onInit);
-                    addEvent(AxisClass, 'afterGetOffset', onAfterGetOffset);
-                    addEvent(AxisClass, 'afterGetTitlePosition', onAfterGetTitlePosition);
-                    addEvent(AxisClass, 'afterInit', onAfterInit);
-                    addEvent(AxisClass, 'afterRender', onAfterRender);
-                    addEvent(AxisClass, 'afterSetAxisTranslation', onAfterSetAxisTranslation);
-                    addEvent(AxisClass, 'afterSetOptions', onAfterSetOptions);
-                    addEvent(AxisClass, 'afterSetOptions', onAfterSetOptions2);
-                    addEvent(AxisClass, 'afterSetScale', onAfterSetScale);
-                    addEvent(AxisClass, 'afterTickSize', onAfterTickSize);
-                    addEvent(AxisClass, 'trimTicks', onTrimTicks);
-                    addEvent(AxisClass, 'destroy', onDestroy);
-                }
+        function compose(AxisClass, ChartClass, TickClass) {
+            if (composedClasses.indexOf(AxisClass) === -1) {
+                composedClasses.push(AxisClass);
+                AxisClass.keepProps.push('grid');
+                AxisClass.prototype.getMaxLabelDimensions = getMaxLabelDimensions;
+                wrap(AxisClass.prototype, 'unsquish', wrapUnsquish);
+                // Add event handlers
+                addEvent(AxisClass, 'init', onInit);
+                addEvent(AxisClass, 'afterGetOffset', onAfterGetOffset);
+                addEvent(AxisClass, 'afterGetTitlePosition', onAfterGetTitlePosition);
+                addEvent(AxisClass, 'afterInit', onAfterInit);
+                addEvent(AxisClass, 'afterRender', onAfterRender);
+                addEvent(AxisClass, 'afterSetAxisTranslation', onAfterSetAxisTranslation);
+                addEvent(AxisClass, 'afterSetOptions', onAfterSetOptions);
+                addEvent(AxisClass, 'afterSetOptions', onAfterSetOptions2);
+                addEvent(AxisClass, 'afterSetScale', onAfterSetScale);
+                addEvent(AxisClass, 'afterTickSize', onAfterTickSize);
+                addEvent(AxisClass, 'trimTicks', onTrimTicks);
+                addEvent(AxisClass, 'destroy', onDestroy);
+            }
+            if (composedClasses.indexOf(ChartClass) === -1) {
                 addEvent(ChartClass, 'afterSetChartSize', onChartAfterSetChartSize);
+            }
+            if (composedClasses.indexOf(TickClass) === -1) {
                 addEvent(TickClass, 'afterGetLabelPosition', onTickAfterGetLabelPosition);
                 addEvent(TickClass, 'labelFormat', onTickLabelFormat);
-                return AxisClass;
             }
-            GridAxis.compose = compose;
-            /**
-             * Get the largest label width and height.
-             *
-             * @private
-             * @function Highcharts.Axis#getMaxLabelDimensions
-             *
-             * @param {Highcharts.Dictionary<Highcharts.Tick>} ticks
-             * All the ticks on one axis.
-             *
-             * @param {Array<number|string>} tickPositions
-             * All the tick positions on one axis.
-             *
-             * @return {Highcharts.SizeObject}
-             * Object containing the properties height and width.
-             *
-             * @todo Move this to the generic axis implementation, as it is used there.
-             */
-            function getMaxLabelDimensions(ticks, tickPositions) {
-                var dimensions = {
-                        width: 0,
-                        height: 0
-                    };
-                tickPositions.forEach(function (pos) {
-                    var tick = ticks[pos];
-                    var labelHeight = 0,
-                        labelWidth = 0,
-                        label;
-                    if (isObject(tick)) {
-                        label = isObject(tick.label) ? tick.label : {};
-                        // Find width and height of label
-                        labelHeight = label.getBBox ? label.getBBox().height : 0;
-                        if (label.textStr && !isNumber(label.textPxLength)) {
-                            label.textPxLength = label.getBBox().width;
-                        }
-                        labelWidth = isNumber(label.textPxLength) ?
-                            // Math.round ensures crisp lines
-                            Math.round(label.textPxLength) :
-                            0;
-                        if (label.textStr) {
-                            // Set the tickWidth same as the label width after ellipsis
-                            // applied #10281
-                            labelWidth = Math.round(label.getBBox().width);
-                        }
-                        // Update the result if width and/or height are larger
-                        dimensions.height = Math.max(labelHeight, dimensions.height);
-                        dimensions.width = Math.max(labelWidth, dimensions.width);
+            return AxisClass;
+        }
+        /**
+         * Get the largest label width and height.
+         *
+         * @private
+         * @function Highcharts.Axis#getMaxLabelDimensions
+         *
+         * @param {Highcharts.Dictionary<Highcharts.Tick>} ticks
+         * All the ticks on one axis.
+         *
+         * @param {Array<number|string>} tickPositions
+         * All the tick positions on one axis.
+         *
+         * @return {Highcharts.SizeObject}
+         * Object containing the properties height and width.
+         *
+         * @todo Move this to the generic axis implementation, as it is used there.
+         */
+        function getMaxLabelDimensions(ticks, tickPositions) {
+            var dimensions = {
+                    width: 0,
+                    height: 0
+                };
+            tickPositions.forEach(function (pos) {
+                var tick = ticks[pos];
+                var labelHeight = 0,
+                    labelWidth = 0,
+                    label;
+                if (isObject(tick)) {
+                    label = isObject(tick.label) ? tick.label : {};
+                    // Find width and height of label
+                    labelHeight = label.getBBox ? label.getBBox().height : 0;
+                    if (label.textStr && !isNumber(label.textPxLength)) {
+                        label.textPxLength = label.getBBox().width;
                     }
-                });
-                // For tree grid, add indentation
-                if (this.options.type === 'treegrid' &&
-                    this.treeGrid &&
-                    this.treeGrid.mapOfPosToGridNode) {
-                    var treeDepth = this.treeGrid.mapOfPosToGridNode[-1].height || 0;
-                    dimensions.width += (this.options.labels.indentation *
-                        (treeDepth - 1));
+                    labelWidth = isNumber(label.textPxLength) ?
+                        // Math.round ensures crisp lines
+                        Math.round(label.textPxLength) :
+                        0;
+                    if (label.textStr) {
+                        // Set the tickWidth same as the label width after ellipsis
+                        // applied #10281
+                        labelWidth = Math.round(label.getBBox().width);
+                    }
+                    // Update the result if width and/or height are larger
+                    dimensions.height = Math.max(labelHeight, dimensions.height);
+                    dimensions.width = Math.max(labelWidth, dimensions.width);
                 }
-                return dimensions;
+            });
+            // For tree grid, add indentation
+            if (this.options.type === 'treegrid' &&
+                this.treeGrid &&
+                this.treeGrid.mapOfPosToGridNode) {
+                var treeDepth = this.treeGrid.mapOfPosToGridNode[-1].height || 0;
+                dimensions.width += (this.options.labels.indentation *
+                    (treeDepth - 1));
             }
-            /**
-             * Handle columns and getOffset.
-             * @private
-             */
-            function onAfterGetOffset() {
-                var grid = this.grid;
-                (grid && grid.columns || []).forEach(function (column) {
-                    column.getOffset();
-                });
+            return dimensions;
+        }
+        /**
+         * Handle columns and getOffset.
+         * @private
+         */
+        function onAfterGetOffset() {
+            var grid = this.grid;
+            (grid && grid.columns || []).forEach(function (column) {
+                column.getOffset();
+            });
+        }
+        /**
+         * @private
+         */
+        function onAfterGetTitlePosition(e) {
+            var axis = this;
+            var options = axis.options;
+            var gridOptions = options.grid || {};
+            if (gridOptions.enabled === true) {
+                // compute anchor points for each of the title align options
+                var axisTitle = axis.axisTitle,
+                    axisHeight = axis.height,
+                    horiz = axis.horiz,
+                    axisLeft = axis.left,
+                    offset = axis.offset,
+                    opposite = axis.opposite,
+                    options_1 = axis.options,
+                    axisTop = axis.top,
+                    axisWidth = axis.width;
+                var tickSize = axis.tickSize();
+                var titleWidth = axisTitle && axisTitle.getBBox().width;
+                var xOption = options_1.title.x;
+                var yOption = options_1.title.y;
+                var titleMargin = pick(options_1.title.margin,
+                    horiz ? 5 : 10);
+                var titleFontSize = axis.chart.renderer.fontMetrics(options_1.title.style.fontSize,
+                    axisTitle).f;
+                var crispCorr = tickSize ? tickSize[0] / 2 : 0;
+                // TODO account for alignment
+                // the position in the perpendicular direction of the axis
+                var offAxis = ((horiz ? axisTop + axisHeight : axisLeft) +
+                        (horiz ? 1 : -1) * // horizontal axis reverses the margin
+                            (opposite ? -1 : 1) * // so does opposite axes
+                            crispCorr +
+                        (axis.side === GridAxisSide.bottom ? titleFontSize : 0));
+                e.titlePosition.x = horiz ?
+                    axisLeft - (titleWidth || 0) / 2 - titleMargin + xOption :
+                    offAxis + (opposite ? axisWidth : 0) + offset + xOption;
+                e.titlePosition.y = horiz ?
+                    (offAxis -
+                        (opposite ? axisHeight : 0) +
+                        (opposite ? titleFontSize : -titleFontSize) / 2 +
+                        offset +
+                        yOption) :
+                    axisTop - titleMargin + yOption;
             }
-            /**
-             * @private
-             */
-            function onAfterGetTitlePosition(e) {
-                var axis = this;
-                var options = axis.options;
-                var gridOptions = options.grid || {};
-                if (gridOptions.enabled === true) {
-                    // compute anchor points for each of the title align options
-                    var axisTitle = axis.axisTitle,
-                        axisHeight = axis.height,
-                        horiz = axis.horiz,
-                        axisLeft = axis.left,
-                        offset = axis.offset,
-                        opposite = axis.opposite,
-                        options_1 = axis.options,
-                        axisTop = axis.top,
-                        axisWidth = axis.width;
-                    var tickSize = axis.tickSize();
-                    var titleWidth = axisTitle && axisTitle.getBBox().width;
-                    var xOption = options_1.title.x;
-                    var yOption = options_1.title.y;
-                    var titleMargin = pick(options_1.title.margin,
-                        horiz ? 5 : 10);
-                    var titleFontSize = axis.chart.renderer.fontMetrics(options_1.title.style.fontSize,
-                        axisTitle).f;
-                    var crispCorr = tickSize ? tickSize[0] / 2 : 0;
-                    // TODO account for alignment
-                    // the position in the perpendicular direction of the axis
-                    var offAxis = ((horiz ? axisTop + axisHeight : axisLeft) +
-                            (horiz ? 1 : -1) * // horizontal axis reverses the margin
-                                (opposite ? -1 : 1) * // so does opposite axes
-                                crispCorr +
-                            (axis.side === GridAxis.Side.bottom ? titleFontSize : 0));
-                    e.titlePosition.x = horiz ?
-                        axisLeft - (titleWidth || 0) / 2 - titleMargin + xOption :
-                        offAxis + (opposite ? axisWidth : 0) + offset + xOption;
-                    e.titlePosition.y = horiz ?
-                        (offAxis -
-                            (opposite ? axisHeight : 0) +
-                            (opposite ? titleFontSize : -titleFontSize) / 2 +
-                            offset +
-                            yOption) :
-                        axisTop - titleMargin + yOption;
-                }
+        }
+        /**
+         * @private
+         */
+        function onAfterInit() {
+            var axis = this;
+            var chart = axis.chart,
+                _a = axis.options.grid,
+                gridOptions = _a === void 0 ? {} : _a,
+                userOptions = axis.userOptions;
+            if (gridOptions.enabled) {
+                applyGridOptions(axis);
             }
-            /**
-             * @private
-             */
-            function onAfterInit() {
-                var axis = this;
-                var chart = axis.chart,
-                    _a = axis.options.grid,
-                    gridOptions = _a === void 0 ? {} : _a,
-                    userOptions = axis.userOptions;
-                if (gridOptions.enabled) {
-                    applyGridOptions(axis);
-                }
-                if (gridOptions.columns) {
-                    var columns = axis.grid.columns = [];
-                    var columnIndex = axis.grid.columnIndex = 0;
-                    // Handle columns, each column is a grid axis
-                    while (++columnIndex < gridOptions.columns.length) {
-                        var columnOptions = merge(userOptions,
-                            gridOptions.columns[gridOptions.columns.length - columnIndex - 1], {
-                                linkedTo: 0,
-                                // Force to behave like category axis
-                                type: 'category',
-                                // Disable by default the scrollbar on the grid axis
-                                scrollbar: {
-                                    enabled: false
-                                }
-                            });
-                        delete columnOptions.grid.columns; // Prevent recursion
-                        var column = new Axis(axis.chart,
-                            columnOptions);
-                        column.grid.isColumn = true;
-                        column.grid.columnIndex = columnIndex;
-                        // Remove column axis from chart axes array, and place it
-                        // in the columns array.
-                        erase(chart.axes, column);
-                        erase(chart[axis.coll], column);
-                        columns.push(column);
-                    }
+            if (gridOptions.columns) {
+                var columns = axis.grid.columns = [];
+                var columnIndex = axis.grid.columnIndex = 0;
+                // Handle columns, each column is a grid axis
+                while (++columnIndex < gridOptions.columns.length) {
+                    var columnOptions = merge(userOptions,
+                        gridOptions.columns[gridOptions.columns.length - columnIndex - 1], {
+                            linkedTo: 0,
+                            // Force to behave like category axis
+                            type: 'category',
+                            // Disable by default the scrollbar on the grid axis
+                            scrollbar: {
+                                enabled: false
+                            }
+                        });
+                    delete columnOptions.grid.columns; // Prevent recursion
+                    var column = new Axis(axis.chart,
+                        columnOptions);
+                    column.grid.isColumn = true;
+                    column.grid.columnIndex = columnIndex;
+                    // Remove column axis from chart axes array, and place it
+                    // in the columns array.
+                    erase(chart.axes, column);
+                    erase(chart[axis.coll], column);
+                    columns.push(column);
                 }
             }
-            /**
-             * Draw an extra line on the far side of the outermost axis,
-             * creating floor/roof/wall of a grid. And some padding.
-             * ```
-             * Make this:
-             *             (axis.min) __________________________ (axis.max)
-             *                           |    |    |    |    |
-             * Into this:
-             *             (axis.min) __________________________ (axis.max)
-             *                        ___|____|____|____|____|__
-             * ```
-             * @private
-             */
-            function onAfterRender() {
-                var axis = this,
-                    grid = axis.grid,
-                    options = axis.options,
-                    gridOptions = options.grid || {};
-                if (gridOptions.enabled === true) {
-                    var min = axis.min || 0,
-                        max = axis.max || 0;
-                    // @todo acutual label padding (top, bottom, left, right)
-                    axis.maxLabelDimensions = axis.getMaxLabelDimensions(axis.ticks, axis.tickPositions);
-                    // Remove right wall before rendering if updating
-                    if (axis.rightWall) {
-                        axis.rightWall.destroy();
-                    }
-                    /*
-                    Draw an extra axis line on outer axes
-                                >
-                    Make this:    |______|______|______|___
+        }
+        /**
+         * Draw an extra line on the far side of the outermost axis,
+         * creating floor/roof/wall of a grid. And some padding.
+         * ```
+         * Make this:
+         *             (axis.min) __________________________ (axis.max)
+         *                           |    |    |    |    |
+         * Into this:
+         *             (axis.min) __________________________ (axis.max)
+         *                        ___|____|____|____|____|__
+         * ```
+         * @private
+         */
+        function onAfterRender() {
+            var axis = this,
+                grid = axis.grid,
+                options = axis.options,
+                gridOptions = options.grid || {};
+            if (gridOptions.enabled === true) {
+                var min = axis.min || 0,
+                    max = axis.max || 0;
+                // @todo acutual label padding (top, bottom, left, right)
+                axis.maxLabelDimensions = axis.getMaxLabelDimensions(axis.ticks, axis.tickPositions);
+                // Remove right wall before rendering if updating
+                if (axis.rightWall) {
+                    axis.rightWall.destroy();
+                }
+                /*
+                Draw an extra axis line on outer axes
+                            >
+                Make this:    |______|______|______|___
 
-                                > _________________________
-                    Into this:    |______|______|______|__|
-                                                            */
-                    if (axis.grid && axis.grid.isOuterAxis() && axis.axisLine) {
-                        var lineWidth = options.lineWidth;
-                        if (lineWidth) {
-                            var linePath = axis.getLinePath(lineWidth),
-                                startPoint = linePath[0],
-                                endPoint = linePath[1], 
-                                // Negate distance if top or left axis
-                                // Subtract 1px to draw the line at the end of the tick
-                                tickLength = (axis.tickSize('tick') || [1])[0],
-                                distance = (tickLength - 1) * ((axis.side === GridAxis.Side.top ||
-                                    axis.side === GridAxis.Side.left) ? -1 : 1);
-                            // If axis is horizontal, reposition line path vertically
-                            if (startPoint[0] === 'M' && endPoint[0] === 'L') {
-                                if (axis.horiz) {
-                                    startPoint[2] += distance;
-                                    endPoint[2] += distance;
-                                }
-                                else {
-                                    startPoint[1] += distance;
-                                    endPoint[1] += distance;
-                                }
+                            > _________________________
+                Into this:    |______|______|______|__|
+                                                        */
+                if (axis.grid && axis.grid.isOuterAxis() && axis.axisLine) {
+                    var lineWidth = options.lineWidth;
+                    if (lineWidth) {
+                        var linePath = axis.getLinePath(lineWidth),
+                            startPoint = linePath[0],
+                            endPoint = linePath[1], 
+                            // Negate distance if top or left axis
+                            // Subtract 1px to draw the line at the end of the tick
+                            tickLength = (axis.tickSize('tick') || [1])[0],
+                            distance = (tickLength - 1) * ((axis.side === GridAxisSide.top ||
+                                axis.side === GridAxisSide.left) ? -1 : 1);
+                        // If axis is horizontal, reposition line path vertically
+                        if (startPoint[0] === 'M' && endPoint[0] === 'L') {
+                            if (axis.horiz) {
+                                startPoint[2] += distance;
+                                endPoint[2] += distance;
                             }
-                            // If it doesn't exist, add an upper and lower border
-                            // for the vertical grid axis.
-                            if (!axis.horiz && axis.chart.marginRight) {
-                                var upperBorderStartPoint = startPoint,
-                                    upperBorderEndPoint = [
-                                        'L',
-                                        axis.left,
-                                        startPoint[2] || 0
-                                    ],
-                                    upperBorderPath = [
-                                        upperBorderStartPoint,
-                                        upperBorderEndPoint
-                                    ],
-                                    lowerBorderEndPoint = [
-                                        'L',
-                                        axis.chart.chartWidth - axis.chart.marginRight,
-                                        axis.toPixels(max + axis.tickmarkOffset)
-                                    ],
-                                    lowerBorderStartPoint = [
-                                        'M',
-                                        endPoint[1] || 0,
-                                        axis.toPixels(max + axis.tickmarkOffset)
-                                    ],
-                                    lowerBorderPath = [
-                                        lowerBorderStartPoint,
-                                        lowerBorderEndPoint
-                                    ];
-                                if (!axis.grid.upperBorder && min % 1 !== 0) {
-                                    axis.grid.upperBorder = axis.grid.renderBorder(upperBorderPath);
-                                }
-                                if (axis.grid.upperBorder) {
-                                    axis.grid.upperBorder.attr({
-                                        stroke: options.lineColor,
-                                        'stroke-width': options.lineWidth
-                                    });
-                                    axis.grid.upperBorder.animate({
-                                        d: upperBorderPath
-                                    });
-                                }
-                                if (!axis.grid.lowerBorder && max % 1 !== 0) {
-                                    axis.grid.lowerBorder = axis.grid.renderBorder(lowerBorderPath);
-                                }
-                                if (axis.grid.lowerBorder) {
-                                    axis.grid.lowerBorder.attr({
-                                        stroke: options.lineColor,
-                                        'stroke-width': options.lineWidth
-                                    });
-                                    axis.grid.lowerBorder.animate({
-                                        d: lowerBorderPath
-                                    });
-                                }
+                            else {
+                                startPoint[1] += distance;
+                                endPoint[1] += distance;
                             }
-                            // Render an extra line parallel to the existing axes, to
-                            // close the grid.
-                            if (!axis.grid.axisLineExtra) {
-                                axis.grid.axisLineExtra = axis.grid.renderBorder(linePath);
+                        }
+                        // If it doesn't exist, add an upper and lower border
+                        // for the vertical grid axis.
+                        if (!axis.horiz && axis.chart.marginRight) {
+                            var upperBorderStartPoint = startPoint,
+                                upperBorderEndPoint = [
+                                    'L',
+                                    axis.left,
+                                    startPoint[2] || 0
+                                ],
+                                upperBorderPath = [
+                                    upperBorderStartPoint,
+                                    upperBorderEndPoint
+                                ],
+                                lowerBorderEndPoint = [
+                                    'L',
+                                    axis.chart.chartWidth - axis.chart.marginRight,
+                                    axis.toPixels(max + axis.tickmarkOffset)
+                                ],
+                                lowerBorderStartPoint = [
+                                    'M',
+                                    endPoint[1] || 0,
+                                    axis.toPixels(max + axis.tickmarkOffset)
+                                ],
+                                lowerBorderPath = [
+                                    lowerBorderStartPoint,
+                                    lowerBorderEndPoint
+                                ];
+                            if (!axis.grid.upperBorder && min % 1 !== 0) {
+                                axis.grid.upperBorder = axis.grid.renderBorder(upperBorderPath);
                             }
-                            else {
-                                axis.grid.axisLineExtra.attr({
+                            if (axis.grid.upperBorder) {
+                                axis.grid.upperBorder.attr({
                                     stroke: options.lineColor,
                                     'stroke-width': options.lineWidth
                                 });
-                                axis.grid.axisLineExtra.animate({
-                                    d: linePath
+                                axis.grid.upperBorder.animate({
+                                    d: upperBorderPath
+                                });
+                            }
+                            if (!axis.grid.lowerBorder && max % 1 !== 0) {
+                                axis.grid.lowerBorder = axis.grid.renderBorder(lowerBorderPath);
+                            }
+                            if (axis.grid.lowerBorder) {
+                                axis.grid.lowerBorder.attr({
+                                    stroke: options.lineColor,
+                                    'stroke-width': options.lineWidth
+                                });
+                                axis.grid.lowerBorder.animate({
+                                    d: lowerBorderPath
                                 });
                             }
-                            // show or hide the line depending on options.showEmpty
-                            axis.axisLine[axis.showAxis ? 'show' : 'hide'](true);
                         }
-                    }
-                    (grid && grid.columns || []).forEach(function (column) {
-                        column.render();
-                    });
-                    // Manipulate the tick mark visibility
-                    // based on the axis.max- allows smooth scrolling.
-                    if (!axis.horiz &&
-                        axis.chart.hasRendered &&
-                        (axis.scrollbar ||
-                            (axis.linkedParent && axis.linkedParent.scrollbar))) {
-                        var tickmarkOffset = axis.tickmarkOffset,
-                            lastTick = axis.tickPositions[axis.tickPositions.length - 1],
-                            firstTick = axis.tickPositions[0];
-                        var label = void 0,
-                            tickMark = void 0;
-                        while ((label = axis.hiddenLabels.pop()) && label.element) {
-                            label.show(); // #15453
+                        // Render an extra line parallel to the existing axes, to
+                        // close the grid.
+                        if (!axis.grid.axisLineExtra) {
+                            axis.grid.axisLineExtra = axis.grid.renderBorder(linePath);
                         }
-                        while ((tickMark = axis.hiddenMarks.pop()) &&
-                            tickMark.element) {
-                            tickMark.show(); // #16439
+                        else {
+                            axis.grid.axisLineExtra.attr({
+                                stroke: options.lineColor,
+                                'stroke-width': options.lineWidth
+                            });
+                            axis.grid.axisLineExtra.animate({
+                                d: linePath
+                            });
                         }
-                        // Hide/show firts tick label.
-                        label = axis.ticks[firstTick].label;
-                        if (label) {
-                            if (min - firstTick > tickmarkOffset) {
-                                axis.hiddenLabels.push(label.hide());
-                            }
-                            else {
-                                label.show();
-                            }
+                        // show or hide the line depending on options.showEmpty
+                        axis.axisLine[axis.showAxis ? 'show' : 'hide']();
+                    }
+                }
+                (grid && grid.columns || []).forEach(function (column) { return column.render(); });
+                // Manipulate the tick mark visibility
+                // based on the axis.max- allows smooth scrolling.
+                if (!axis.horiz &&
+                    axis.chart.hasRendered &&
+                    (axis.scrollbar ||
+                        (axis.linkedParent && axis.linkedParent.scrollbar))) {
+                    var tickmarkOffset = axis.tickmarkOffset,
+                        lastTick = axis.tickPositions[axis.tickPositions.length - 1],
+                        firstTick = axis.tickPositions[0];
+                    var label = void 0,
+                        tickMark = void 0;
+                    while ((label = axis.hiddenLabels.pop()) && label.element) {
+                        label.show(); // #15453
+                    }
+                    while ((tickMark = axis.hiddenMarks.pop()) &&
+                        tickMark.element) {
+                        tickMark.show(); // #16439
+                    }
+                    // Hide/show firts tick label.
+                    label = axis.ticks[firstTick].label;
+                    if (label) {
+                        if (min - firstTick > tickmarkOffset) {
+                            axis.hiddenLabels.push(label.hide());
                         }
-                        // Hide/show last tick mark/label.
-                        label = axis.ticks[lastTick].label;
-                        if (label) {
-                            if (lastTick - max > tickmarkOffset) {
-                                axis.hiddenLabels.push(label.hide());
-                            }
-                            else {
-                                label.show();
-                            }
+                        else {
+                            label.show();
+                        }
+                    }
+                    // Hide/show last tick mark/label.
+                    label = axis.ticks[lastTick].label;
+                    if (label) {
+                        if (lastTick - max > tickmarkOffset) {
+                            axis.hiddenLabels.push(label.hide());
                         }
-                        var mark = axis.ticks[lastTick].mark;
-                        if (mark &&
-                            lastTick - max < tickmarkOffset &&
-                            lastTick - max > 0 && axis.ticks[lastTick].isLast) {
-                            axis.hiddenMarks.push(mark.hide());
+                        else {
+                            label.show();
                         }
                     }
+                    var mark = axis.ticks[lastTick].mark;
+                    if (mark &&
+                        lastTick - max < tickmarkOffset &&
+                        lastTick - max > 0 && axis.ticks[lastTick].isLast) {
+                        axis.hiddenMarks.push(mark.hide());
+                    }
                 }
             }
-            /**
-             * @private
-             */
-            function onAfterSetAxisTranslation() {
-                var axis = this;
-                var tickInfo = axis.tickPositions && axis.tickPositions.info;
-                var options = axis.options;
-                var gridOptions = options.grid || {};
-                var userLabels = axis.userOptions.labels || {};
-                // Fire this only for the Gantt type chart, #14868.
-                if (gridOptions.enabled) {
-                    if (axis.horiz) {
-                        axis.series.forEach(function (series) {
-                            series.options.pointRange = 0;
-                        });
-                        // Lower level time ticks, like hours or minutes, represent
-                        // points in time and not ranges. These should be aligned
-                        // left in the grid cell by default. The same applies to
-                        // years of higher order.
-                        if (tickInfo &&
-                            options.dateTimeLabelFormats &&
-                            options.labels &&
-                            !defined(userLabels.align) &&
-                            (options.dateTimeLabelFormats[tickInfo.unitName]
-                                .range === false ||
-                                tickInfo.count > 1 // years
-                            )) {
-                            options.labels.align = 'left';
-                            if (!defined(userLabels.x)) {
-                                options.labels.x = 3;
-                            }
+        }
+        /**
+         * @private
+         */
+        function onAfterSetAxisTranslation() {
+            var axis = this;
+            var tickInfo = axis.tickPositions && axis.tickPositions.info;
+            var options = axis.options;
+            var gridOptions = options.grid || {};
+            var userLabels = axis.userOptions.labels || {};
+            // Fire this only for the Gantt type chart, #14868.
+            if (gridOptions.enabled) {
+                if (axis.horiz) {
+                    axis.series.forEach(function (series) {
+                        series.options.pointRange = 0;
+                    });
+                    // Lower level time ticks, like hours or minutes, represent
+                    // points in time and not ranges. These should be aligned
+                    // left in the grid cell by default. The same applies to
+                    // years of higher order.
+                    if (tickInfo &&
+                        options.dateTimeLabelFormats &&
+                        options.labels &&
+                        !defined(userLabels.align) &&
+                        (options.dateTimeLabelFormats[tickInfo.unitName]
+                            .range === false ||
+                            tickInfo.count > 1 // years
+                        )) {
+                        options.labels.align = 'left';
+                        if (!defined(userLabels.x)) {
+                            options.labels.x = 3;
                         }
                     }
-                    else {
-                        // Don't trim ticks which not in min/max range but
-                        // they are still in the min/max plus tickInterval.
-                        if (this.options.type !== 'treegrid' &&
-                            axis.grid &&
-                            axis.grid.columns) {
-                            this.minPointOffset = this.tickInterval;
-                        }
+                }
+                else {
+                    // Don't trim ticks which not in min/max range but
+                    // they are still in the min/max plus tickInterval.
+                    if (this.options.type !== 'treegrid' &&
+                        axis.grid &&
+                        axis.grid.columns) {
+                        this.minPointOffset = this.tickInterval;
                     }
                 }
             }
-            /**
-             * Creates a left and right wall on horizontal axes:
-             * - Places leftmost tick at the start of the axis, to create a left
-             *   wall
-             * - Ensures that the rightmost tick is at the end of the axis, to
-             *   create a right wall.
-             * @private
-             */
-            function onAfterSetOptions(e) {
-                var options = this.options,
-                    userOptions = e.userOptions,
-                    gridOptions = ((options && isObject(options.grid)) ? options.grid : {});
-                var gridAxisOptions;
-                if (gridOptions.enabled === true) {
-                    // Merge the user options into default grid axis options so
-                    // that when a user option is set, it takes presedence.
-                    gridAxisOptions = merge(true, {
-                        className: ('highcharts-grid-axis ' + (userOptions.className || '')),
-                        dateTimeLabelFormats: {
-                            hour: {
-                                list: ['%H:%M', '%H']
-                            },
-                            day: {
-                                list: ['%A, %e. %B', '%a, %e. %b', '%E']
-                            },
-                            week: {
-                                list: ['Week %W', 'W%W']
-                            },
-                            month: {
-                                list: ['%B', '%b', '%o']
-                            }
-                        },
-                        grid: {
-                            borderWidth: 1
+        }
+        /**
+         * Creates a left and right wall on horizontal axes:
+         * - Places leftmost tick at the start of the axis, to create a left
+         *   wall
+         * - Ensures that the rightmost tick is at the end of the axis, to
+         *   create a right wall.
+         * @private
+         */
+        function onAfterSetOptions(e) {
+            var options = this.options,
+                userOptions = e.userOptions,
+                gridOptions = ((options && isObject(options.grid)) ? options.grid : {});
+            var gridAxisOptions;
+            if (gridOptions.enabled === true) {
+                // Merge the user options into default grid axis options so
+                // that when a user option is set, it takes presedence.
+                gridAxisOptions = merge(true, {
+                    className: ('highcharts-grid-axis ' + (userOptions.className || '')),
+                    dateTimeLabelFormats: {
+                        hour: {
+                            list: ['%H:%M', '%H']
                         },
-                        labels: {
-                            padding: 2,
-                            style: {
-                                fontSize: '13px'
-                            }
+                        day: {
+                            list: ['%A, %e. %B', '%a, %e. %b', '%E']
                         },
-                        margin: 0,
-                        title: {
-                            text: null,
-                            reserveSpace: false,
-                            rotation: 0
+                        week: {
+                            list: ['Week %W', 'W%W']
                         },
-                        // In a grid axis, only allow one unit of certain types,
-                        // for example we shouln't have one grid cell spanning
-                        // two days.
-                        units: [[
-                                'millisecond',
-                                [1, 10, 100]
-                            ], [
-                                'second',
-                                [1, 10]
-                            ], [
-                                'minute',
-                                [1, 5, 15]
-                            ], [
-                                'hour',
-                                [1, 6]
-                            ], [
-                                'day',
-                                [1]
-                            ], [
-                                'week',
-                                [1]
-                            ], [
-                                'month',
-                                [1]
-                            ], [
-                                'year',
-                                null
-                            ]]
-                    }, userOptions);
-                    // X-axis specific options
-                    if (this.coll === 'xAxis') {
-                        // For linked axes, tickPixelInterval is used only if
-                        // the tickPositioner below doesn't run or returns
-                        // undefined (like multiple years)
-                        if (defined(userOptions.linkedTo) &&
-                            !defined(userOptions.tickPixelInterval)) {
-                            gridAxisOptions.tickPixelInterval = 350;
+                        month: {
+                            list: ['%B', '%b', '%o']
                         }
-                        // For the secondary grid axis, use the primary axis'
-                        // tick intervals and return ticks one level higher.
-                        if (
-                        // Check for tick pixel interval in options
-                        !defined(userOptions.tickPixelInterval) &&
-                            // Only for linked axes
-                            defined(userOptions.linkedTo) &&
-                            !defined(userOptions.tickPositioner) &&
-                            !defined(userOptions.tickInterval)) {
-                            gridAxisOptions.tickPositioner = function (min, max) {
-                                var parentInfo = (this.linkedParent &&
-                                        this.linkedParent.tickPositions &&
-                                        this.linkedParent.tickPositions.info);
-                                if (parentInfo) {
-                                    var units = (gridAxisOptions.units || []);
-                                    var unitIdx = void 0,
-                                        count = void 0,
-                                        unitName = void 0;
-                                    for (var i = 0; i < units.length; i++) {
-                                        if (units[i][0] ===
-                                            parentInfo.unitName) {
-                                            unitIdx = i;
-                                            break;
-                                        }
-                                    }
-                                    // Get the first allowed count on the next
-                                    // unit.
-                                    if (units[unitIdx + 1]) {
-                                        unitName = units[unitIdx + 1][0];
-                                        count =
-                                            (units[unitIdx + 1][1] || [1])[0];
-                                        // In case the base X axis shows years, make
-                                        // the secondary axis show ten times the
-                                        // years (#11427)
-                                    }
-                                    else if (parentInfo.unitName === 'year') {
-                                        unitName = 'year';
-                                        count = parentInfo.count * 10;
-                                    }
-                                    var unitRange = timeUnits[unitName];
-                                    this.tickInterval = unitRange * count;
-                                    return this.getTimeTicks({
-                                        unitRange: unitRange,
-                                        count: count,
-                                        unitName: unitName
-                                    }, min, max, this.options.startOfWeek);
-                                }
-                            };
+                    },
+                    grid: {
+                        borderWidth: 1
+                    },
+                    labels: {
+                        padding: 2,
+                        style: {
+                            fontSize: '13px'
                         }
+                    },
+                    margin: 0,
+                    title: {
+                        text: null,
+                        reserveSpace: false,
+                        rotation: 0
+                    },
+                    // In a grid axis, only allow one unit of certain types,
+                    // for example we shouln't have one grid cell spanning
+                    // two days.
+                    units: [[
+                            'millisecond',
+                            [1, 10, 100]
+                        ], [
+                            'second',
+                            [1, 10]
+                        ], [
+                            'minute',
+                            [1, 5, 15]
+                        ], [
+                            'hour',
+                            [1, 6]
+                        ], [
+                            'day',
+                            [1]
+                        ], [
+                            'week',
+                            [1]
+                        ], [
+                            'month',
+                            [1]
+                        ], [
+                            'year',
+                            null
+                        ]]
+                }, userOptions);
+                // X-axis specific options
+                if (this.coll === 'xAxis') {
+                    // For linked axes, tickPixelInterval is used only if
+                    // the tickPositioner below doesn't run or returns
+                    // undefined (like multiple years)
+                    if (defined(userOptions.linkedTo) &&
+                        !defined(userOptions.tickPixelInterval)) {
+                        gridAxisOptions.tickPixelInterval = 350;
                     }
-                    // Now merge the combined options into the axis options
-                    merge(true, this.options, gridAxisOptions);
-                    if (this.horiz) {
-                        /*               _________________________
-                        Make this:    ___|_____|_____|_____|__|
-                                        ^                     ^
-                                        _________________________
-                        Into this:    |_____|_____|_____|_____|
-                                            ^                 ^    */
-                        options.minPadding = pick(userOptions.minPadding, 0);
-                        options.maxPadding = pick(userOptions.maxPadding, 0);
-                    }
-                    // If borderWidth is set, then use its value for tick and
-                    // line width.
-                    if (isNumber(options.grid.borderWidth)) {
-                        options.tickWidth = options.lineWidth =
-                            gridOptions.borderWidth;
+                    // For the secondary grid axis, use the primary axis'
+                    // tick intervals and return ticks one level higher.
+                    if (
+                    // Check for tick pixel interval in options
+                    !defined(userOptions.tickPixelInterval) &&
+                        // Only for linked axes
+                        defined(userOptions.linkedTo) &&
+                        !defined(userOptions.tickPositioner) &&
+                        !defined(userOptions.tickInterval)) {
+                        gridAxisOptions.tickPositioner = function (min, max) {
+                            var parentInfo = (this.linkedParent &&
+                                    this.linkedParent.tickPositions &&
+                                    this.linkedParent.tickPositions.info);
+                            if (parentInfo) {
+                                var units = (gridAxisOptions.units || []);
+                                var unitIdx = void 0,
+                                    count = 1,
+                                    unitName = 'year';
+                                for (var i = 0; i < units.length; i++) {
+                                    var unit_1 = units[i];
+                                    if (unit_1 && unit_1[0] === parentInfo.unitName) {
+                                        unitIdx = i;
+                                        break;
+                                    }
+                                }
+                                // Get the first allowed count on the next unit.
+                                var unit = (isNumber(unitIdx) && units[unitIdx + 1]);
+                                if (unit) {
+                                    unitName = unit[0] || 'year';
+                                    var counts = unit[1];
+                                    count = counts && counts[0] || 1;
+                                    // In case the base X axis shows years, make the
+                                    // secondary axis show ten times the years (#11427)
+                                }
+                                else if (parentInfo.unitName === 'year') {
+                                    // unitName is 'year'
+                                    count = parentInfo.count * 10;
+                                }
+                                var unitRange = timeUnits[unitName];
+                                this.tickInterval = unitRange * count;
+                                return this.chart.time.getTimeTicks({ unitRange: unitRange, count: count, unitName: unitName }, min, max, this.options.startOfWeek);
+                            }
+                        };
                     }
                 }
-            }
-            /**
-             * @private
-             */
-            function onAfterSetOptions2(e) {
-                var axis = this;
-                var userOptions = e.userOptions;
-                var gridOptions = userOptions && userOptions.grid || {};
-                var columns = gridOptions.columns;
-                // Add column options to the parent axis. Children has their column
-                // options set on init in onGridAxisAfterInit.
-                if (gridOptions.enabled && columns) {
-                    merge(true, axis.options, columns[columns.length - 1]);
+                // Now merge the combined options into the axis options
+                merge(true, this.options, gridAxisOptions);
+                if (this.horiz) {
+                    /*               _________________________
+                    Make this:    ___|_____|_____|_____|__|
+                                    ^                     ^
+                                    _________________________
+                    Into this:    |_____|_____|_____|_____|
+                                        ^                 ^    */
+                    options.minPadding = pick(userOptions.minPadding, 0);
+                    options.maxPadding = pick(userOptions.maxPadding, 0);
+                }
+                // If borderWidth is set, then use its value for tick and
+                // line width.
+                if (isNumber(options.grid.borderWidth)) {
+                    options.tickWidth = options.lineWidth =
+                        gridOptions.borderWidth;
                 }
             }
-            /**
-             * Handle columns and setScale.
-             * @private
-             */
-            function onAfterSetScale() {
-                var axis = this;
-                (axis.grid.columns || []).forEach(function (column) {
-                    column.setScale();
-                });
+        }
+        /**
+         * @private
+         */
+        function onAfterSetOptions2(e) {
+            var axis = this;
+            var userOptions = e.userOptions;
+            var gridOptions = userOptions && userOptions.grid || {};
+            var columns = gridOptions.columns;
+            // Add column options to the parent axis. Children has their column
+            // options set on init in onGridAxisAfterInit.
+            if (gridOptions.enabled && columns) {
+                merge(true, axis.options, columns[columns.length - 1]);
             }
-            /**
-             * Draw vertical axis ticks extra long to create cell floors and roofs.
-             * Overrides the tickLength for vertical axes.
-             * @private
-             */
-            function onAfterTickSize(e) {
-                var defaultLeftAxisOptions = AxisDefaults.defaultLeftAxisOptions;
-                var _a = this,
-                    horiz = _a.horiz,
-                    maxLabelDimensions = _a.maxLabelDimensions,
-                    _b = _a.options.grid,
-                    gridOptions = _b === void 0 ? {} : _b;
-                if (gridOptions.enabled && maxLabelDimensions) {
-                    var labelPadding = (Math.abs(defaultLeftAxisOptions.labels.x) * 2);
-                    var distance = horiz ?
-                            (gridOptions.cellHeight ||
-                                labelPadding + maxLabelDimensions.height) :
-                            labelPadding + maxLabelDimensions.width;
-                    if (isArray(e.tickSize)) {
-                        e.tickSize[0] = distance;
-                    }
-                    else {
-                        e.tickSize = [distance, 0];
-                    }
+        }
+        /**
+         * Handle columns and setScale.
+         * @private
+         */
+        function onAfterSetScale() {
+            var axis = this;
+            (axis.grid.columns || []).forEach(function (column) { return column.setScale(); });
+        }
+        /**
+         * Draw vertical axis ticks extra long to create cell floors and roofs.
+         * Overrides the tickLength for vertical axes.
+         * @private
+         */
+        function onAfterTickSize(e) {
+            var defaultLeftAxisOptions = AxisDefaults.defaultLeftAxisOptions;
+            var _a = this,
+                horiz = _a.horiz,
+                maxLabelDimensions = _a.maxLabelDimensions,
+                _b = _a.options.grid,
+                gridOptions = _b === void 0 ? {} : _b;
+            if (gridOptions.enabled && maxLabelDimensions) {
+                var labelPadding = (Math.abs(defaultLeftAxisOptions.labels.x) * 2);
+                var distance = horiz ?
+                        (gridOptions.cellHeight ||
+                            labelPadding + maxLabelDimensions.height) :
+                        labelPadding + maxLabelDimensions.width;
+                if (isArray(e.tickSize)) {
+                    e.tickSize[0] = distance;
+                }
+                else {
+                    e.tickSize = [distance, 0];
                 }
             }
-            /**
-             * @private
-             */
-            function onChartAfterSetChartSize() {
-                this.axes.forEach(function (axis) {
-                    (axis.grid && axis.grid.columns || []).forEach(function (column) {
-                        column.setAxisSize();
-                        column.setAxisTranslation();
-                    });
+        }
+        /**
+         * @private
+         */
+        function onChartAfterSetChartSize() {
+            this.axes.forEach(function (axis) {
+                (axis.grid && axis.grid.columns || []).forEach(function (column) {
+                    column.setAxisSize();
+                    column.setAxisTranslation();
                 });
+            });
+        }
+        /**
+         * @private
+         */
+        function onDestroy(e) {
+            var grid = this.grid;
+            (grid.columns || []).forEach(function (column) { return column.destroy(e.keepEvents); });
+            grid.columns = void 0;
+        }
+        /**
+         * Wraps axis init to draw cell walls on vertical axes.
+         * @private
+         */
+        function onInit(e) {
+            var axis = this;
+            var userOptions = e.userOptions || {};
+            var gridOptions = userOptions.grid || {};
+            if (gridOptions.enabled && defined(gridOptions.borderColor)) {
+                userOptions.tickColor = userOptions.lineColor = (gridOptions.borderColor);
             }
-            /**
-             * @private
-             */
-            function onDestroy(e) {
-                var grid = this.grid;
-                (grid.columns || []).forEach(function (column) {
-                    column.destroy(e.keepEvents);
-                });
-                grid.columns = void 0;
+            if (!axis.grid) {
+                axis.grid = new GridAxisAdditions(axis);
             }
-            /**
-             * Wraps axis init to draw cell walls on vertical axes.
-             * @private
-             */
-            function onInit(e) {
-                var axis = this;
-                var userOptions = e.userOptions || {};
-                var gridOptions = userOptions.grid || {};
-                if (gridOptions.enabled && defined(gridOptions.borderColor)) {
-                    userOptions.tickColor = userOptions.lineColor = (gridOptions.borderColor);
+            axis.hiddenLabels = [];
+            axis.hiddenMarks = [];
+        }
+        /**
+         * Center tick labels in cells.
+         * @private
+         */
+        function onTickAfterGetLabelPosition(e) {
+            var tick = this,
+                label = tick.label,
+                axis = tick.axis,
+                reversed = axis.reversed,
+                chart = axis.chart,
+                options = axis.options,
+                gridOptions = options.grid || {},
+                labelOpts = axis.options.labels,
+                align = labelOpts.align, 
+                // verticalAlign is currently not supported for axis.labels.
+                verticalAlign = 'middle', // labelOpts.verticalAlign,
+                side = GridAxisSide[axis.side],
+                tickmarkOffset = e.tickmarkOffset,
+                tickPositions = axis.tickPositions,
+                tickPos = tick.pos - tickmarkOffset,
+                nextTickPos = (isNumber(tickPositions[e.index + 1]) ?
+                    tickPositions[e.index + 1] - tickmarkOffset :
+                    (axis.max || 0) + tickmarkOffset),
+                tickSize = axis.tickSize('tick'),
+                tickWidth = tickSize ? tickSize[0] : 0,
+                crispCorr = tickSize ? tickSize[1] / 2 : 0;
+            var labelHeight,
+                lblMetrics,
+                lines,
+                bottom,
+                top,
+                left,
+                right;
+            // Only center tick labels in grid axes
+            if (gridOptions.enabled === true) {
+                // Calculate top and bottom positions of the cell.
+                if (side === 'top') {
+                    bottom = axis.top + axis.offset;
+                    top = bottom - tickWidth;
                 }
-                if (!axis.grid) {
-                    axis.grid = new Additions(axis);
+                else if (side === 'bottom') {
+                    top = chart.chartHeight - axis.bottom + axis.offset;
+                    bottom = top + tickWidth;
                 }
-                axis.hiddenLabels = [];
-                axis.hiddenMarks = [];
-            }
-            /**
-             * Center tick labels in cells.
-             * @private
-             */
-            function onTickAfterGetLabelPosition(e) {
-                var tick = this,
-                    label = tick.label,
-                    axis = tick.axis,
-                    reversed = axis.reversed,
-                    chart = axis.chart,
-                    options = axis.options,
-                    gridOptions = options.grid || {},
-                    labelOpts = axis.options.labels,
-                    align = labelOpts.align, 
-                    // verticalAlign is currently not supported for axis.labels.
-                    verticalAlign = 'middle', // labelOpts.verticalAlign,
-                    side = GridAxis.Side[axis.side],
-                    tickmarkOffset = e.tickmarkOffset,
-                    tickPositions = axis.tickPositions,
-                    tickPos = tick.pos - tickmarkOffset,
-                    nextTickPos = (isNumber(tickPositions[e.index + 1]) ?
-                        tickPositions[e.index + 1] - tickmarkOffset :
-                        (axis.max || 0) + tickmarkOffset),
-                    tickSize = axis.tickSize('tick'),
-                    tickWidth = tickSize ? tickSize[0] : 0,
-                    crispCorr = tickSize ? tickSize[1] / 2 : 0;
-                var labelHeight,
-                    lblMetrics,
-                    lines,
-                    bottom,
-                    top,
-                    left,
-                    right;
-                // Only center tick labels in grid axes
-                if (gridOptions.enabled === true) {
-                    // Calculate top and bottom positions of the cell.
-                    if (side === 'top') {
-                        bottom = axis.top + axis.offset;
-                        top = bottom - tickWidth;
-                    }
-                    else if (side === 'bottom') {
-                        top = chart.chartHeight - axis.bottom + axis.offset;
-                        bottom = top + tickWidth;
-                    }
-                    else {
-                        bottom = axis.top + axis.len - (axis.translate(reversed ? nextTickPos : tickPos) || 0);
-                        top = axis.top + axis.len - (axis.translate(reversed ? tickPos : nextTickPos) || 0);
-                    }
-                    // Calculate left and right positions of the cell.
-                    if (side === 'right') {
-                        left = chart.chartWidth - axis.right + axis.offset;
-                        right = left + tickWidth;
-                    }
-                    else if (side === 'left') {
-                        right = axis.left + axis.offset;
-                        left = right - tickWidth;
-                    }
-                    else {
-                        left = Math.round(axis.left + (axis.translate(reversed ? nextTickPos : tickPos) || 0)) - crispCorr;
-                        right = Math.min(// #15742
-                        Math.round(axis.left + (axis.translate(reversed ? tickPos : nextTickPos) || 0)) - crispCorr, axis.left + axis.len);
-                    }
-                    tick.slotWidth = right - left;
-                    // Calculate the positioning of the label based on
-                    // alignment.
-                    e.pos.x = (align === 'left' ?
-                        left :
-                        align === 'right' ?
-                            right :
-                            left + ((right - left) / 2) // default to center
-                    );
-                    e.pos.y = (verticalAlign === 'top' ?
-                        top :
-                        verticalAlign === 'bottom' ?
-                            bottom :
-                            top + ((bottom - top) / 2) // default to middle
-                    );
-                    lblMetrics = chart.renderer.fontMetrics(labelOpts.style.fontSize, label && label.element);
-                    labelHeight = label ? label.getBBox().height : 0;
-                    // Adjustment to y position to align the label correctly.
-                    // Would be better to have a setter or similar for this.
-                    if (!labelOpts.useHTML) {
-                        lines = Math.round(labelHeight / lblMetrics.h);
-                        e.pos.y += (
-                        // Center the label
-                        // TODO: why does this actually center the label?
-                        ((lblMetrics.b - (lblMetrics.h - lblMetrics.f)) / 2) +
-                            // Adjust for height of additional lines.
-                            -(((lines - 1) * lblMetrics.h) / 2));
-                    }
-                    else {
-                        e.pos.y += (
-                        // Readjust yCorr in htmlUpdateTransform
-                        lblMetrics.b +
-                            // Adjust for height of html label
-                            -(labelHeight / 2));
-                    }
-                    e.pos.x += (axis.horiz && labelOpts.x) || 0;
+                else {
+                    bottom = axis.top + axis.len - (axis.translate(reversed ? nextTickPos : tickPos) || 0);
+                    top = axis.top + axis.len - (axis.translate(reversed ? tickPos : nextTickPos) || 0);
                 }
-            }
-            /**
-             * @private
-             */
-            function onTickLabelFormat(ctx) {
-                var axis = ctx.axis,
-                    value = ctx.value;
-                if (axis.options.grid &&
-                    axis.options.grid.enabled) {
-                    var tickPos = axis.tickPositions;
-                    var series = (axis.linkedParent || axis).series[0];
-                    var isFirst = value === tickPos[0];
-                    var isLast = value === tickPos[tickPos.length - 1];
-                    var point = series && find(series.options.data,
-                        function (p) {
-                            return p[axis.isXAxis ? 'x' : 'y'] === value;
-                    });
-                    var pointCopy = void 0;
-                    if (point && series.is('gantt')) {
-                        // For the Gantt set point aliases to the pointCopy
-                        // to do not change the original point
-                        pointCopy = merge(point);
-                        H.seriesTypes.gantt.prototype.pointClass
-                            .setGanttPointAliases(pointCopy);
-                    }
-                    // Make additional properties available for the
-                    // formatter
-                    ctx.isFirst = isFirst;
-                    ctx.isLast = isLast;
-                    ctx.point = pointCopy;
+                // Calculate left and right positions of the cell.
+                if (side === 'right') {
+                    left = chart.chartWidth - axis.right + axis.offset;
+                    right = left + tickWidth;
+                }
+                else if (side === 'left') {
+                    right = axis.left + axis.offset;
+                    left = right - tickWidth;
+                }
+                else {
+                    left = Math.round(axis.left + (axis.translate(reversed ? nextTickPos : tickPos) || 0)) - crispCorr;
+                    right = Math.min(// #15742
+                    Math.round(axis.left + (axis.translate(reversed ? tickPos : nextTickPos) || 0)) - crispCorr, axis.left + axis.len);
+                }
+                tick.slotWidth = right - left;
+                // Calculate the positioning of the label based on
+                // alignment.
+                e.pos.x = (align === 'left' ?
+                    left :
+                    align === 'right' ?
+                        right :
+                        left + ((right - left) / 2) // default to center
+                );
+                e.pos.y = (verticalAlign === 'top' ?
+                    top :
+                    verticalAlign === 'bottom' ?
+                        bottom :
+                        top + ((bottom - top) / 2) // default to middle
+                );
+                lblMetrics = chart.renderer.fontMetrics(labelOpts.style.fontSize, label && label.element);
+                labelHeight = label ? label.getBBox().height : 0;
+                // Adjustment to y position to align the label correctly.
+                // Would be better to have a setter or similar for this.
+                if (!labelOpts.useHTML) {
+                    lines = Math.round(labelHeight / lblMetrics.h);
+                    e.pos.y += (
+                    // Center the label
+                    // TODO: why does this actually center the label?
+                    ((lblMetrics.b - (lblMetrics.h - lblMetrics.f)) / 2) +
+                        // Adjust for height of additional lines.
+                        -(((lines - 1) * lblMetrics.h) / 2));
                 }
+                else {
+                    e.pos.y += (
+                    // Readjust yCorr in htmlUpdateTransform
+                    lblMetrics.b +
+                        // Adjust for height of html label
+                        -(labelHeight / 2));
+                }
+                e.pos.x += (axis.horiz && labelOpts.x) || 0;
             }
-            /**
-             * Makes tick labels which are usually ignored in a linked axis
-             * displayed if they are within range of linkedParent.min.
-             * ```
-             *                        _____________________________
-             *                        |   |       |       |       |
-             * Make this:             |   |   2   |   3   |   4   |
-             *                        |___|_______|_______|_______|
-             *                          ^
-             *                        _____________________________
-             *                        |   |       |       |       |
-             * Into this:             | 1 |   2   |   3   |   4   |
-             *                        |___|_______|_______|_______|
-             *                          ^
-             * ```
-             * @private
-             * @todo Does this function do what the drawing says? Seems to affect
-             *       ticks and not the labels directly?
-             */
-            function onTrimTicks() {
-                var axis = this;
-                var options = axis.options;
-                var gridOptions = options.grid || {};
-                var categoryAxis = axis.categories;
-                var tickPositions = axis.tickPositions;
-                var firstPos = tickPositions[0];
-                var lastPos = tickPositions[tickPositions.length - 1];
-                var linkedMin = axis.linkedParent && axis.linkedParent.min;
-                var linkedMax = axis.linkedParent && axis.linkedParent.max;
-                var min = linkedMin || axis.min;
-                var max = linkedMax || axis.max;
-                var tickInterval = axis.tickInterval;
-                var endMoreThanMin = (firstPos < min &&
-                        firstPos + tickInterval > min);
-                var startLessThanMax = (lastPos > max &&
-                        lastPos - tickInterval < max);
-                if (gridOptions.enabled === true &&
-                    !categoryAxis &&
-                    (axis.horiz || axis.isLinked)) {
-                    if (endMoreThanMin && !options.startOnTick) {
-                        tickPositions[0] = min;
-                    }
-                    if (startLessThanMax && !options.endOnTick) {
-                        tickPositions[tickPositions.length - 1] = max;
-                    }
+        }
+        /**
+         * @private
+         */
+        function onTickLabelFormat(ctx) {
+            var axis = ctx.axis,
+                value = ctx.value;
+            if (axis.options.grid &&
+                axis.options.grid.enabled) {
+                var tickPos = axis.tickPositions;
+                var series = (axis.linkedParent || axis).series[0];
+                var isFirst = value === tickPos[0];
+                var isLast = value === tickPos[tickPos.length - 1];
+                var point = series && find(series.options.data,
+                    function (p) {
+                        return p[axis.isXAxis ? 'x' : 'y'] === value;
+                });
+                var pointCopy = void 0;
+                if (point && series.is('gantt')) {
+                    // For the Gantt set point aliases to the pointCopy
+                    // to do not change the original point
+                    pointCopy = merge(point);
+                    H.seriesTypes.gantt.prototype.pointClass
+                        .setGanttPointAliases(pointCopy);
                 }
+                // Make additional properties available for the
+                // formatter
+                ctx.isFirst = isFirst;
+                ctx.isLast = isLast;
+                ctx.point = pointCopy;
             }
-            /**
-             * Avoid altering tickInterval when reserving space.
-             * @private
-             */
-            function wrapUnsquish(proceed) {
-                var axis = this;
-                var _a = axis.options.grid,
-                    gridOptions = _a === void 0 ? {} : _a;
-                if (gridOptions.enabled === true && axis.categories) {
-                    return axis.tickInterval;
+        }
+        /**
+         * Makes tick labels which are usually ignored in a linked axis
+         * displayed if they are within range of linkedParent.min.
+         * ```
+         *                        _____________________________
+         *                        |   |       |       |       |
+         * Make this:             |   |   2   |   3   |   4   |
+         *                        |___|_______|_______|_______|
+         *                          ^
+         *                        _____________________________
+         *                        |   |       |       |       |
+         * Into this:             | 1 |   2   |   3   |   4   |
+         *                        |___|_______|_______|_______|
+         *                          ^
+         * ```
+         * @private
+         * @todo Does this function do what the drawing says? Seems to affect
+         *       ticks and not the labels directly?
+         */
+        function onTrimTicks() {
+            var axis = this;
+            var options = axis.options;
+            var gridOptions = options.grid || {};
+            var categoryAxis = axis.categories;
+            var tickPositions = axis.tickPositions;
+            var firstPos = tickPositions[0];
+            var lastPos = tickPositions[tickPositions.length - 1];
+            var linkedMin = axis.linkedParent && axis.linkedParent.min;
+            var linkedMax = axis.linkedParent && axis.linkedParent.max;
+            var min = linkedMin || axis.min;
+            var max = linkedMax || axis.max;
+            var tickInterval = axis.tickInterval;
+            var endMoreThanMin = (firstPos < min &&
+                    firstPos + tickInterval > min);
+            var startLessThanMax = (lastPos > max &&
+                    lastPos - tickInterval < max);
+            if (gridOptions.enabled === true &&
+                !categoryAxis &&
+                (axis.horiz || axis.isLinked)) {
+                if (endMoreThanMin && !options.startOnTick) {
+                    tickPositions[0] = min;
                 }
-                return proceed.apply(axis, argsToArray(arguments));
+                if (startLessThanMax && !options.endOnTick) {
+                    tickPositions[tickPositions.length - 1] = max;
+                }
+            }
+        }
+        /**
+         * Avoid altering tickInterval when reserving space.
+         * @private
+         */
+        function wrapUnsquish(proceed) {
+            var axis = this;
+            var _a = axis.options.grid,
+                gridOptions = _a === void 0 ? {} : _a;
+            if (gridOptions.enabled === true && axis.categories) {
+                return axis.tickInterval;
+            }
+            return proceed.apply(axis, argsToArray(arguments));
+        }
+        /* *
+         *
+         *  Class
+         *
+         * */
+        /**
+         * Additions for grid axes.
+         * @private
+         * @class
+         */
+        var GridAxisAdditions = /** @class */ (function () {
+                /* *
+                *
+                *  Constructors
+                *
+                * */
+                function GridAxisAdditions(axis) {
+                    this.axis = axis;
             }
             /* *
+            *
+            *  Functions
+            *
+            * */
+            /**
+             * Checks if an axis is the outer axis in its dimension. Since
+             * axes are placed outwards in order, the axis with the highest
+             * index is the outermost axis.
              *
-             *  Class
+             * Example: If there are multiple x-axes at the top of the chart,
+             * this function returns true if the axis supplied is the last
+             * of the x-axes.
              *
-             * */
-            /**
-             * Additions for grid axes.
              * @private
-             * @class
+             *
+             * @return {boolean}
+             * True if the axis is the outermost axis in its dimension; false if
+             * not.
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                    *
-                    *  Constructors
-                    *
-                    * */
-                    function Additions(axis) {
-                        this.axis = axis;
-                }
-                /* *
-                *
-                *  Functions
-                *
-                * */
-                /**
-                 * Checks if an axis is the outer axis in its dimension. Since
-                 * axes are placed outwards in order, the axis with the highest
-                 * index is the outermost axis.
-                 *
-                 * Example: If there are multiple x-axes at the top of the chart,
-                 * this function returns true if the axis supplied is the last
-                 * of the x-axes.
-                 *
-                 * @private
-                 *
-                 * @return {boolean}
-                 * True if the axis is the outermost axis in its dimension; false if
-                 * not.
-                 */
-                Additions.prototype.isOuterAxis = function () {
-                    var axis = this.axis;
-                    var chart = axis.chart;
-                    var columnIndex = axis.grid.columnIndex;
-                    var columns = (axis.linkedParent && axis.linkedParent.grid.columns ||
-                            axis.grid.columns);
-                    var parentAxis = columnIndex ? axis.linkedParent : axis;
-                    var thisIndex = -1,
-                        lastIndex = 0;
-                    chart[axis.coll].forEach(function (otherAxis, index) {
-                        if (otherAxis.side === axis.side &&
-                            !otherAxis.options.isInternal) {
-                            lastIndex = index;
-                            if (otherAxis === parentAxis) {
-                                // Get the index of the axis in question
-                                thisIndex = index;
-                            }
+            GridAxisAdditions.prototype.isOuterAxis = function () {
+                var axis = this.axis;
+                var chart = axis.chart;
+                var columnIndex = axis.grid.columnIndex;
+                var columns = (axis.linkedParent && axis.linkedParent.grid.columns ||
+                        axis.grid.columns);
+                var parentAxis = columnIndex ? axis.linkedParent : axis;
+                var thisIndex = -1,
+                    lastIndex = 0;
+                (chart[axis.coll] || []).forEach(function (otherAxis, index) {
+                    if (otherAxis.side === axis.side &&
+                        !otherAxis.options.isInternal) {
+                        lastIndex = index;
+                        if (otherAxis === parentAxis) {
+                            // Get the index of the axis in question
+                            thisIndex = index;
                         }
-                    });
-                    return (lastIndex === thisIndex &&
-                        (isNumber(columnIndex) ?
-                            columns.length === columnIndex :
-                            true));
-                };
-                /**
-                 * Add extra border based on the provided path.
-                 * @private
-                 * @param {SVGPath} path
-                 * The path of the border.
-                 * @return {Highcharts.SVGElement}
-                 * Border
-                 */
-                Additions.prototype.renderBorder = function (path) {
-                    var axis = this.axis,
-                        renderer = axis.chart.renderer,
-                        options = axis.options,
-                        extraBorderLine = renderer.path(path)
-                            .addClass('highcharts-axis-line')
-                            .add(axis.axisBorder);
-                    if (!renderer.styledMode) {
-                        extraBorderLine.attr({
-                            stroke: options.lineColor,
-                            'stroke-width': options.lineWidth,
-                            zIndex: 7
-                        });
                     }
-                    return extraBorderLine;
-                };
-                return Additions;
-            }());
-            GridAxis.Additions = Additions;
-        })(GridAxis || (GridAxis = {}));
+                });
+                return (lastIndex === thisIndex &&
+                    (isNumber(columnIndex) ?
+                        columns.length === columnIndex :
+                        true));
+            };
+            /**
+             * Add extra border based on the provided path.
+             * @private
+             * @param {SVGPath} path
+             * The path of the border.
+             * @return {Highcharts.SVGElement}
+             * Border
+             */
+            GridAxisAdditions.prototype.renderBorder = function (path) {
+                var axis = this.axis,
+                    renderer = axis.chart.renderer,
+                    options = axis.options,
+                    extraBorderLine = renderer.path(path)
+                        .addClass('highcharts-axis-line')
+                        .add(axis.axisBorder);
+                if (!renderer.styledMode) {
+                    extraBorderLine.attr({
+                        stroke: options.lineColor,
+                        'stroke-width': options.lineWidth,
+                        zIndex: 7
+                    });
+                }
+                return extraBorderLine;
+            };
+            return GridAxisAdditions;
+        }());
         /* *
          *
          *  Registry
@@ -1709,7 +1702,10 @@
         };
         // 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());
@@ -1728,6 +1724,9 @@
          *  Default Export
          *
          * */
+        var GridAxis = {
+                compose: compose
+            };
         /* *
          *
          *  API Options
@@ -1941,7 +1940,7 @@
 
         return Tree;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) {
+    _registerModule(_modules, 'Core/Axis/TreeGrid/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -1957,34 +1956,237 @@
             isNumber = U.isNumber,
             pick = U.pick,
             wrap = U.wrap;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
          * @private
          */
-        var TreeGridTick;
-        (function (TreeGridTick) {
-            /* *
-             *
-             *  Interfaces
-             *
-             * */
-            /* *
-             *
-             *  Variables
-             *
-             * */
-            var applied = false;
+        function onTickInit() {
+            var tick = this;
+            if (!tick.treeGrid) {
+                tick.treeGrid = new TreeGridTickAdditions(tick);
+            }
+        }
+        /**
+         * @private
+         */
+        function onTickHover(label) {
+            label.addClass('highcharts-treegrid-node-active');
+            if (!label.renderer.styledMode) {
+                label.css({
+                    textDecoration: 'underline'
+                });
+            }
+        }
+        /**
+         * @private
+         */
+        function onTickHoverExit(label, options) {
+            var css = isObject(options.style) ? options.style : {};
+            label.removeClass('highcharts-treegrid-node-active');
+            if (!label.renderer.styledMode) {
+                label.css({ textDecoration: css.textDecoration });
+            }
+        }
+        /**
+         * @private
+         */
+        function renderLabelIcon(tick, params) {
+            var treeGrid = tick.treeGrid,
+                isNew = !treeGrid.labelIcon,
+                renderer = params.renderer,
+                labelBox = params.xy,
+                options = params.options,
+                width = options.width || 0,
+                height = options.height || 0,
+                iconCenter = {
+                    x: labelBox.x - (width / 2) - (options.padding || 0),
+                    y: labelBox.y - (height / 2)
+                },
+                rotation = params.collapsed ? 90 : 180,
+                shouldRender = params.show && isNumber(iconCenter.y);
+            var icon = treeGrid.labelIcon;
+            if (!icon) {
+                treeGrid.labelIcon = icon = renderer
+                    .path(renderer.symbols[options.type](options.x || 0, options.y || 0, width, height))
+                    .addClass('highcharts-label-icon')
+                    .add(params.group);
+            }
+            // Set the new position, and show or hide
+            icon[shouldRender ? 'show' : 'hide'](); // #14904, #1338
+            // Presentational attributes
+            if (!renderer.styledMode) {
+                icon
+                    .attr({
+                    cursor: 'pointer',
+                    'fill': pick(params.color, "#666666" /* Palette.neutralColor60 */),
+                    'stroke-width': 1,
+                    stroke: options.lineColor,
+                    strokeWidth: options.lineWidth || 0
+                });
+            }
+            // Update the icon positions
+            icon[isNew ? 'attr' : 'animate']({
+                translateX: iconCenter.x,
+                translateY: iconCenter.y,
+                rotation: rotation
+            });
+        }
+        /**
+         * @private
+         */
+        function wrapGetLabelPosition(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
+            var tick = this,
+                lbOptions = pick(tick.options && tick.options.labels,
+                labelOptions),
+                pos = tick.pos,
+                axis = tick.axis,
+                options = axis.options,
+                isTreeGrid = options.type === 'treegrid',
+                result = proceed.apply(tick,
+                [x,
+                y,
+                label,
+                horiz,
+                lbOptions,
+                tickmarkOffset,
+                index,
+                step]);
+            var symbolOptions,
+                indentation,
+                mapOfPosToGridNode,
+                node,
+                level;
+            if (isTreeGrid) {
+                symbolOptions = (lbOptions && isObject(lbOptions.symbol, true) ?
+                    lbOptions.symbol :
+                    {});
+                indentation = (lbOptions && isNumber(lbOptions.indentation) ?
+                    lbOptions.indentation :
+                    0);
+                mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode;
+                node = mapOfPosToGridNode && mapOfPosToGridNode[pos];
+                level = (node && node.depth) || 1;
+                result.x += (
+                // Add space for symbols
+                ((symbolOptions.width || 0) +
+                    ((symbolOptions.padding || 0) * 2)) +
+                    // Apply indentation
+                    ((level - 1) * indentation));
+            }
+            return result;
+        }
+        /**
+         * @private
+         */
+        function wrapRenderLabel(proceed) {
+            var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ?
+                    labelOptions.symbol :
+                    {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode;
+            var collapsed,
+                addClassName,
+                removeClassName;
+            if (isTreeGrid && node) {
+                // Add class name for hierarchical styling.
+                if (label &&
+                    label.element) {
+                    label.addClass(prefixClassName + 'level-' + level);
+                }
+            }
+            proceed.apply(tick, Array.prototype.slice.call(arguments, 1));
+            if (isTreeGrid &&
+                label &&
+                label.element &&
+                node &&
+                node.descendants &&
+                node.descendants > 0) {
+                collapsed = axis.treeGrid.isCollapsed(node);
+                renderLabelIcon(tick, {
+                    color: (!styledMode &&
+                        label.styles &&
+                        label.styles.color ||
+                        ''),
+                    collapsed: collapsed,
+                    group: label.parentGroup,
+                    options: symbolOptions,
+                    renderer: label.renderer,
+                    show: shouldRender,
+                    xy: label.xy
+                });
+                // Add class name for the node.
+                addClassName = prefixClassName +
+                    (collapsed ? 'collapsed' : 'expanded');
+                removeClassName = prefixClassName +
+                    (collapsed ? 'expanded' : 'collapsed');
+                label
+                    .addClass(addClassName)
+                    .removeClass(removeClassName);
+                if (!styledMode) {
+                    label.css({
+                        cursor: 'pointer'
+                    });
+                }
+                // Add events to both label text and icon
+                [label, tick.treeGrid.labelIcon].forEach(function (object) {
+                    if (object && !object.attachedTreeGridEvents) {
+                        // On hover
+                        addEvent(object.element, 'mouseover', function () {
+                            onTickHover(label);
+                        });
+                        // On hover out
+                        addEvent(object.element, 'mouseout', function () {
+                            onTickHoverExit(label, labelOptions);
+                        });
+                        addEvent(object.element, 'click', function () {
+                            tick.treeGrid.toggleCollapse();
+                        });
+                        object.attachedTreeGridEvents = true;
+                    }
+                });
+            }
+        }
+        /* *
+         *
+         *  Classes
+         *
+         * */
+        /**
+         * @private
+         * @class
+         */
+        var TreeGridTickAdditions = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                /**
+                 * @private
+                 */
+                function TreeGridTickAdditions(tick) {
+                    this.tick = tick;
+            }
             /* *
              *
-             *  Functions
+             *  Static Functions
              *
              * */
             /**
              * @private
              */
-            function compose(TickClass) {
-                if (!applied) {
-                    addEvent(TickClass, 'init', onInit);
+            TreeGridTickAdditions.compose = function (TickClass) {
+                if (composedClasses.indexOf(TickClass) === -1) {
+                    composedClasses.push(TickClass);
+                    addEvent(TickClass, 'init', onTickInit);
                     wrap(TickClass.prototype, 'getLabelPosition', wrapGetLabelPosition);
                     wrap(TickClass.prototype, 'renderLabel', wrapRenderLabel);
                     // backwards compatibility
@@ -1997,313 +2199,106 @@
                     TickClass.prototype.toggleCollapse = function (redraw) {
                         this.treeGrid.toggleCollapse(redraw);
                     };
-                    applied = true;
-                }
-            }
-            TreeGridTick.compose = compose;
-            /**
-             * @private
-             */
-            function onInit() {
-                var tick = this;
-                if (!tick.treeGrid) {
-                    tick.treeGrid = new Additions(tick);
-                }
-            }
-            /**
-             * @private
-             */
-            function onTickHover(label) {
-                label.addClass('highcharts-treegrid-node-active');
-                if (!label.renderer.styledMode) {
-                    label.css({
-                        textDecoration: 'underline'
-                    });
                 }
-            }
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
+             * Collapse the grid cell. Used when axis is of type treegrid.
+             *
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
+             *
              * @private
+             * @function Highcharts.Tick#collapse
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            function onTickHoverExit(label, options) {
-                var css = isObject(options.style) ? options.style : {};
-                label.removeClass('highcharts-treegrid-node-active');
-                if (!label.renderer.styledMode) {
-                    label.css({ textDecoration: css.textDecoration });
+            TreeGridTickAdditions.prototype.collapse = function (redraw) {
+                var tick = this.tick,
+                    axis = tick.axis,
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.collapse(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-            }
+            };
             /**
+             * Destroy remaining labelIcon if exist.
+             *
              * @private
+             * @function Highcharts.Tick#destroy
              */
-            function renderLabelIcon(tick, params) {
-                var treeGrid = tick.treeGrid,
-                    isNew = !treeGrid.labelIcon,
-                    renderer = params.renderer,
-                    labelBox = params.xy,
-                    options = params.options,
-                    width = options.width || 0,
-                    height = options.height || 0,
-                    iconCenter = {
-                        x: labelBox.x - (width / 2) - (options.padding || 0),
-                        y: labelBox.y - (height / 2)
-                    },
-                    rotation = params.collapsed ? 90 : 180,
-                    shouldRender = params.show && isNumber(iconCenter.y);
-                var icon = treeGrid.labelIcon;
-                if (!icon) {
-                    treeGrid.labelIcon = icon = renderer
-                        .path(renderer.symbols[options.type](options.x || 0, options.y || 0, width, height))
-                        .addClass('highcharts-label-icon')
-                        .add(params.group);
-                }
-                // Set the new position, and show or hide
-                icon.attr({ y: shouldRender ? 0 : -9999 }); // #14904, #1338
-                // Presentational attributes
-                if (!renderer.styledMode) {
-                    icon
-                        .attr({
-                        cursor: 'pointer',
-                        'fill': pick(params.color, "#666666" /* neutralColor60 */),
-                        'stroke-width': 1,
-                        stroke: options.lineColor,
-                        strokeWidth: options.lineWidth || 0
-                    });
+            TreeGridTickAdditions.prototype.destroy = function () {
+                if (this.labelIcon) {
+                    this.labelIcon.destroy();
                 }
-                // Update the icon positions
-                icon[isNew ? 'attr' : 'animate']({
-                    translateX: iconCenter.x,
-                    translateY: iconCenter.y,
-                    rotation: rotation
-                });
-            }
+            };
             /**
+             * Expand the grid cell. Used when axis is of type treegrid.
+             *
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
+             *
              * @private
+             * @function Highcharts.Tick#expand
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            function wrapGetLabelPosition(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
-                var tick = this,
-                    lbOptions = pick(tick.options && tick.options.labels,
-                    labelOptions),
-                    pos = tick.pos,
+            TreeGridTickAdditions.prototype.expand = function (redraw) {
+                var tick = this.tick,
                     axis = tick.axis,
-                    options = axis.options,
-                    isTreeGrid = options.type === 'treegrid',
-                    result = proceed.apply(tick,
-                    [x,
-                    y,
-                    label,
-                    horiz,
-                    lbOptions,
-                    tickmarkOffset,
-                    index,
-                    step]);
-                var symbolOptions,
-                    indentation,
-                    mapOfPosToGridNode,
-                    node,
-                    level;
-                if (isTreeGrid) {
-                    symbolOptions = (lbOptions && isObject(lbOptions.symbol, true) ?
-                        lbOptions.symbol :
-                        {});
-                    indentation = (lbOptions && isNumber(lbOptions.indentation) ?
-                        lbOptions.indentation :
-                        0);
-                    mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode;
-                    node = mapOfPosToGridNode && mapOfPosToGridNode[pos];
-                    level = (node && node.depth) || 1;
-                    result.x += (
-                    // Add space for symbols
-                    ((symbolOptions.width || 0) +
-                        ((symbolOptions.padding || 0) * 2)) +
-                        // Apply indentation
-                        ((level - 1) * indentation));
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.expand(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-                return result;
-            }
+            };
             /**
-             * @private
-             */
-            function wrapRenderLabel(proceed) {
-                var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ?
-                        labelOptions.symbol :
-                        {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode;
-                var collapsed,
-                    addClassName,
-                    removeClassName;
-                if (isTreeGrid && node) {
-                    // Add class name for hierarchical styling.
-                    if (label &&
-                        label.element) {
-                        label.addClass(prefixClassName + 'level-' + level);
-                    }
-                }
-                proceed.apply(tick, Array.prototype.slice.call(arguments, 1));
-                if (isTreeGrid &&
-                    label &&
-                    label.element &&
-                    node &&
-                    node.descendants &&
-                    node.descendants > 0) {
-                    collapsed = axis.treeGrid.isCollapsed(node);
-                    renderLabelIcon(tick, {
-                        color: (!styledMode &&
-                            label.styles &&
-                            label.styles.color ||
-                            ''),
-                        collapsed: collapsed,
-                        group: label.parentGroup,
-                        options: symbolOptions,
-                        renderer: label.renderer,
-                        show: shouldRender,
-                        xy: label.xy
-                    });
-                    // Add class name for the node.
-                    addClassName = prefixClassName +
-                        (collapsed ? 'collapsed' : 'expanded');
-                    removeClassName = prefixClassName +
-                        (collapsed ? 'expanded' : 'collapsed');
-                    label
-                        .addClass(addClassName)
-                        .removeClass(removeClassName);
-                    if (!styledMode) {
-                        label.css({
-                            cursor: 'pointer'
-                        });
-                    }
-                    // Add events to both label text and icon
-                    [label, tick.treeGrid.labelIcon].forEach(function (object) {
-                        if (object && !object.attachedTreeGridEvents) {
-                            // On hover
-                            addEvent(object.element, 'mouseover', function () {
-                                onTickHover(label);
-                            });
-                            // On hover out
-                            addEvent(object.element, 'mouseout', function () {
-                                onTickHoverExit(label, labelOptions);
-                            });
-                            addEvent(object.element, 'click', function () {
-                                tick.treeGrid.toggleCollapse();
-                            });
-                            object.attachedTreeGridEvents = true;
-                        }
-                    });
-                }
-            }
-            /* *
+             * Toggle the collapse/expand state of the grid cell. Used when axis is
+             * of type treegrid.
              *
-             *  Classes
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
              *
-             * */
-            /**
              * @private
-             * @class
+             * @function Highcharts.Tick#toggleCollapse
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                     *
-                     *  Constructors
-                     *
-                     * */
-                    /**
-                     * @private
-                     */
-                    function Additions(tick) {
-                        this.tick = tick;
+            TreeGridTickAdditions.prototype.toggleCollapse = function (redraw) {
+                var tick = this.tick,
+                    axis = tick.axis,
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.toggleCollapse(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-                /* *
-                 *
-                 *  Functions
-                 *
-                 * */
-                /**
-                 * Collapse the grid cell. Used when axis is of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#collapse
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.collapse = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.collapse(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                /**
-                 * Destroy remaining labelIcon if exist.
-                 *
-                 * @private
-                 * @function Highcharts.Tick#destroy
-                 */
-                Additions.prototype.destroy = function () {
-                    if (this.labelIcon) {
-                        this.labelIcon.destroy();
-                    }
-                };
-                /**
-                 * Expand the grid cell. Used when axis is of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#expand
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.expand = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.expand(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                /**
-                 * Toggle the collapse/expand state of the grid cell. Used when axis is
-                 * of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#toggleCollapse
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.toggleCollapse = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.toggleCollapse(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                return Additions;
-            }());
-            TreeGridTick.Additions = Additions;
-        })(TreeGridTick || (TreeGridTick = {}));
+            };
+            return TreeGridTickAdditions;
+        }());
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return TreeGridTick;
+        return TreeGridTickAdditions;
     });
     _registerModule(_modules, 'Series/TreeUtilities.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
         /* *
@@ -2535,7 +2530,7 @@
 
         return TreeUtilities;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGridTick.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, TU, U) {
+    _registerModule(_modules, 'Core/Axis/TreeGrid/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGrid/TreeGridTick.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, TU, U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -2556,757 +2551,769 @@
             merge = U.merge,
             pick = U.pick,
             wrap = U.wrap;
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Variables
+         *
+         * */
+        var TickConstructor;
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
          * @private
          */
-        var TreeGridAxis;
-        (function (TreeGridAxis) {
-            /* *
-             *
-             *  Declarations
-             *
-             * */
-            /* *
-             *
-             *  Variables
-             *
-             * */
-            var TickConstructor;
+        function getBreakFromNode(node, max) {
+            var to = node.collapseEnd || 0;
+            var from = node.collapseStart || 0;
+            // In broken-axis, the axis.max is minimized until it is not within a
+            // break. Therefore, if break.to is larger than axis.max, the axis.to
+            // should not add the 0.5 axis.tickMarkOffset, to avoid adding a break
+            // larger than axis.max.
+            // TODO consider simplifying broken-axis and this might solve itself
+            if (to >= max) {
+                from -= 0.5;
+            }
+            return {
+                from: from,
+                to: to,
+                showPoints: false
+            };
+        }
+        /**
+         * Creates a tree structure of the data, and the treegrid. Calculates
+         * categories, and y-values of points based on the tree.
+         *
+         * @private
+         * @function getTreeGridFromData
+         *
+         * @param {Array<Highcharts.GanttPointOptions>} data
+         * All the data points to display in the axis.
+         *
+         * @param {boolean} uniqueNames
+         * Whether or not the data node with the same name should share grid cell. If
+         * true they do share cell. False by default.
+         *
+         * @param {number} numberOfSeries
+         *
+         * @return {Object}
+         * Returns an object containing categories, mapOfIdToNode,
+         * mapOfPosToGridNode, and tree.
+         *
+         * @todo There should be only one point per line.
+         * @todo It should be optional to have one category per point, or merge
+         *       cells
+         * @todo Add unit-tests.
+         */
+        function getTreeGridFromData(data, uniqueNames, numberOfSeries) {
+            var categories = [],
+                collapsedNodes = [],
+                mapOfIdToNode = {},
+                uniqueNamesEnabled = typeof uniqueNames === 'boolean' ?
+                    uniqueNames : false;
+            var mapOfPosToGridNode = {},
+                posIterator = -1;
+            // Build the tree from the series data.
+            var treeParams = {
+                    // After the children has been created.
+                    after: function (node) {
+                        var gridNode = mapOfPosToGridNode[node.pos];
+                    var height = 0,
+                        descendants = 0;
+                    gridNode.children.forEach(function (child) {
+                        descendants += (child.descendants || 0) + 1;
+                        height = Math.max((child.height || 0) + 1, height);
+                    });
+                    gridNode.descendants = descendants;
+                    gridNode.height = height;
+                    if (gridNode.collapsed) {
+                        collapsedNodes.push(gridNode);
+                    }
+                },
+                // Before the children has been created.
+                before: function (node) {
+                    var data = isObject(node.data,
+                        true) ?
+                            node.data :
+                            {},
+                        name = isString(data.name) ? data.name : '',
+                        parentNode = mapOfIdToNode[node.parent],
+                        parentGridNode = (isObject(parentNode,
+                        true) ?
+                            mapOfPosToGridNode[parentNode.pos] :
+                            null),
+                        hasSameName = function (x) {
+                            return x.name === name;
+                    };
+                    var gridNode,
+                        pos;
+                    // If not unique names, look for sibling node with the same name
+                    if (uniqueNamesEnabled &&
+                        isObject(parentGridNode, true) &&
+                        !!(gridNode = find(parentGridNode.children, hasSameName))) {
+                        // If there is a gridNode with the same name, reuse position
+                        pos = gridNode.pos;
+                        // Add data node to list of nodes in the grid node.
+                        gridNode.nodes.push(node);
+                    }
+                    else {
+                        // If it is a new grid node, increment position.
+                        pos = posIterator++;
+                    }
+                    // Add new grid node to map.
+                    if (!mapOfPosToGridNode[pos]) {
+                        mapOfPosToGridNode[pos] = gridNode = {
+                            depth: parentGridNode ? parentGridNode.depth + 1 : 0,
+                            name: name,
+                            id: data.id,
+                            nodes: [node],
+                            children: [],
+                            pos: pos
+                        };
+                        // If not root, then add name to categories.
+                        if (pos !== -1) {
+                            categories.push(name);
+                        }
+                        // Add name to list of children.
+                        if (isObject(parentGridNode, true)) {
+                            parentGridNode.children.push(gridNode);
+                        }
+                    }
+                    // Add data node to map
+                    if (isString(node.id)) {
+                        mapOfIdToNode[node.id] = node;
+                    }
+                    // If one of the points are collapsed, then start the grid node
+                    // in collapsed state.
+                    if (gridNode &&
+                        data.collapsed === true) {
+                        gridNode.collapsed = true;
+                    }
+                    // Assign pos to data node
+                    node.pos = pos;
+                }
+            };
+            var updateYValuesAndTickPos = function (map,
+                numberOfSeries) {
+                    var setValues = function (gridNode,
+                start,
+                result) {
+                        var nodes = gridNode.nodes,
+                padding = 0.5;
+                    var end = start + (start === -1 ? 0 : numberOfSeries - 1);
+                    var diff = (end - start) / 2,
+                        pos = start + diff;
+                    nodes.forEach(function (node) {
+                        var data = node.data;
+                        if (isObject(data, true)) {
+                            // Update point
+                            data.y = start + (data.seriesIndex || 0);
+                            // Remove the property once used
+                            delete data.seriesIndex;
+                        }
+                        node.pos = pos;
+                    });
+                    result[pos] = gridNode;
+                    gridNode.pos = pos;
+                    gridNode.tickmarkOffset = diff + padding;
+                    gridNode.collapseStart = end + padding;
+                    gridNode.children.forEach(function (child) {
+                        setValues(child, end + 1, result);
+                        end = (child.collapseEnd || 0) - padding;
+                    });
+                    // Set collapseEnd to the end of the last child node.
+                    gridNode.collapseEnd = end + padding;
+                    return result;
+                };
+                return setValues(map['-1'], -1, {});
+            };
+            // Create tree from data
+            var tree = Tree.getTree(data,
+                treeParams);
+            // Update y values of data, and set calculate tick positions.
+            mapOfPosToGridNode = updateYValuesAndTickPos(mapOfPosToGridNode, numberOfSeries);
+            // Return the resulting data.
+            return {
+                categories: categories,
+                mapOfIdToNode: mapOfIdToNode,
+                mapOfPosToGridNode: mapOfPosToGridNode,
+                collapsedNodes: collapsedNodes,
+                tree: tree
+            };
+        }
+        /**
+         * Builds the tree of categories and calculates its positions.
+         * @private
+         * @param {Object} e Event object
+         * @param {Object} e.target The chart instance which the event was fired on.
+         * @param {object[]} e.target.axes The axes of the chart.
+         */
+        function onBeforeRender(e) {
+            var chart = e.target,
+                axes = chart.axes;
+            axes.filter(function (axis) {
+                return axis.options.type === 'treegrid';
+            }).forEach(function (axis) {
+                var options = axis.options || {},
+                    labelOptions = options.labels,
+                    uniqueNames = options.uniqueNames,
+                    max = options.max, 
+                    // Check whether any of series is rendering for the first
+                    // time, visibility has changed, or its data is dirty, and
+                    // only then update. #10570, #10580. Also check if
+                    // mapOfPosToGridNode exists. #10887
+                    isDirty = (!axis.treeGrid.mapOfPosToGridNode ||
+                        axis.series.some(function (series) {
+                            return !series.hasRendered ||
+                                series.isDirtyData ||
+                                series.isDirty;
+                    }));
+                var numberOfSeries = 0,
+                    data,
+                    treeGrid;
+                if (isDirty) {
+                    // Concatenate data from all series assigned to this axis.
+                    data = axis.series.reduce(function (arr, s) {
+                        if (s.visible) {
+                            // Push all data to array
+                            (s.options.data || []).forEach(function (data) {
+                                // For using keys - rebuild the data structure
+                                if (s.options.keys && s.options.keys.length) {
+                                    data = s.pointClass.prototype
+                                        .optionsToObject
+                                        .call({ series: s }, data);
+                                    s.pointClass.setGanttPointAliases(data);
+                                }
+                                if (isObject(data, true)) {
+                                    // Set series index on data. Removed again
+                                    // after use.
+                                    data.seriesIndex = (numberOfSeries);
+                                    arr.push(data);
+                                }
+                            });
+                            // Increment series index
+                            if (uniqueNames === true) {
+                                numberOfSeries++;
+                            }
+                        }
+                        return arr;
+                    }, []);
+                    // If max is higher than set data - add a
+                    // dummy data to render categories #10779
+                    if (max && data.length < max) {
+                        for (var i = data.length; i <= max; i++) {
+                            data.push({
+                                // Use the zero-width character
+                                // to avoid conflict with uniqueNames
+                                name: i + '\u200B'
+                            });
+                        }
+                    }
+                    // setScale is fired after all the series is initialized,
+                    // which is an ideal time to update the axis.categories.
+                    treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
+                    // Assign values to the axis.
+                    axis.categories = treeGrid.categories;
+                    axis.treeGrid.mapOfPosToGridNode = (treeGrid.mapOfPosToGridNode);
+                    axis.hasNames = true;
+                    axis.treeGrid.tree = treeGrid.tree;
+                    // Update yData now that we have calculated the y values
+                    axis.series.forEach(function (series) {
+                        var axisData = (series.options.data || []).map(function (d) {
+                                if (isArray(d) &&
+                                    series.options.keys &&
+                                    series.options.keys.length) {
+                                    // Get the axisData from the data array used to
+                                    // build the treeGrid where has been modified
+                                    data.forEach(function (point) {
+                                        if (d.indexOf(point.x) >= 0 &&
+                                            d.indexOf(point.x2) >= 0) {
+                                            d = point;
+                                    }
+                                });
+                            }
+                            return isObject(d, true) ? merge(d) : d;
+                        });
+                        // Avoid destroying points when series is not visible
+                        if (series.visible) {
+                            series.setData(axisData, false);
+                        }
+                    });
+                    // Calculate the label options for each level in the tree.
+                    axis.treeGrid.mapOptionsToLevel =
+                        getLevelOptions({
+                            defaults: labelOptions,
+                            from: 1,
+                            levels: labelOptions && labelOptions.levels,
+                            to: axis.treeGrid.tree && axis.treeGrid.tree.height
+                        });
+                    // Setting initial collapsed nodes
+                    if (e.type === 'beforeRender') {
+                        axis.treeGrid.collapsedNodes = treeGrid.collapsedNodes;
+                    }
+                }
+            });
+        }
+        /**
+         * Generates a tick for initial positioning.
+         *
+         * @private
+         * @function Highcharts.GridAxis#generateTick
+         *
+         * @param {Function} proceed
+         * The original generateTick function.
+         *
+         * @param {number} pos
+         * The tick position in axis values.
+         */
+        function wrapGenerateTick(proceed, pos) {
+            var axis = this,
+                mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {},
+                isTreeGrid = axis.options.type === 'treegrid',
+                ticks = axis.ticks;
+            var tick = ticks[pos],
+                levelOptions,
+                options,
+                gridNode;
+            if (isTreeGrid &&
+                axis.treeGrid.mapOfPosToGridNode) {
+                gridNode = axis.treeGrid.mapOfPosToGridNode[pos];
+                levelOptions = mapOptionsToLevel[gridNode.depth];
+                if (levelOptions) {
+                    options = {
+                        labels: levelOptions
+                    };
+                }
+                if (!tick &&
+                    TickConstructor) {
+                    ticks[pos] = tick =
+                        new TickConstructor(axis, pos, void 0, void 0, {
+                            category: gridNode.name,
+                            tickmarkOffset: gridNode.tickmarkOffset,
+                            options: options
+                        });
+                }
+                else {
+                    // update labels depending on tick interval
+                    tick.parameters.category = gridNode.name;
+                    tick.options = options;
+                    tick.addLabel();
+                }
+            }
+            else {
+                proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+            }
+        }
+        /**
+         * @private
+         */
+        function wrapInit(proceed, chart, userOptions) {
+            var axis = this,
+                isTreeGrid = userOptions.type === 'treegrid';
+            if (!axis.treeGrid) {
+                axis.treeGrid = new TreeGridAxisAdditions(axis);
+            }
+            // Set default and forced options for TreeGrid
+            if (isTreeGrid) {
+                // Add event for updating the categories of a treegrid.
+                // NOTE Preferably these events should be set on the axis.
+                addEvent(chart, 'beforeRender', onBeforeRender);
+                addEvent(chart, 'beforeRedraw', onBeforeRender);
+                // Add new collapsed nodes on addseries
+                addEvent(chart, 'addSeries', function (e) {
+                    if (e.options.data) {
+                        var treeGrid = getTreeGridFromData(e.options.data,
+                            userOptions.uniqueNames || false, 1);
+                        axis.treeGrid.collapsedNodes = (axis.treeGrid.collapsedNodes || []).concat(treeGrid.collapsedNodes);
+                    }
+                });
+                // Collapse all nodes in axis.treegrid.collapsednodes
+                // where collapsed equals true.
+                addEvent(axis, 'foundExtremes', function () {
+                    if (axis.treeGrid.collapsedNodes) {
+                        axis.treeGrid.collapsedNodes.forEach(function (node) {
+                            var breaks = axis.treeGrid.collapse(node);
+                            if (axis.brokenAxis) {
+                                axis.brokenAxis.setBreaks(breaks, false);
+                                // remove the node from the axis collapsedNodes
+                                if (axis.treeGrid.collapsedNodes) {
+                                    axis.treeGrid.collapsedNodes = axis.treeGrid
+                                        .collapsedNodes
+                                        .filter(function (n) { return ((node.collapseStart !==
+                                        n.collapseStart) ||
+                                        node.collapseEnd !== n.collapseEnd); });
+                                }
+                            }
+                        });
+                    }
+                });
+                // If staticScale is not defined on the yAxis
+                // and chart height is set, set axis.isDirty
+                // to ensure collapsing works (#12012)
+                addEvent(axis, 'afterBreaks', function () {
+                    if (axis.coll === 'yAxis' &&
+                        !axis.staticScale &&
+                        axis.chart.options.chart.height) {
+                        axis.isDirty = true;
+                    }
+                });
+                userOptions = merge({
+                    // Default options
+                    grid: {
+                        enabled: true
+                    },
+                    // TODO: add support for align in treegrid.
+                    labels: {
+                        align: 'left',
+                        /**
+                        * Set options on specific levels in a tree grid axis. Takes
+                        * precedence over labels options.
+                        *
+                        * @sample {gantt} gantt/treegrid-axis/labels-levels
+                        *         Levels on TreeGrid Labels
+                        *
+                        * @type      {Array<*>}
+                        * @product   gantt
+                        * @apioption yAxis.labels.levels
+                        *
+                        * @private
+                        */
+                        levels: [{
+                                /**
+                                * Specify the level which the options within this object
+                                * applies to.
+                                *
+                                * @type      {number}
+                                * @product   gantt
+                                * @apioption yAxis.labels.levels.level
+                                *
+                                * @private
+                                */
+                                level: void 0
+                            }, {
+                                level: 1,
+                                /**
+                                 * @type      {Highcharts.CSSObject}
+                                 * @product   gantt
+                                 * @apioption yAxis.labels.levels.style
+                                 *
+                                 * @private
+                                 */
+                                style: {
+                                    /** @ignore-option */
+                                    fontWeight: 'bold'
+                                }
+                            }],
+                        /**
+                         * The symbol for the collapse and expand icon in a
+                         * treegrid.
+                         *
+                         * @product      gantt
+                         * @optionparent yAxis.labels.symbol
+                         *
+                         * @private
+                         */
+                        symbol: {
+                            /**
+                             * The symbol type. Points to a definition function in
+                             * the `Highcharts.Renderer.symbols` collection.
+                             *
+                             * @type {Highcharts.SymbolKeyValue}
+                             *
+                             * @private
+                             */
+                            type: 'triangle',
+                            x: -5,
+                            y: -5,
+                            height: 10,
+                            width: 10,
+                            padding: 5
+                        }
+                    },
+                    uniqueNames: false
+                }, userOptions, {
+                    // Forced options
+                    reversed: true,
+                    // grid.columns is not supported in treegrid
+                    grid: {
+                        columns: void 0
+                    }
+                });
+            }
+            // Now apply the original function with the original arguments,
+            // which are sliced off this function's arguments
+            proceed.apply(axis, [chart, userOptions]);
+            if (isTreeGrid) {
+                axis.hasNames = true;
+                axis.options.showLastLabel = true;
+            }
+        }
+        /**
+         * Set the tick positions, tickInterval, axis min and max.
+         *
+         * @private
+         * @function Highcharts.GridAxis#setTickInterval
+         *
+         * @param {Function} proceed
+         * The original setTickInterval function.
+         */
+        function wrapSetTickInterval(proceed) {
+            var axis = this,
+                options = axis.options,
+                isTreeGrid = options.type === 'treegrid';
+            if (isTreeGrid) {
+                axis.min = pick(axis.userMin, options.min, axis.dataMin);
+                axis.max = pick(axis.userMax, options.max, axis.dataMax);
+                fireEvent(axis, 'foundExtremes');
+                // setAxisTranslation modifies the min and max according to
+                // axis breaks.
+                axis.setAxisTranslation();
+                axis.tickmarkOffset = 0.5;
+                axis.tickInterval = 1;
+                axis.tickPositions = axis.treeGrid.mapOfPosToGridNode ?
+                    axis.treeGrid.getTickPositions() :
+                    [];
+            }
+            else {
+                proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+            }
+        }
+        /* *
+         *
+         *  Classes
+         *
+         * */
+        /**
+         * @private
+         * @class
+         */
+        var TreeGridAxisAdditions = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                /**
+                 * @private
+                 */
+                function TreeGridAxisAdditions(axis) {
+                    this.axis = axis;
+            }
             /* *
              *
-             *  Functions
+             *  Static Functions
              *
              * */
             /**
              * @private
              */
-            function compose(AxisClass, ChartClass, SeriesClass, TickClass) {
-                if (AxisClass.keepProps.indexOf('treeGrid') === -1) {
-                    AxisClass.keepProps.push('treeGrid');
-                    TickConstructor = TickClass;
-                    wrap(AxisClass.prototype, 'generateTick', wrapGenerateTick);
-                    wrap(AxisClass.prototype, 'init', wrapInit);
-                    wrap(AxisClass.prototype, 'setTickInterval', wrapSetTickInterval);
+            TreeGridAxisAdditions.compose = function (AxisClass, ChartClass, SeriesClass, TickClass) {
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    if (AxisClass.keepProps.indexOf('treeGrid') === -1) {
+                        AxisClass.keepProps.push('treeGrid');
+                    }
+                    var axisProps = AxisClass.prototype;
+                    wrap(axisProps, 'generateTick', wrapGenerateTick);
+                    wrap(axisProps, 'init', wrapInit);
+                    wrap(axisProps, 'setTickInterval', wrapSetTickInterval);
                     // Make utility functions available for testing.
-                    AxisClass.prototype.utils = {
+                    axisProps.utils = {
                         getNode: Tree.getNode
                     };
-                    GridAxis.compose(AxisClass, ChartClass, TickClass);
-                    BrokenAxis.compose(AxisClass, SeriesClass);
-                    TreeGridTick.compose(TickClass);
                 }
-                return AxisClass;
-            }
-            TreeGridAxis.compose = compose;
-            /**
-             * @private
-             */
-            function getBreakFromNode(node, max) {
-                var to = node.collapseEnd || 0;
-                var from = node.collapseStart || 0;
-                // In broken-axis, the axis.max is minimized until it is not within a
-                // break. Therefore, if break.to is larger than axis.max, the axis.to
-                // should not add the 0.5 axis.tickMarkOffset, to avoid adding a break
-                // larger than axis.max.
-                // TODO consider simplifying broken-axis and this might solve itself
-                if (to >= max) {
-                    from -= 0.5;
+                if (composedClasses.indexOf(TickClass) === -1) {
+                    composedClasses.push(TickClass);
+                    if (!TickConstructor) {
+                        TickConstructor = TickClass;
+                    }
                 }
-                return {
-                    from: from,
-                    to: to,
-                    showPoints: false
-                };
-            }
-            /**
-             * Creates a tree structure of the data, and the treegrid. Calculates
-             * categories, and y-values of points based on the tree.
-             *
-             * @private
-             * @function getTreeGridFromData
+                GridAxis.compose(AxisClass, ChartClass, TickClass);
+                BrokenAxis.compose(AxisClass, SeriesClass);
+                TreeGridTick.compose(TickClass);
+                return AxisClass;
+            };
+            /* *
              *
-             * @param {Array<Highcharts.GanttPointOptions>} data
-             * All the data points to display in the axis.
+             *  Functions
              *
-             * @param {boolean} uniqueNames
-             * Wether or not the data node with the same name should share grid cell. If
-             * true they do share cell. False by default.
+             * */
+            /**
+             * Set the collapse status.
              *
-             * @param {number} numberOfSeries
+             * @private
              *
-             * @return {Object}
-             * Returns an object containing categories, mapOfIdToNode,
-             * mapOfPosToGridNode, and tree.
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
              *
-             * @todo There should be only one point per line.
-             * @todo It should be optional to have one category per point, or merge
-             *       cells
-             * @todo Add unit-tests.
+             * @param {Highcharts.GridNode} node
+             * The node to collapse.
              */
-            function getTreeGridFromData(data, uniqueNames, numberOfSeries) {
-                var categories = [],
-                    collapsedNodes = [],
-                    mapOfIdToNode = {},
-                    uniqueNamesEnabled = typeof uniqueNames === 'boolean' ?
-                        uniqueNames : false;
-                var mapOfPosToGridNode = {},
-                    posIterator = -1;
-                // Build the tree from the series data.
-                var treeParams = {
-                        // After the children has been created.
-                        after: function (node) {
-                            var gridNode = mapOfPosToGridNode[node.pos];
-                        var height = 0,
-                            descendants = 0;
-                        gridNode.children.forEach(function (child) {
-                            descendants += (child.descendants || 0) + 1;
-                            height = Math.max((child.height || 0) + 1, height);
-                        });
-                        gridNode.descendants = descendants;
-                        gridNode.height = height;
-                        if (gridNode.collapsed) {
-                            collapsedNodes.push(gridNode);
-                        }
-                    },
-                    // Before the children has been created.
-                    before: function (node) {
-                        var data = isObject(node.data,
-                            true) ?
-                                node.data :
-                                {},
-                            name = isString(data.name) ? data.name : '',
-                            parentNode = mapOfIdToNode[node.parent],
-                            parentGridNode = (isObject(parentNode,
-                            true) ?
-                                mapOfPosToGridNode[parentNode.pos] :
-                                null),
-                            hasSameName = function (x) {
-                                return x.name === name;
-                        };
-                        var gridNode,
-                            pos;
-                        // If not unique names, look for sibling node with the same name
-                        if (uniqueNamesEnabled &&
-                            isObject(parentGridNode, true) &&
-                            !!(gridNode = find(parentGridNode.children, hasSameName))) {
-                            // If there is a gridNode with the same name, reuse position
-                            pos = gridNode.pos;
-                            // Add data node to list of nodes in the grid node.
-                            gridNode.nodes.push(node);
-                        }
-                        else {
-                            // If it is a new grid node, increment position.
-                            pos = posIterator++;
-                        }
-                        // Add new grid node to map.
-                        if (!mapOfPosToGridNode[pos]) {
-                            mapOfPosToGridNode[pos] = gridNode = {
-                                depth: parentGridNode ? parentGridNode.depth + 1 : 0,
-                                name: name,
-                                id: data.id,
-                                nodes: [node],
-                                children: [],
-                                pos: pos
-                            };
-                            // If not root, then add name to categories.
-                            if (pos !== -1) {
-                                categories.push(name);
-                            }
-                            // Add name to list of children.
-                            if (isObject(parentGridNode, true)) {
-                                parentGridNode.children.push(gridNode);
-                            }
+            TreeGridAxisAdditions.prototype.setCollapsedStatus = function (node) {
+                var axis = this.axis,
+                    chart = axis.chart;
+                axis.series.forEach(function (series) {
+                    var data = series.options.data;
+                    if (node.id && data) {
+                        var point = chart.get(node.id),
+                            dataPoint = data[series.data.indexOf(point)];
+                        if (point && dataPoint) {
+                            point.collapsed = node.collapsed;
+                            dataPoint.collapsed = node.collapsed;
                         }
-                        // Add data node to map
-                        if (isString(node.id)) {
-                            mapOfIdToNode[node.id] = node;
-                        }
-                        // If one of the points are collapsed, then start the grid node
-                        // in collapsed state.
-                        if (gridNode &&
-                            data.collapsed === true) {
-                            gridNode.collapsed = true;
-                        }
-                        // Assign pos to data node
-                        node.pos = pos;
                     }
-                };
-                var updateYValuesAndTickPos = function (map,
-                    numberOfSeries) {
-                        var setValues = function (gridNode,
-                    start,
-                    result) {
-                            var nodes = gridNode.nodes,
-                    padding = 0.5;
-                        var end = start + (start === -1 ? 0 : numberOfSeries - 1);
-                        var diff = (end - start) / 2,
-                            pos = start + diff;
-                        nodes.forEach(function (node) {
-                            var data = node.data;
-                            if (isObject(data, true)) {
-                                // Update point
-                                data.y = start + (data.seriesIndex || 0);
-                                // Remove the property once used
-                                delete data.seriesIndex;
-                            }
-                            node.pos = pos;
-                        });
-                        result[pos] = gridNode;
-                        gridNode.pos = pos;
-                        gridNode.tickmarkOffset = diff + padding;
-                        gridNode.collapseStart = end + padding;
-                        gridNode.children.forEach(function (child) {
-                            setValues(child, end + 1, result);
-                            end = (child.collapseEnd || 0) - padding;
-                        });
-                        // Set collapseEnd to the end of the last child node.
-                        gridNode.collapseEnd = end + padding;
-                        return result;
-                    };
-                    return setValues(map['-1'], -1, {});
-                };
-                // Create tree from data
-                var tree = Tree.getTree(data,
-                    treeParams);
-                // Update y values of data, and set calculate tick positions.
-                mapOfPosToGridNode = updateYValuesAndTickPos(mapOfPosToGridNode, numberOfSeries);
-                // Return the resulting data.
-                return {
-                    categories: categories,
-                    mapOfIdToNode: mapOfIdToNode,
-                    mapOfPosToGridNode: mapOfPosToGridNode,
-                    collapsedNodes: collapsedNodes,
-                    tree: tree
-                };
-            }
+                });
+            };
             /**
-             * Builds the tree of categories and calculates its positions.
+             * Calculates the new axis breaks to collapse a node.
+             *
              * @private
-             * @param {Object} e Event object
-             * @param {Object} e.target The chart instance which the event was fired on.
-             * @param {object[]} e.target.axes The axes of the chart.
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to collapse.
+             *
+             * @param {number} pos
+             * The tick position to collapse.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
              */
-            function onBeforeRender(e) {
-                var chart = e.target,
-                    axes = chart.axes;
-                axes.filter(function (axis) {
-                    return axis.options.type === 'treegrid';
-                }).forEach(function (axis) {
-                    var options = axis.options || {},
-                        labelOptions = options.labels,
-                        uniqueNames = options.uniqueNames,
-                        max = options.max, 
-                        // Check whether any of series is rendering for the first
-                        // time, visibility has changed, or its data is dirty, and
-                        // only then update. #10570, #10580. Also check if
-                        // mapOfPosToGridNode exists. #10887
-                        isDirty = (!axis.treeGrid.mapOfPosToGridNode ||
-                            axis.series.some(function (series) {
-                                return !series.hasRendered ||
-                                    series.isDirtyData ||
-                                    series.isDirty;
-                        }));
-                    var numberOfSeries = 0,
-                        data,
-                        treeGrid;
-                    if (isDirty) {
-                        // Concatenate data from all series assigned to this axis.
-                        data = axis.series.reduce(function (arr, s) {
-                            if (s.visible) {
-                                // Push all data to array
-                                (s.options.data || []).forEach(function (data) {
-                                    // For using keys - rebuild the data structure
-                                    if (s.options.keys && s.options.keys.length) {
-                                        data = s.pointClass.prototype
-                                            .optionsToObject
-                                            .call({ series: s }, data);
-                                        s.pointClass.setGanttPointAliases(data);
-                                    }
-                                    if (isObject(data, true)) {
-                                        // Set series index on data. Removed again
-                                        // after use.
-                                        data.seriesIndex = (numberOfSeries);
-                                        arr.push(data);
-                                    }
-                                });
-                                // Increment series index
-                                if (uniqueNames === true) {
-                                    numberOfSeries++;
-                                }
-                            }
-                            return arr;
-                        }, []);
-                        // If max is higher than set data - add a
-                        // dummy data to render categories #10779
-                        if (max && data.length < max) {
-                            for (var i = data.length; i <= max; i++) {
-                                data.push({
-                                    // Use the zero-width character
-                                    // to avoid conflict with uniqueNames
-                                    name: i + '\u200B'
-                                });
-                            }
-                        }
-                        // setScale is fired after all the series is initialized,
-                        // which is an ideal time to update the axis.categories.
-                        treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
-                        // Assign values to the axis.
-                        axis.categories = treeGrid.categories;
-                        axis.treeGrid.mapOfPosToGridNode = (treeGrid.mapOfPosToGridNode);
-                        axis.hasNames = true;
-                        axis.treeGrid.tree = treeGrid.tree;
-                        // Update yData now that we have calculated the y values
-                        axis.series.forEach(function (series) {
-                            var axisData = (series.options.data || []).map(function (d) {
-                                    if (isArray(d) &&
-                                        series.options.keys &&
-                                        series.options.keys.length) {
-                                        // Get the axisData from the data array used to
-                                        // build the treeGrid where has been modified
-                                        data.forEach(function (point) {
-                                            if (d.indexOf(point.x) >= 0 &&
-                                                d.indexOf(point.x2) >= 0) {
-                                                d = point;
-                                        }
-                                    });
-                                }
-                                return isObject(d, true) ? merge(d) : d;
-                            });
-                            // Avoid destroying points when series is not visible
-                            if (series.visible) {
-                                series.setData(axisData, false);
-                            }
-                        });
-                        // Calculate the label options for each level in the tree.
-                        axis.treeGrid.mapOptionsToLevel =
-                            getLevelOptions({
-                                defaults: labelOptions,
-                                from: 1,
-                                levels: labelOptions && labelOptions.levels,
-                                to: axis.treeGrid.tree && axis.treeGrid.tree.height
-                            });
-                        // Setting initial collapsed nodes
-                        if (e.type === 'beforeRender') {
-                            axis.treeGrid.collapsedNodes = treeGrid.collapsedNodes;
-                        }
-                    }
-                });
-            }
+            TreeGridAxisAdditions.prototype.collapse = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                breaks.push(obj);
+                // Change the collapsed flag #13838
+                node.collapsed = true;
+                axis.treeGrid.setCollapsedStatus(node);
+                return breaks;
+            };
             /**
-             * Generates a tick for initial positioning.
+             * Calculates the new axis breaks to expand a node.
              *
              * @private
-             * @function Highcharts.GridAxis#generateTick
              *
-             * @param {Function} proceed
-             * The original generateTick function.
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to expand.
              *
              * @param {number} pos
-             * The tick position in axis values.
+             * The tick position to expand.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
              */
-            function wrapGenerateTick(proceed, pos) {
-                var axis = this,
-                    mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {},
-                    isTreeGrid = axis.options.type === 'treegrid',
-                    ticks = axis.ticks;
-                var tick = ticks[pos],
-                    levelOptions,
-                    options,
-                    gridNode;
-                if (isTreeGrid &&
-                    axis.treeGrid.mapOfPosToGridNode) {
-                    gridNode = axis.treeGrid.mapOfPosToGridNode[pos];
-                    levelOptions = mapOptionsToLevel[gridNode.depth];
-                    if (levelOptions) {
-                        options = {
-                            labels: levelOptions
-                        };
-                    }
-                    if (!tick &&
-                        TickConstructor) {
-                        ticks[pos] = tick =
-                            new TickConstructor(axis, pos, void 0, void 0, {
-                                category: gridNode.name,
-                                tickmarkOffset: gridNode.tickmarkOffset,
-                                options: options
-                            });
+            TreeGridAxisAdditions.prototype.expand = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                // Change the collapsed flag #13838
+                node.collapsed = false;
+                axis.treeGrid.setCollapsedStatus(node);
+                // Remove the break from the axis breaks array.
+                return breaks.reduce(function (arr, b) {
+                    if (b.to !== obj.to || b.from !== obj.from) {
+                        arr.push(b);
                     }
-                    else {
-                        // update labels depending on tick interval
-                        tick.parameters.category = gridNode.name;
-                        tick.options = options;
-                        tick.addLabel();
-                    }
-                }
-                else {
-                    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
-                }
-            }
+                    return arr;
+                }, []);
+            };
             /**
+             * Creates a list of positions for the ticks on the axis. Filters out
+             * positions that are outside min and max, or is inside an axis break.
+             *
              * @private
+             *
+             * @return {Array<number>}
+             * List of positions.
              */
-            function wrapInit(proceed, chart, userOptions) {
-                var axis = this,
-                    isTreeGrid = userOptions.type === 'treegrid';
-                if (!axis.treeGrid) {
-                    axis.treeGrid = new Additions(axis);
-                }
-                // Set default and forced options for TreeGrid
-                if (isTreeGrid) {
-                    // Add event for updating the categories of a treegrid.
-                    // NOTE Preferably these events should be set on the axis.
-                    addEvent(chart, 'beforeRender', onBeforeRender);
-                    addEvent(chart, 'beforeRedraw', onBeforeRender);
-                    // Add new collapsed nodes on addseries
-                    addEvent(chart, 'addSeries', function (e) {
-                        if (e.options.data) {
-                            var treeGrid = getTreeGridFromData(e.options.data,
-                                userOptions.uniqueNames || false, 1);
-                            axis.treeGrid.collapsedNodes = (axis.treeGrid.collapsedNodes || []).concat(treeGrid.collapsedNodes);
-                        }
-                    });
-                    // Collapse all nodes in axis.treegrid.collapsednodes
-                    // where collapsed equals true.
-                    addEvent(axis, 'foundExtremes', function () {
-                        if (axis.treeGrid.collapsedNodes) {
-                            axis.treeGrid.collapsedNodes.forEach(function (node) {
-                                var breaks = axis.treeGrid.collapse(node);
-                                if (axis.brokenAxis) {
-                                    axis.brokenAxis.setBreaks(breaks, false);
-                                    // remove the node from the axis collapsedNodes
-                                    if (axis.treeGrid.collapsedNodes) {
-                                        axis.treeGrid.collapsedNodes = axis.treeGrid
-                                            .collapsedNodes
-                                            .filter(function (n) { return ((node.collapseStart !==
-                                            n.collapseStart) ||
-                                            node.collapseEnd !== n.collapseEnd); });
-                                    }
-                                }
-                            });
-                        }
-                    });
-                    // If staticScale is not defined on the yAxis
-                    // and chart height is set, set axis.isDirty
-                    // to ensure collapsing works (#12012)
-                    addEvent(axis, 'afterBreaks', function () {
-                        if (axis.coll === 'yAxis' &&
-                            !axis.staticScale &&
-                            axis.chart.options.chart.height) {
-                            axis.isDirty = true;
-                        }
-                    });
-                    userOptions = merge({
-                        // Default options
-                        grid: {
-                            enabled: true
-                        },
-                        // TODO: add support for align in treegrid.
-                        labels: {
-                            align: 'left',
-                            /**
-                            * Set options on specific levels in a tree grid axis. Takes
-                            * precedence over labels options.
-                            *
-                            * @sample {gantt} gantt/treegrid-axis/labels-levels
-                            *         Levels on TreeGrid Labels
-                            *
-                            * @type      {Array<*>}
-                            * @product   gantt
-                            * @apioption yAxis.labels.levels
-                            *
-                            * @private
-                            */
-                            levels: [{
-                                    /**
-                                    * Specify the level which the options within this object
-                                    * applies to.
-                                    *
-                                    * @type      {number}
-                                    * @product   gantt
-                                    * @apioption yAxis.labels.levels.level
-                                    *
-                                    * @private
-                                    */
-                                    level: void 0
-                                }, {
-                                    level: 1,
-                                    /**
-                                     * @type      {Highcharts.CSSObject}
-                                     * @product   gantt
-                                     * @apioption yAxis.labels.levels.style
-                                     *
-                                     * @private
-                                     */
-                                    style: {
-                                        /** @ignore-option */
-                                        fontWeight: 'bold'
-                                    }
-                                }],
-                            /**
-                             * The symbol for the collapse and expand icon in a
-                             * treegrid.
-                             *
-                             * @product      gantt
-                             * @optionparent yAxis.labels.symbol
-                             *
-                             * @private
-                             */
-                            symbol: {
-                                /**
-                                 * The symbol type. Points to a definition function in
-                                 * the `Highcharts.Renderer.symbols` collection.
-                                 *
-                                 * @type {Highcharts.SymbolKeyValue}
-                                 *
-                                 * @private
-                                 */
-                                type: 'triangle',
-                                x: -5,
-                                y: -5,
-                                height: 10,
-                                width: 10,
-                                padding: 5
-                            }
-                        },
-                        uniqueNames: false
-                    }, userOptions, {
-                        // Forced options
-                        reversed: true,
-                        // grid.columns is not supported in treegrid
-                        grid: {
-                            columns: void 0
-                        }
-                    });
-                }
-                // Now apply the original function with the original arguments,
-                // which are sliced off this function's arguments
-                proceed.apply(axis, [chart, userOptions]);
-                if (isTreeGrid) {
-                    axis.hasNames = true;
-                    axis.options.showLastLabel = true;
-                }
-            }
+            TreeGridAxisAdditions.prototype.getTickPositions = function () {
+                var axis = this.axis,
+                    roundedMin = Math.floor(axis.min / axis.tickInterval) * axis.tickInterval,
+                    roundedMax = Math.ceil(axis.max / axis.tickInterval) * axis.tickInterval;
+                return Object.keys(axis.treeGrid.mapOfPosToGridNode || {}).reduce(function (arr, key) {
+                    var pos = +key;
+                    if (pos >= roundedMin &&
+                        pos <= roundedMax &&
+                        !(axis.brokenAxis && axis.brokenAxis.isInAnyBreak(pos))) {
+                        arr.push(pos);
+                    }
+                    return arr;
+                }, []);
+            };
             /**
-             * Set the tick positions, tickInterval, axis min and max.
+             * Check if a node is collapsed.
              *
              * @private
-             * @function Highcharts.GridAxis#setTickInterval
              *
-             * @param {Function} proceed
-             * The original setTickInterval function.
-             */
-            function wrapSetTickInterval(proceed) {
-                var axis = this,
-                    options = axis.options,
-                    isTreeGrid = options.type === 'treegrid';
-                if (isTreeGrid) {
-                    axis.min = pick(axis.userMin, options.min, axis.dataMin);
-                    axis.max = pick(axis.userMax, options.max, axis.dataMax);
-                    fireEvent(axis, 'foundExtremes');
-                    // setAxisTranslation modifies the min and max according to
-                    // axis breaks.
-                    axis.setAxisTranslation();
-                    axis.tickmarkOffset = 0.5;
-                    axis.tickInterval = 1;
-                    axis.tickPositions = axis.treeGrid.mapOfPosToGridNode ?
-                        axis.treeGrid.getTickPositions() :
-                        [];
-                }
-                else {
-                    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
-                }
-            }
-            /* *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
              *
-             *  Classes
+             * @param {Object} node
+             * The node to check if is collapsed.
              *
-             * */
+             * @param {number} pos
+             * The tick position to collapse.
+             *
+             * @return {boolean}
+             * Returns true if collapsed, false if expanded.
+             */
+            TreeGridAxisAdditions.prototype.isCollapsed = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                return breaks.some(function (b) {
+                    return b.from === obj.from && b.to === obj.to;
+                });
+            };
             /**
+             * Calculates the new axis breaks after toggling the collapse/expand
+             * state of a node. If it is collapsed it will be expanded, and if it is
+             * exapended it will be collapsed.
+             *
              * @private
-             * @class
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to toggle.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                     *
-                     *  Constructors
-                     *
-                     * */
-                    /**
-                     * @private
-                     */
-                    function Additions(axis) {
-                        this.axis = axis;
-                }
-                /* *
-                 *
-                 *  Functions
-                 *
-                 * */
-                /**
-                 * Set the collapse status.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to collapse.
-                 */
-                Additions.prototype.setCollapsedStatus = function (node) {
-                    var axis = this.axis,
-                        chart = axis.chart;
-                    axis.series.forEach(function (series) {
-                        var data = series.options.data;
-                        if (node.id && data) {
-                            var point = chart.get(node.id),
-                                dataPoint = data[series.data.indexOf(point)];
-                            if (point && dataPoint) {
-                                point.collapsed = node.collapsed;
-                                dataPoint.collapsed = node.collapsed;
-                            }
-                        }
-                    });
-                };
-                /**
-                 * Calculates the new axis breaks to collapse a node.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to collapse.
-                 *
-                 * @param {number} pos
-                 * The tick position to collapse.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.collapse = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    breaks.push(obj);
-                    // Change the collapsed flag #13838
-                    node.collapsed = true;
-                    axis.treeGrid.setCollapsedStatus(node);
-                    return breaks;
-                };
-                /**
-                 * Calculates the new axis breaks to expand a node.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to expand.
-                 *
-                 * @param {number} pos
-                 * The tick position to expand.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.expand = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    // Change the collapsed flag #13838
-                    node.collapsed = false;
-                    axis.treeGrid.setCollapsedStatus(node);
-                    // Remove the break from the axis breaks array.
-                    return breaks.reduce(function (arr, b) {
-                        if (b.to !== obj.to || b.from !== obj.from) {
-                            arr.push(b);
-                        }
-                        return arr;
-                    }, []);
-                };
-                /**
-                 * Creates a list of positions for the ticks on the axis. Filters out
-                 * positions that are outside min and max, or is inside an axis break.
-                 *
-                 * @private
-                 *
-                 * @return {Array<number>}
-                 * List of positions.
-                 */
-                Additions.prototype.getTickPositions = function () {
-                    var axis = this.axis,
-                        roundedMin = Math.floor(axis.min / axis.tickInterval) * axis.tickInterval,
-                        roundedMax = Math.ceil(axis.max / axis.tickInterval) * axis.tickInterval;
-                    return Object.keys(axis.treeGrid.mapOfPosToGridNode || {}).reduce(function (arr, key) {
-                        var pos = +key;
-                        if (pos >= roundedMin &&
-                            pos <= roundedMax &&
-                            !(axis.brokenAxis && axis.brokenAxis.isInAnyBreak(pos))) {
-                            arr.push(pos);
-                        }
-                        return arr;
-                    }, []);
-                };
-                /**
-                 * Check if a node is collapsed.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Object} node
-                 * The node to check if is collapsed.
-                 *
-                 * @param {number} pos
-                 * The tick position to collapse.
-                 *
-                 * @return {boolean}
-                 * Returns true if collapsed, false if expanded.
-                 */
-                Additions.prototype.isCollapsed = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    return breaks.some(function (b) {
-                        return b.from === obj.from && b.to === obj.to;
-                    });
-                };
-                /**
-                 * Calculates the new axis breaks after toggling the collapse/expand
-                 * state of a node. If it is collapsed it will be expanded, and if it is
-                 * exapended it will be collapsed.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to toggle.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.toggleCollapse = function (node) {
-                    return (this.isCollapsed(node) ?
-                        this.expand(node) :
-                        this.collapse(node));
-                };
-                return Additions;
-            }());
-            TreeGridAxis.Additions = Additions;
-        })(TreeGridAxis || (TreeGridAxis = {}));
+            TreeGridAxisAdditions.prototype.toggleCollapse = function (node) {
+                return (this.isCollapsed(node) ?
+                    this.expand(node) :
+                    this.collapse(node));
+            };
+            return TreeGridAxisAdditions;
+        }());
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return TreeGridAxis;
+        return TreeGridAxisAdditions;
     });
-    _registerModule(_modules, 'masters/modules/treegrid.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/TreeGridAxis.js']], function (Highcharts, TreeGridAxis) {
+    _registerModule(_modules, 'masters/modules/treegrid.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/TreeGrid/TreeGridAxis.js']], function (Highcharts, TreeGridAxis) {
 
         var G = Highcharts;
         // Compositions