highcharts 10.2.1 → 10.3.1

package/highcharts-3d.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v10.2.1 (2022-08-29)
+ * @license Highcharts JS v10.3.1 (2022-10-31)
  *
  * 3D features for Highcharts JS
  *
@@ -1417,7 +1417,7 @@
 
         return SVGRenderer3D;
     });
-    _registerModule(_modules, 'Core/Chart/Chart3D.js', [_modules['Core/Color/Color.js'], _modules['Core/Math3D.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (Color, Math3D, D, U) {
+    _registerModule(_modules, 'Core/Chart/Chart3D.js', [_modules['Core/Color/Color.js'], _modules['Core/Defaults.js'], _modules['Core/Math3D.js'], _modules['Core/Utilities.js']], function (Color, D, Math3D, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -1430,9 +1430,9 @@
          *
          * */
         var color = Color.parse;
+        var genericDefaultOptions = D.defaultOptions;
         var perspective = Math3D.perspective,
             shapeArea3D = Math3D.shapeArea3D;
-        var genericDefaultOptions = D.defaultOptions;
         var addEvent = U.addEvent,
             isArray = U.isArray,
             merge = U.merge,
@@ -2139,8 +2139,8 @@
                 addEvent(ChartClass, 'beforeRedraw', onBeforeRedraw);
                 addEvent(ChartClass, 'beforeRender', onBeforeRender);
                 wrap(chartProto, 'isInsidePlot', wrapIsInsidePlot);
-                wrap(ChartClass, 'renderSeries', wrapRenderSeries);
-                wrap(ChartClass, 'setClassName', wrapSetClassName);
+                wrap(chartProto, 'renderSeries', wrapRenderSeries);
+                wrap(chartProto, 'setClassName', wrapSetClassName);
             }
             Chart3D.compose = compose;
             /**
@@ -3337,7 +3337,139 @@
 
         return ZAxis;
     });
-    _registerModule(_modules, 'Core/Axis/Tick3D.js', [_modules['Core/Utilities.js']], function (U) {
+    _registerModule(_modules, 'Core/Axis/Axis3DDefaults.js', [], function () {
+        /* *
+         *
+         *  (c) 2010-2021 Torstein Honsi
+         *
+         *  Extenstion for 3d axes
+         *
+         *  License: www.highcharts.com/license
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        /**
+         * @optionparent xAxis
+         */
+        var Axis3DDefaults = {
+                labels: {
+                    /**
+                     * Defines how the labels are be repositioned according to the 3D
+                     * chart orientation.
+                     *
+                     * - `'offset'`: Maintain a fixed horizontal/vertical distance from
+                     *   the tick marks, despite the chart orientation. This is the
+                     *   backwards compatible behavior, and causes skewing of X and Z
+                     *   axes.
+                     *
+                     * - `'chart'`: Preserve 3D position relative to the chart. This
+                     *   looks nice, but hard to read if the text isn't forward-facing.
+                     *
+                     * - `'flap'`: Rotated text along the axis to compensate for the
+                     *   chart orientation. This tries to maintain text as legible as
+                     *   possible on all orientations.
+                     *
+                     * - `'ortho'`: Rotated text along the axis direction so that the
+                     *   labels are orthogonal to the axis. This is very similar to
+                     *   `'flap'`, but prevents skewing the labels (X and Y scaling are
+                     *   still present).
+                     *
+                     * @sample highcharts/3d/skewed-labels/
+                     *         Skewed labels
+                     *
+                     * @since      5.0.15
+                     * @validvalue ['offset', 'chart', 'flap', 'ortho']
+                     * @product    highcharts
+                     * @requires   highcharts-3d
+                     */
+                    position3d: 'offset',
+                    /**
+                     * If enabled, the axis labels will skewed to follow the
+                     * perspective.
+                     *
+                     * This will fix overlapping labels and titles, but texts become
+                     * less legible due to the distortion.
+                     *
+                     * The final appearance depends heavily on `labels.position3d`.
+                     *
+                     * @sample highcharts/3d/skewed-labels/
+                     *         Skewed labels
+                     *
+                     * @since    5.0.15
+                     * @product  highcharts
+                     * @requires highcharts-3d
+                     */
+                    skew3d: false
+                },
+                title: {
+                    /**
+                     * Defines how the title is repositioned according to the 3D chart
+                     * orientation.
+                     *
+                     * - `'offset'`: Maintain a fixed horizontal/vertical distance from
+                     *   the tick marks, despite the chart orientation. This is the
+                     *   backwards compatible behavior, and causes skewing of X and Z
+                     *   axes.
+                     *
+                     * - `'chart'`: Preserve 3D position relative to the chart. This
+                     *   looks nice, but hard to read if the text isn't forward-facing.
+                     *
+                     * - `'flap'`: Rotated text along the axis to compensate for the
+                     *   chart orientation. This tries to maintain text as legible as
+                     *   possible on all orientations.
+                     *
+                     * - `'ortho'`: Rotated text along the axis direction so that the
+                     *   labels are orthogonal to the axis. This is very similar to
+                     *   `'flap'`, but prevents skewing the labels (X and Y scaling are
+                     *   still present).
+                     *
+                     * - `undefined`: Will use the config from `labels.position3d`
+                     *
+                     * @sample highcharts/3d/skewed-labels/
+                     *         Skewed labels
+                     *
+                     * @type     {"offset"|"chart"|"flap"|"ortho"|null}
+                     * @since    5.0.15
+                     * @product  highcharts
+                     * @requires highcharts-3d
+                     */
+                    position3d: null,
+                    /**
+                     * If enabled, the axis title will skewed to follow the perspective.
+                     *
+                     * This will fix overlapping labels and titles, but texts become
+                     * less legible due to the distortion.
+                     *
+                     * The final appearance depends heavily on `title.position3d`.
+                     *
+                     * A `null` value will use the config from `labels.skew3d`.
+                     *
+                     * @sample highcharts/3d/skewed-labels/
+                     *         Skewed labels
+                     *
+                     * @type     {boolean|null}
+                     * @since    5.0.15
+                     * @product  highcharts
+                     * @requires highcharts-3d
+                     */
+                    skew3d: null
+                }
+            };
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+
+        return Axis3DDefaults;
+    });
+    _registerModule(_modules, 'Core/Axis/Tick3DComposition.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3352,68 +3484,72 @@
         var addEvent = U.addEvent,
             extend = U.extend,
             wrap = U.wrap;
-        /* eslint-disable valid-jsdoc */
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
-         * Tick with 3D support
          * @private
-         * @class
          */
-        var Tick3D = /** @class */ (function () {
-                function Tick3D() {
-                }
-                /* *
-                 *
-                 *  Static Functions
-                 *
-                 * */
-                /**
-                 * @private
-                 */
-                Tick3D.compose = function (TickClass) {
-                    addEvent(TickClass, 'afterGetLabelPosition', Tick3D.onAfterGetLabelPosition);
-                var tickProto = TickClass.prototype;
-                wrap(tickProto, 'getMarkPath', Tick3D.wrapGetMarkPath);
-            };
-            /**
-             * @private
-             */
-            Tick3D.onAfterGetLabelPosition = function (e) {
-                var axis3D = this.axis.axis3D;
-                if (axis3D) {
-                    extend(e.pos, axis3D.fix3dPosition(e.pos));
-                }
-            };
-            /**
-             * @private
-             */
-            Tick3D.wrapGetMarkPath = function (proceed) {
-                var chart = this.axis.chart;
-                var axis3D = this.axis.axis3D;
-                var path = proceed.apply(this,
-                    [].slice.call(arguments, 1));
-                if (axis3D) {
-                    var start = path[0];
-                    var end = path[1];
-                    if (start[0] === 'M' && end[0] === 'L') {
-                        var pArr = [
-                                axis3D.fix3dPosition({ x: start[1],
-                            y: start[2],
-                            z: 0 }),
-                                axis3D.fix3dPosition({ x: end[1],
-                            y: end[2],
-                            z: 0 })
-                            ];
-                        return this.axis.chart.renderer.toLineSegments(pArr);
-                    }
+        function compose(TickClass) {
+            if (composedClasses.indexOf(TickClass) === -1) {
+                composedClasses.push(TickClass);
+                addEvent(TickClass, 'afterGetLabelPosition', onTickAfterGetLabelPosition);
+                wrap(TickClass.prototype, 'getMarkPath', wrapTickGetMarkPath);
+            }
+        }
+        /**
+         * @private
+         */
+        function onTickAfterGetLabelPosition(e) {
+            var axis3D = this.axis.axis3D;
+            if (axis3D) {
+                extend(e.pos, axis3D.fix3dPosition(e.pos));
+            }
+        }
+        /**
+         * @private
+         */
+        function wrapTickGetMarkPath(proceed) {
+            var axis3D = this.axis.axis3D,
+                path = proceed.apply(this,
+                [].slice.call(arguments, 1));
+            if (axis3D) {
+                var start = path[0];
+                var end = path[1];
+                if (start[0] === 'M' && end[0] === 'L') {
+                    var pArr = [
+                            axis3D.fix3dPosition({ x: start[1],
+                        y: start[2],
+                        z: 0 }),
+                            axis3D.fix3dPosition({ x: end[1],
+                        y: end[2],
+                        z: 0 })
+                        ];
+                    return this.axis.chart.renderer.toLineSegments(pArr);
                 }
-                return path;
+            }
+            return path;
+        }
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        var Tick3DAdditions = {
+                compose: compose
             };
-            return Tick3D;
-        }());
 
-        return Tick3D;
+        return Tick3DAdditions;
     });
-    _registerModule(_modules, 'Core/Axis/Axis3D.js', [_modules['Core/Globals.js'], _modules['Core/Math3D.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Axis/Tick3D.js'], _modules['Core/Utilities.js']], function (H, Math3D, Tick, Tick3D, U) {
+    _registerModule(_modules, 'Core/Axis/Axis3DComposition.js', [_modules['Core/Axis/Axis3DDefaults.js'], _modules['Core/Globals.js'], _modules['Core/Math3D.js'], _modules['Core/Axis/Tick3DComposition.js'], _modules['Core/Utilities.js']], function (Axis3DDefaults, H, Math3D, Tick3D, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -3435,10 +3571,258 @@
             wrap = U.wrap;
         /* *
          *
-         *  Classes
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /**
+         * @private
+         */
+        function onAxisAfterSetOptions() {
+            var axis = this,
+                chart = axis.chart,
+                options = axis.options;
+            if (chart.is3d && chart.is3d() && axis.coll !== 'colorAxis') {
+                options.tickWidth = pick(options.tickWidth, 0);
+                options.gridLineWidth = pick(options.gridLineWidth, 1);
+            }
+        }
+        /**
+         * @private
+         */
+        function onAxisDrawCrosshair(e) {
+            var axis = this;
+            if (axis.chart.is3d() &&
+                axis.coll !== 'colorAxis') {
+                if (e.point) {
+                    e.point.crosshairPos = axis.isXAxis ?
+                        e.point.axisXpos :
+                        axis.len - e.point.axisYpos;
+                }
+            }
+        }
+        /**
+         * @private
+         */
+        function onAxisInit() {
+            var axis = this;
+            if (!axis.axis3D) {
+                axis.axis3D = new Axis3DAdditions(axis);
+            }
+        }
+        /**
+         * Do not draw axislines in 3D.
+         * @private
+         */
+        function wrapAxisGetLinePath(proceed) {
+            var axis = this;
+            // Do not do this if the chart is not 3D
+            if (!axis.chart.is3d() || axis.coll === 'colorAxis') {
+                return proceed.apply(axis, [].slice.call(arguments, 1));
+            }
+            return [];
+        }
+        /**
+         * @private
+         */
+        function wrapAxisGetPlotBandPath(proceed) {
+            // Do not do this if the chart is not 3D
+            if (!this.chart.is3d() || this.coll === 'colorAxis') {
+                return proceed.apply(this, [].slice.call(arguments, 1));
+            }
+            var args = arguments,
+                from = args[1],
+                to = args[2],
+                path = [],
+                fromPath = this.getPlotLinePath({ value: from }),
+                toPath = this.getPlotLinePath({ value: to });
+            if (fromPath && toPath) {
+                for (var i = 0; i < fromPath.length; i += 2) {
+                    var fromStartSeg = fromPath[i],
+                        fromEndSeg = fromPath[i + 1],
+                        toStartSeg = toPath[i],
+                        toEndSeg = toPath[i + 1];
+                    if (fromStartSeg[0] === 'M' &&
+                        fromEndSeg[0] === 'L' &&
+                        toStartSeg[0] === 'M' &&
+                        toEndSeg[0] === 'L') {
+                        path.push(fromStartSeg, fromEndSeg, toEndSeg, 
+                        // lineTo instead of moveTo
+                        ['L', toStartSeg[1], toStartSeg[2]], ['Z']);
+                    }
+                }
+            }
+            return path;
+        }
+        /**
+         * @private
+         */
+        function wrapAxisGetPlotLinePath(proceed) {
+            var axis = this,
+                axis3D = axis.axis3D,
+                chart = axis.chart,
+                path = proceed.apply(axis,
+                [].slice.call(arguments, 1));
+            // Do not do this if the chart is not 3D
+            if (axis.coll === 'colorAxis' ||
+                !chart.chart3d ||
+                !chart.is3d()) {
+                return path;
+            }
+            if (path === null) {
+                return path;
+            }
+            var options3d = chart.options.chart.options3d,
+                d = axis.isZAxis ? chart.plotWidth : options3d.depth,
+                frame = chart.chart3d.frame3d,
+                startSegment = path[0],
+                endSegment = path[1];
+            var pArr,
+                pathSegments = [];
+            if (startSegment[0] === 'M' && endSegment[0] === 'L') {
+                pArr = [
+                    axis3D.swapZ({ x: startSegment[1], y: startSegment[2], z: 0 }),
+                    axis3D.swapZ({ x: startSegment[1], y: startSegment[2], z: d }),
+                    axis3D.swapZ({ x: endSegment[1], y: endSegment[2], z: 0 }),
+                    axis3D.swapZ({ x: endSegment[1], y: endSegment[2], z: d })
+                ];
+                if (!this.horiz) { // Y-Axis
+                    if (frame.front.visible) {
+                        pathSegments.push(pArr[0], pArr[2]);
+                    }
+                    if (frame.back.visible) {
+                        pathSegments.push(pArr[1], pArr[3]);
+                    }
+                    if (frame.left.visible) {
+                        pathSegments.push(pArr[0], pArr[1]);
+                    }
+                    if (frame.right.visible) {
+                        pathSegments.push(pArr[2], pArr[3]);
+                    }
+                }
+                else if (this.isZAxis) { // Z-Axis
+                    if (frame.left.visible) {
+                        pathSegments.push(pArr[0], pArr[2]);
+                    }
+                    if (frame.right.visible) {
+                        pathSegments.push(pArr[1], pArr[3]);
+                    }
+                    if (frame.top.visible) {
+                        pathSegments.push(pArr[0], pArr[1]);
+                    }
+                    if (frame.bottom.visible) {
+                        pathSegments.push(pArr[2], pArr[3]);
+                    }
+                }
+                else { // X-Axis
+                    if (frame.front.visible) {
+                        pathSegments.push(pArr[0], pArr[2]);
+                    }
+                    if (frame.back.visible) {
+                        pathSegments.push(pArr[1], pArr[3]);
+                    }
+                    if (frame.top.visible) {
+                        pathSegments.push(pArr[0], pArr[1]);
+                    }
+                    if (frame.bottom.visible) {
+                        pathSegments.push(pArr[2], pArr[3]);
+                    }
+                }
+                pathSegments = perspective(pathSegments, this.chart, false);
+            }
+            return chart.renderer.toLineSegments(pathSegments);
+        }
+        /**
+         * Wrap getSlotWidth function to calculate individual width value for each
+         * slot (#8042).
+         * @private
+         */
+        function wrapAxisGetSlotWidth(proceed, tick) {
+            var axis = this,
+                chart = axis.chart,
+                ticks = axis.ticks,
+                gridGroup = axis.gridGroup;
+            if (axis.categories &&
+                chart.frameShapes &&
+                chart.is3d() &&
+                gridGroup &&
+                tick &&
+                tick.label) {
+                var firstGridLine = (gridGroup.element.childNodes[0].getBBox()),
+                    frame3DLeft = chart.frameShapes.left.getBBox(),
+                    options3d = chart.options.chart.options3d,
+                    origin_1 = {
+                        x: chart.plotWidth / 2,
+                        y: chart.plotHeight / 2,
+                        z: options3d.depth / 2,
+                        vd: (pick(options3d.depth, 1) *
+                            pick(options3d.viewDistance, 0))
+                    },
+                    tickId = tick.pos,
+                    prevTick = ticks[tickId - 1],
+                    nextTick = ticks[tickId + 1];
+                var labelPos = void 0,
+                    prevLabelPos = void 0,
+                    nextLabelPos = void 0;
+                // Check whether the tick is not the first one and previous tick
+                // exists, then calculate position of previous label.
+                if (tickId !== 0 &&
+                    prevTick &&
+                    prevTick.label &&
+                    prevTick.label.xy) {
+                    prevLabelPos = perspective3D({
+                        x: prevTick.label.xy.x,
+                        y: prevTick.label.xy.y,
+                        z: null
+                    }, origin_1, origin_1.vd);
+                }
+                // If next label position is defined, then recalculate its position
+                // basing on the perspective.
+                if (nextTick && nextTick.label && nextTick.label.xy) {
+                    nextLabelPos = perspective3D({
+                        x: nextTick.label.xy.x,
+                        y: nextTick.label.xy.y,
+                        z: null
+                    }, origin_1, origin_1.vd);
+                }
+                labelPos = {
+                    x: tick.label.xy.x,
+                    y: tick.label.xy.y,
+                    z: null
+                };
+                labelPos = perspective3D(labelPos, origin_1, origin_1.vd);
+                // If tick is first one, check whether next label position is
+                // already calculated, then return difference between the first and
+                // the second label. If there is no next label position calculated,
+                // return the difference between the first grid line and left 3d
+                // frame.
+                return Math.abs(prevLabelPos ?
+                    labelPos.x - prevLabelPos.x : nextLabelPos ?
+                    nextLabelPos.x - labelPos.x :
+                    firstGridLine.x - frame3DLeft.x);
+            }
+            return proceed.apply(axis, [].slice.call(arguments, 1));
+        }
+        /**
+         * @private
+         */
+        function wrapAxisGetTitlePosition(proceed) {
+            var pos = proceed.apply(this,
+                [].slice.call(arguments, 1));
+            return this.axis3D ?
+                this.axis3D.fix3dPosition(pos, true) :
+                pos;
+        }
+        /* *
+         *
+         *  Class
          *
          * */
-        /* eslint-disable valid-jsdoc */
         /**
          * Adds 3D support to axes.
          * @private
@@ -3456,6 +3840,32 @@
                 function Axis3DAdditions(axis) {
                     this.axis = axis;
             }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * Extends axis class with 3D support.
+             * @private
+             */
+            Axis3DAdditions.compose = function (AxisClass, TickClass) {
+                Tick3D.compose(TickClass);
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    merge(true, AxisClass.defaultOptions, Axis3DDefaults);
+                    AxisClass.keepProps.push('axis3D');
+                    addEvent(AxisClass, 'init', onAxisInit);
+                    addEvent(AxisClass, 'afterSetOptions', onAxisAfterSetOptions);
+                    addEvent(AxisClass, 'drawCrosshair', onAxisDrawCrosshair);
+                    var axisProto = AxisClass.prototype;
+                    wrap(axisProto, 'getLinePath', wrapAxisGetLinePath);
+                    wrap(axisProto, 'getPlotBandPath', wrapAxisGetPlotBandPath);
+                    wrap(axisProto, 'getPlotLinePath', wrapAxisGetPlotLinePath);
+                    wrap(axisProto, 'getSlotWidth', wrapAxisGetSlotWidth);
+                    wrap(axisProto, 'getTitlePosition', wrapAxisGetTitlePosition);
+                }
+            };
             /* *
              *
              *  Functions
@@ -3695,396 +4105,13 @@
             };
             return Axis3DAdditions;
         }());
-        /**
-         * Axis with 3D support.
-         * @private
-         * @class
-         */
-        var Axis3D = /** @class */ (function () {
-                function Axis3D() {
-                }
-                /* *
-                 *
-                 *  Static Functions
-                 *
-                 * */
-                /**
-                 * Extends axis class with 3D support.
-                 * @private
-                 */
-                Axis3D.compose = function (AxisClass) {
-                    merge(true, AxisClass.defaultOptions, Axis3D.defaultOptions);
-                AxisClass.keepProps.push('axis3D');
-                addEvent(AxisClass, 'init', Axis3D.onInit);
-                addEvent(AxisClass, 'afterSetOptions', Axis3D.onAfterSetOptions);
-                addEvent(AxisClass, 'drawCrosshair', Axis3D.onDrawCrosshair);
-                var axisProto = AxisClass.prototype;
-                wrap(axisProto, 'getLinePath', Axis3D.wrapGetLinePath);
-                wrap(axisProto, 'getPlotBandPath', Axis3D.wrapGetPlotBandPath);
-                wrap(axisProto, 'getPlotLinePath', Axis3D.wrapGetPlotLinePath);
-                wrap(axisProto, 'getSlotWidth', Axis3D.wrapGetSlotWidth);
-                wrap(axisProto, 'getTitlePosition', Axis3D.wrapGetTitlePosition);
-                Tick3D.compose(Tick);
-            };
-            /**
-             * @private
-             */
-            Axis3D.onAfterSetOptions = function () {
-                var axis = this;
-                var chart = axis.chart;
-                var options = axis.options;
-                if (chart.is3d && chart.is3d() && axis.coll !== 'colorAxis') {
-                    options.tickWidth = pick(options.tickWidth, 0);
-                    options.gridLineWidth = pick(options.gridLineWidth, 1);
-                }
-            };
-            /**
-             * @private
-             */
-            Axis3D.onDrawCrosshair = function (e) {
-                var axis = this;
-                if (axis.chart.is3d() &&
-                    axis.coll !== 'colorAxis') {
-                    if (e.point) {
-                        e.point.crosshairPos = axis.isXAxis ?
-                            e.point.axisXpos :
-                            axis.len - e.point.axisYpos;
-                    }
-                }
-            };
-            /**
-             * @private
-             */
-            Axis3D.onInit = function () {
-                var axis = this;
-                if (!axis.axis3D) {
-                    axis.axis3D = new Axis3DAdditions(axis);
-                }
-            };
-            /**
-             * Do not draw axislines in 3D.
-             * @private
-             */
-            Axis3D.wrapGetLinePath = function (proceed) {
-                var axis = this;
-                // Do not do this if the chart is not 3D
-                if (!axis.chart.is3d() || axis.coll === 'colorAxis') {
-                    return proceed.apply(axis, [].slice.call(arguments, 1));
-                }
-                return [];
-            };
-            /**
-             * @private
-             */
-            Axis3D.wrapGetPlotBandPath = function (proceed) {
-                // Do not do this if the chart is not 3D
-                if (!this.chart.is3d() || this.coll === 'colorAxis') {
-                    return proceed.apply(this, [].slice.call(arguments, 1));
-                }
-                var args = arguments,
-                    from = args[1],
-                    to = args[2],
-                    path = [],
-                    fromPath = this.getPlotLinePath({ value: from }),
-                    toPath = this.getPlotLinePath({ value: to });
-                if (fromPath && toPath) {
-                    for (var i = 0; i < fromPath.length; i += 2) {
-                        var fromStartSeg = fromPath[i],
-                            fromEndSeg = fromPath[i + 1],
-                            toStartSeg = toPath[i],
-                            toEndSeg = toPath[i + 1];
-                        if (fromStartSeg[0] === 'M' &&
-                            fromEndSeg[0] === 'L' &&
-                            toStartSeg[0] === 'M' &&
-                            toEndSeg[0] === 'L') {
-                            path.push(fromStartSeg, fromEndSeg, toEndSeg, 
-                            // lineTo instead of moveTo
-                            ['L', toStartSeg[1], toStartSeg[2]], ['Z']);
-                        }
-                    }
-                }
-                return path;
-            };
-            /**
-             * @private
-             */
-            Axis3D.wrapGetPlotLinePath = function (proceed) {
-                var axis = this,
-                    axis3D = axis.axis3D,
-                    chart = axis.chart,
-                    path = proceed.apply(axis,
-                    [].slice.call(arguments, 1));
-                // Do not do this if the chart is not 3D
-                if (axis.coll === 'colorAxis' ||
-                    !chart.chart3d ||
-                    !chart.is3d()) {
-                    return path;
-                }
-                if (path === null) {
-                    return path;
-                }
-                var options3d = chart.options.chart.options3d,
-                    d = axis.isZAxis ? chart.plotWidth : options3d.depth,
-                    frame = chart.chart3d.frame3d,
-                    startSegment = path[0],
-                    endSegment = path[1];
-                var pArr,
-                    pathSegments = [];
-                if (startSegment[0] === 'M' && endSegment[0] === 'L') {
-                    pArr = [
-                        axis3D.swapZ({ x: startSegment[1], y: startSegment[2], z: 0 }),
-                        axis3D.swapZ({ x: startSegment[1], y: startSegment[2], z: d }),
-                        axis3D.swapZ({ x: endSegment[1], y: endSegment[2], z: 0 }),
-                        axis3D.swapZ({ x: endSegment[1], y: endSegment[2], z: d })
-                    ];
-                    if (!this.horiz) { // Y-Axis
-                        if (frame.front.visible) {
-                            pathSegments.push(pArr[0], pArr[2]);
-                        }
-                        if (frame.back.visible) {
-                            pathSegments.push(pArr[1], pArr[3]);
-                        }
-                        if (frame.left.visible) {
-                            pathSegments.push(pArr[0], pArr[1]);
-                        }
-                        if (frame.right.visible) {
-                            pathSegments.push(pArr[2], pArr[3]);
-                        }
-                    }
-                    else if (this.isZAxis) { // Z-Axis
-                        if (frame.left.visible) {
-                            pathSegments.push(pArr[0], pArr[2]);
-                        }
-                        if (frame.right.visible) {
-                            pathSegments.push(pArr[1], pArr[3]);
-                        }
-                        if (frame.top.visible) {
-                            pathSegments.push(pArr[0], pArr[1]);
-                        }
-                        if (frame.bottom.visible) {
-                            pathSegments.push(pArr[2], pArr[3]);
-                        }
-                    }
-                    else { // X-Axis
-                        if (frame.front.visible) {
-                            pathSegments.push(pArr[0], pArr[2]);
-                        }
-                        if (frame.back.visible) {
-                            pathSegments.push(pArr[1], pArr[3]);
-                        }
-                        if (frame.top.visible) {
-                            pathSegments.push(pArr[0], pArr[1]);
-                        }
-                        if (frame.bottom.visible) {
-                            pathSegments.push(pArr[2], pArr[3]);
-                        }
-                    }
-                    pathSegments = perspective(pathSegments, this.chart, false);
-                }
-                return chart.renderer.toLineSegments(pathSegments);
-            };
-            /**
-             * Wrap getSlotWidth function to calculate individual width value for each
-             * slot (#8042).
-             * @private
-             */
-            Axis3D.wrapGetSlotWidth = function (proceed, tick) {
-                var axis = this,
-                    chart = axis.chart,
-                    ticks = axis.ticks,
-                    gridGroup = axis.gridGroup;
-                if (axis.categories &&
-                    chart.frameShapes &&
-                    chart.is3d() &&
-                    gridGroup &&
-                    tick &&
-                    tick.label) {
-                    var firstGridLine = (gridGroup.element.childNodes[0].getBBox()),
-                        frame3DLeft = chart.frameShapes.left.getBBox(),
-                        options3d = chart.options.chart.options3d,
-                        origin_1 = {
-                            x: chart.plotWidth / 2,
-                            y: chart.plotHeight / 2,
-                            z: options3d.depth / 2,
-                            vd: (pick(options3d.depth, 1) *
-                                pick(options3d.viewDistance, 0))
-                        },
-                        tickId = tick.pos,
-                        prevTick = ticks[tickId - 1],
-                        nextTick = ticks[tickId + 1];
-                    var labelPos = void 0,
-                        prevLabelPos = void 0,
-                        nextLabelPos = void 0;
-                    // Check whether the tick is not the first one and previous tick
-                    // exists, then calculate position of previous label.
-                    if (tickId !== 0 &&
-                        prevTick &&
-                        prevTick.label &&
-                        prevTick.label.xy) {
-                        prevLabelPos = perspective3D({
-                            x: prevTick.label.xy.x,
-                            y: prevTick.label.xy.y,
-                            z: null
-                        }, origin_1, origin_1.vd);
-                    }
-                    // If next label position is defined, then recalculate its position
-                    // basing on the perspective.
-                    if (nextTick && nextTick.label && nextTick.label.xy) {
-                        nextLabelPos = perspective3D({
-                            x: nextTick.label.xy.x,
-                            y: nextTick.label.xy.y,
-                            z: null
-                        }, origin_1, origin_1.vd);
-                    }
-                    labelPos = {
-                        x: tick.label.xy.x,
-                        y: tick.label.xy.y,
-                        z: null
-                    };
-                    labelPos = perspective3D(labelPos, origin_1, origin_1.vd);
-                    // If tick is first one, check whether next label position is
-                    // already calculated, then return difference between the first and
-                    // the second label. If there is no next label position calculated,
-                    // return the difference between the first grid line and left 3d
-                    // frame.
-                    return Math.abs(prevLabelPos ?
-                        labelPos.x - prevLabelPos.x : nextLabelPos ?
-                        nextLabelPos.x - labelPos.x :
-                        firstGridLine.x - frame3DLeft.x);
-                }
-                return proceed.apply(axis, [].slice.call(arguments, 1));
-            };
-            /**
-             * @private
-             */
-            Axis3D.wrapGetTitlePosition = function (proceed) {
-                var pos = proceed.apply(this,
-                    [].slice.call(arguments, 1));
-                return this.axis3D ?
-                    this.axis3D.fix3dPosition(pos, true) :
-                    pos;
-            };
-            /* *
-             *
-             *  Static Properties
-             *
-             * */
-            /**
-             * @optionparent xAxis
-             */
-            Axis3D.defaultOptions = {
-                labels: {
-                    /**
-                     * Defines how the labels are be repositioned according to the 3D
-                     * chart orientation.
-                     *
-                     * - `'offset'`: Maintain a fixed horizontal/vertical distance from
-                     *   the tick marks, despite the chart orientation. This is the
-                     *   backwards compatible behavior, and causes skewing of X and Z
-                     *   axes.
-                     *
-                     * - `'chart'`: Preserve 3D position relative to the chart. This
-                     *   looks nice, but hard to read if the text isn't forward-facing.
-                     *
-                     * - `'flap'`: Rotated text along the axis to compensate for the
-                     *   chart orientation. This tries to maintain text as legible as
-                     *   possible on all orientations.
-                     *
-                     * - `'ortho'`: Rotated text along the axis direction so that the
-                     *   labels are orthogonal to the axis. This is very similar to
-                     *   `'flap'`, but prevents skewing the labels (X and Y scaling are
-                     *   still present).
-                     *
-                     * @sample highcharts/3d/skewed-labels/
-                     *         Skewed labels
-                     *
-                     * @since      5.0.15
-                     * @validvalue ['offset', 'chart', 'flap', 'ortho']
-                     * @product    highcharts
-                     * @requires   highcharts-3d
-                     */
-                    position3d: 'offset',
-                    /**
-                     * If enabled, the axis labels will skewed to follow the
-                     * perspective.
-                     *
-                     * This will fix overlapping labels and titles, but texts become
-                     * less legible due to the distortion.
-                     *
-                     * The final appearance depends heavily on `labels.position3d`.
-                     *
-                     * @sample highcharts/3d/skewed-labels/
-                     *         Skewed labels
-                     *
-                     * @since    5.0.15
-                     * @product  highcharts
-                     * @requires highcharts-3d
-                     */
-                    skew3d: false
-                },
-                title: {
-                    /**
-                     * Defines how the title is repositioned according to the 3D chart
-                     * orientation.
-                     *
-                     * - `'offset'`: Maintain a fixed horizontal/vertical distance from
-                     *   the tick marks, despite the chart orientation. This is the
-                     *   backwards compatible behavior, and causes skewing of X and Z
-                     *   axes.
-                     *
-                     * - `'chart'`: Preserve 3D position relative to the chart. This
-                     *   looks nice, but hard to read if the text isn't forward-facing.
-                     *
-                     * - `'flap'`: Rotated text along the axis to compensate for the
-                     *   chart orientation. This tries to maintain text as legible as
-                     *   possible on all orientations.
-                     *
-                     * - `'ortho'`: Rotated text along the axis direction so that the
-                     *   labels are orthogonal to the axis. This is very similar to
-                     *   `'flap'`, but prevents skewing the labels (X and Y scaling are
-                     *   still present).
-                     *
-                     * - `undefined`: Will use the config from `labels.position3d`
-                     *
-                     * @sample highcharts/3d/skewed-labels/
-                     *         Skewed labels
-                     *
-                     * @type     {"offset"|"chart"|"flap"|"ortho"|null}
-                     * @since    5.0.15
-                     * @product  highcharts
-                     * @requires highcharts-3d
-                     */
-                    position3d: null,
-                    /**
-                     * If enabled, the axis title will skewed to follow the perspective.
-                     *
-                     * This will fix overlapping labels and titles, but texts become
-                     * less legible due to the distortion.
-                     *
-                     * The final appearance depends heavily on `title.position3d`.
-                     *
-                     * A `null` value will use the config from `labels.skew3d`.
-                     *
-                     * @sample highcharts/3d/skewed-labels/
-                     *         Skewed labels
-                     *
-                     * @type     {boolean|null}
-                     * @since    5.0.15
-                     * @product  highcharts
-                     * @requires highcharts-3d
-                     */
-                    skew3d: null
-                }
-            };
-            return Axis3D;
-        }());
         /* *
          *
          *  Default Export
          *
          * */
 
-        return Axis3D;
+        return Axis3DAdditions;
     });
     _registerModule(_modules, 'Core/Series/Series3D.js', [_modules['Core/Math3D.js'], _modules['Core/Series/Series.js'], _modules['Core/Utilities.js']], function (Math3D, Series, U) {
         /* *
@@ -5476,14 +5503,14 @@
 
         return Scatter3DSeries;
     });
-    _registerModule(_modules, 'masters/highcharts-3d.src.js', [_modules['Core/Globals.js'], _modules['Core/Renderer/SVG/SVGRenderer3D.js'], _modules['Core/Chart/Chart3D.js'], _modules['Core/Axis/ZAxis.js'], _modules['Core/Axis/Axis3D.js'], _modules['Series/Area3D/Area3DSeries.js']], function (Highcharts, SVGRenderer3D, Chart3D, ZAxis, Axis3D, Area3DSeries) {
+    _registerModule(_modules, 'masters/highcharts-3d.src.js', [_modules['Core/Globals.js'], _modules['Core/Renderer/SVG/SVGRenderer3D.js'], _modules['Core/Chart/Chart3D.js'], _modules['Core/Axis/ZAxis.js'], _modules['Core/Axis/Axis3DComposition.js'], _modules['Series/Area3D/Area3DSeries.js']], function (Highcharts, SVGRenderer3D, Chart3D, ZAxis, Axis3DComposition, Area3DSeries) {
 
         var G = Highcharts;
         // Compositions
         SVGRenderer3D.compose(G.SVGRenderer);
         Chart3D.compose(G.Chart, G.Fx);
         ZAxis.compose(G.Chart);
-        Axis3D.compose(G.Axis);
+        Axis3DComposition.compose(G.Axis, G.Tick);
         Area3DSeries.compose(G.seriesTypes.area);
 
     });