highcharts 10.1.0 → 10.2.0

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

@@ -15,19 +15,49 @@ import H from '../Globals.js';
 var dateFormats = H.dateFormats;
 import U from '../Utilities.js';
 var addEvent = U.addEvent, defined = U.defined, erase = U.erase, find = U.find, isArray = U.isArray, isNumber = U.isNumber, merge = U.merge, 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
@@ -52,894 +82,857 @@ function applyGridOptions(axis) {
     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']();
                 }
-            }
-            (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();
                 }
-                var mark = axis.ticks[lastTick].mark;
-                if (mark &&
-                    lastTick - max < tickmarkOffset &&
-                    lastTick - max > 0 && axis.ticks[lastTick].isLast) {
-                    axis.hiddenMarks.push(mark.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();
+                }
+            }
+            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;
+        }
+        if (startLessThanMax && !options.endOnTick) {
+            tickPositions[tickPositions.length - 1] = max;
         }
-        return proceed.apply(axis, argsToArray(arguments));
     }
+}
+/**
+ * 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
@@ -971,6 +964,9 @@ dateFormats.W = function (timestamp) {
  *  Default Export
  *
  * */
+var GridAxis = {
+    compose: compose
+};
 export default GridAxis;
 /* *
  *