highcharts 8.1.0 → 8.2.2

package/highcharts-3d.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v8.1.0 (2020-05-05)
+ * @license Highcharts JS v8.2.2 (2020-10-22)
  *
  * 3D features for Highcharts JS
  *
@@ -26,7 +26,7 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'parts-3d/Math.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Math3D.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (H, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -110,8 +110,10 @@
          *
          * @requires highcharts-3d
          */
-        H.perspective3D = function (coordinate, origin, distance) {
-            var projection = ((distance > 0) && (distance < Number.POSITIVE_INFINITY)) ?
+        var perspective3D = H.perspective3D = function (coordinate,
+            origin,
+            distance) {
+                var projection = ((distance > 0) && (distance < Number.POSITIVE_INFINITY)) ?
                     distance / (coordinate.z + origin.z + distance) :
                     1;
             return {
@@ -142,24 +144,27 @@
          *
          * @requires highcharts-3d
          */
-        H.perspective = function (points, chart, insidePlotArea, useInvertedPersp) {
-            var options3d = chart.options.chart.options3d, 
+        var perspective = H.perspective = function (points,
+            chart,
+            insidePlotArea,
+            useInvertedPersp) {
+                var options3d = chart.options.chart.options3d, 
                 /* The useInvertedPersp argument is used for
                  * inverted charts with already inverted elements,
                  * such as dataLabels or tooltip positions.
                  */
                 inverted = pick(useInvertedPersp,
-                insidePlotArea ? chart.inverted : false),
-                origin = {
+            insidePlotArea ? chart.inverted : false),
+            origin = {
                     x: chart.plotWidth / 2,
                     y: chart.plotHeight / 2,
                     z: options3d.depth / 2,
                     vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
                 },
-                scale = chart.scale3d || 1,
-                beta = deg2rad * options3d.beta * (inverted ? -1 : 1),
-                alpha = deg2rad * options3d.alpha * (inverted ? -1 : 1),
-                angles = {
+            scale = chart.scale3d || 1,
+            beta = deg2rad * options3d.beta * (inverted ? -1 : 1),
+            alpha = deg2rad * options3d.alpha * (inverted ? -1 : 1),
+            angles = {
                     cosA: Math.cos(alpha),
                     cosB: Math.cos(-beta),
                     sinA: Math.sin(alpha),
@@ -174,7 +179,7 @@
                 var rotated = rotate3D((inverted ? point.y : point.x) - origin.x, (inverted ? point.x : point.y) - origin.y, (point.z || 0) - origin.z,
                     angles), 
                     // Apply perspective
-                    coordinate = H.perspective3D(rotated,
+                    coordinate = perspective3D(rotated,
                     origin,
                     origin.vd);
                 // Apply translation
@@ -206,9 +211,10 @@
          *
          * @requires highcharts-3d
          */
-        H.pointCameraDistance = function (coordinates, chart) {
-            var options3d = chart.options.chart.options3d,
-                cameraPosition = {
+        var pointCameraDistance = H.pointCameraDistance = function (coordinates,
+            chart) {
+                var options3d = chart.options.chart.options3d,
+            cameraPosition = {
                     x: chart.plotWidth / 2,
                     y: chart.plotHeight / 2,
                     z: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0) +
@@ -216,11 +222,11 @@
                 }, 
                 // Added support for objects with plotX or x coordinates.
                 distance = Math.sqrt(Math.pow(cameraPosition.x - pick(coordinates.plotX,
-                coordinates.x), 2) +
+            coordinates.x), 2) +
                     Math.pow(cameraPosition.y - pick(coordinates.plotY,
-                coordinates.y), 2) +
+            coordinates.y), 2) +
                     Math.pow(cameraPosition.z - pick(coordinates.plotZ,
-                coordinates.z), 2));
+            coordinates.z), 2));
             return distance;
         };
         /**
@@ -238,10 +244,10 @@
          *
          * @requires highcharts-3d
          */
-        H.shapeArea = function (vertexes) {
-            var area = 0,
-                i,
-                j;
+        var shapeArea = H.shapeArea = function (vertexes) {
+                var area = 0,
+            i,
+            j;
             for (i = 0; i < vertexes.length; i++) {
                 j = (i + 1) % vertexes.length;
                 area += vertexes[i].x * vertexes[j].y - vertexes[j].x * vertexes[i].y;
@@ -268,12 +274,24 @@
          *
          * @requires highcharts-3d
          */
-        H.shapeArea3d = function (vertexes, chart, insidePlotArea) {
-            return H.shapeArea(H.perspective(vertexes, chart, insidePlotArea));
+        var shapeArea3D = H.shapeArea3d = function (vertexes,
+            chart,
+            insidePlotArea) {
+                return shapeArea(perspective(vertexes,
+            chart,
+            insidePlotArea));
         };
+        var mathModule = {
+                perspective: perspective,
+                perspective3D: perspective3D,
+                pointCameraDistance: pointCameraDistance,
+                shapeArea: shapeArea,
+                shapeArea3D: shapeArea3D
+            };
 
+        return mathModule;
     });
-    _registerModule(_modules, 'parts-3d/SVGRenderer.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Core/Renderer/SVG/SVGRenderer3D.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Color/Color.js'], _modules['Core/Globals.js'], _modules['Extensions/Math3D.js'], _modules['Core/Renderer/SVG/SVGElement.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (A, Color, H, Math3D, SVGElement, SVGRenderer, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -285,8 +303,11 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var animObject = U.animObject,
-            defined = U.defined,
+        var animObject = A.animObject;
+        var color = Color.parse;
+        var perspective = Math3D.perspective,
+            shapeArea = Math3D.shapeArea;
+        var defined = U.defined,
             extend = U.extend,
             merge = U.merge,
             objectEach = U.objectEach,
@@ -295,11 +316,7 @@
             PI = Math.PI,
             sin = Math.sin;
         var charts = H.charts,
-            color = H.color,
-            deg2rad = H.deg2rad,
-            perspective = H.perspective,
-            SVGElement = H.SVGElement,
-            SVGRenderer = H.SVGRenderer, 
+            deg2rad = H.deg2rad, 
             // internal:
             dFactor,
             element3dMethods,
@@ -392,7 +409,7 @@
                         this.insidePlotArea),
                         path = renderer.toLinePath(vertexes2d,
                         true),
-                        area = H.shapeArea(vertexes2d),
+                        area = shapeArea(vertexes2d),
                         visibility = (this.enabled && area > 0) ? 'visible' : 'hidden';
                     hash.d = path;
                     hash.visibility = visibility;
@@ -416,7 +433,7 @@
                         this.insidePlotArea),
                         path = renderer.toLinePath(vertexes2d,
                         true),
-                        area = H.shapeArea(vertexes2d),
+                        area = shapeArea(vertexes2d),
                         visibility = (this.enabled && area > 0) ? 'visible' : 'hidden';
                     params.d = path;
                     this.attr('visibility', visibility);
@@ -645,7 +662,7 @@
             return this.element3d('cuboid', shapeArgs);
         };
         // Generates a cuboid path and zIndexes
-        H.SVGRenderer.prototype.cuboidPath = function (shapeArgs) {
+        SVGRenderer.prototype.cuboidPath = function (shapeArgs) {
             var x = shapeArgs.x,
                 y = shapeArgs.y,
                 z = shapeArgs.z || 0, 
@@ -787,18 +804,18 @@
                     // possible to use this vertices array for visible face calculation
                     dummyFace1 = verticesIndex1.map(mapSidePath),
                     dummyFace2 = verticesIndex2.map(mapSidePath);
-                if (H.shapeArea(face1) < 0) {
+                if (shapeArea(face1) < 0) {
                     ret = [face1, 0];
                 }
-                else if (H.shapeArea(face2) < 0) {
+                else if (shapeArea(face2) < 0) {
                     ret = [face2, 1];
                 }
                 else if (side) {
                     forcedSides.push(side);
-                    if (H.shapeArea(dummyFace1) < 0) {
+                    if (shapeArea(dummyFace1) < 0) {
                         ret = [face1, 0];
                     }
-                    else if (H.shapeArea(dummyFace2) < 0) {
+                    else if (shapeArea(dummyFace2) < 0) {
                         ret = [face2, 1];
                     }
                     else {
@@ -865,7 +882,7 @@
             }; // #4774
         };
         // SECTORS //
-        H.SVGRenderer.prototype.arc3d = function (attribs) {
+        SVGRenderer.prototype.arc3d = function (attribs) {
             var wrapper = this.g(), renderer = wrapper.renderer, customAttribs = ['x', 'y', 'r', 'innerR', 'start', 'end', 'depth'];
             /**
              * Get custom attributes. Don't mutate the original object and return an
@@ -884,7 +901,7 @@
                         hasCA = true;
                     }
                 }
-                return hasCA ? ca : false;
+                return hasCA ? [ca, params] : false;
             }
             attribs = merge(attribs);
             attribs.alpha = (attribs.alpha || 0) * deg2rad;
@@ -968,10 +985,13 @@
             });
             // Override attr to remove shape attributes and use those to set child paths
             wrapper.attr = function (params) {
-                var ca;
+                var ca,
+                    paramArr;
                 if (typeof params === 'object') {
-                    ca = suckOutCustom(params);
-                    if (ca) {
+                    paramArr = suckOutCustom(params);
+                    if (paramArr) {
+                        ca = paramArr[0];
+                        arguments[0] = paramArr[1];
                         extend(wrapper.attribs, ca);
                         wrapper.setPaths(wrapper.attribs);
                     }
@@ -981,7 +1001,7 @@
             // Override the animate function by sucking out custom parameters related to
             // the shapes directly, and update the shapes from the animation step.
             wrapper.animate = function (params, animation, complete) {
-                var ca,
+                var paramArr,
                     from = this.attribs,
                     to,
                     anim,
@@ -994,14 +1014,14 @@
                 delete params.beta;
                 anim = animObject(pick(animation, this.renderer.globalAnimation));
                 if (anim.duration) {
-                    ca = suckOutCustom(params);
+                    paramArr = suckOutCustom(params);
                     // Params need to have a property in order for the step to run
                     // (#5765, #7097, #7437)
                     wrapper[randomProp] = 0;
                     params[randomProp] = 1;
                     wrapper[randomProp + 'Setter'] = H.noop;
-                    if (ca) {
-                        to = ca;
+                    if (paramArr) {
+                        to = paramArr[0]; // custom attr
                         anim.step = function (a, fx) {
                             /**
                              * @private
@@ -1254,8 +1274,9 @@
             };
         };
 
+        return SVGRenderer;
     });
-    _registerModule(_modules, 'parts-3d/Tick3D.js', [_modules['parts/Utilities.js']], function (U) {
+    _registerModule(_modules, 'Core/Axis/Tick3D.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -1331,7 +1352,7 @@
 
         return Tick3D;
     });
-    _registerModule(_modules, 'parts-3d/Axis3D.js', [_modules['parts/Globals.js'], _modules['parts/Tick.js'], _modules['parts-3d/Tick3D.js'], _modules['parts/Utilities.js']], function (H, Tick, Tick3D, U) {
+    _registerModule(_modules, 'Core/Axis/Axis3D.js', [_modules['Core/Globals.js'], _modules['Extensions/Math3D.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Axis/Tick3D.js'], _modules['Core/Utilities.js']], function (H, Math3D, Tick, Tick3D, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -1343,14 +1364,14 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var perspective = Math3D.perspective,
+            perspective3D = Math3D.perspective3D,
+            shapeArea = Math3D.shapeArea;
         var addEvent = U.addEvent,
             merge = U.merge,
             pick = U.pick,
             wrap = U.wrap;
-        var deg2rad = H.deg2rad,
-            perspective = H.perspective,
-            perspective3D = H.perspective3D,
-            shapeArea = H.shapeArea;
+        var deg2rad = H.deg2rad;
         /* eslint-disable valid-jsdoc */
         /**
          * Adds 3D support to axes.
@@ -1391,6 +1412,7 @@
                 var chart = axis.chart;
                 // Do not do this if the chart is not 3D
                 if (axis.coll === 'colorAxis' ||
+                    !chart.chart3d ||
                     !chart.is3d()) {
                     return pos;
                 }
@@ -1400,7 +1422,7 @@
                     axis.options.labels.position3d),
                     skew = pick(isTitle && axis.options.title.skew3d,
                     axis.options.labels.skew3d),
-                    frame = chart.frame3d,
+                    frame = chart.chart3d.frame3d,
                     plotLeft = chart.plotLeft,
                     plotRight = chart.plotWidth + plotLeft,
                     plotTop = chart.plotTop,
@@ -1736,7 +1758,9 @@
                 var path = proceed.apply(axis,
                     [].slice.call(arguments, 1));
                 // Do not do this if the chart is not 3D
-                if (!chart.is3d() || axis.coll === 'colorAxis') {
+                if (axis.coll === 'colorAxis' ||
+                    !chart.chart3d ||
+                    !chart.is3d()) {
                     return path;
                 }
                 if (path === null) {
@@ -1744,7 +1768,7 @@
                 }
                 var options3d = chart.options.chart.options3d,
                     d = axis.isZAxis ? chart.plotWidth : options3d.depth,
-                    frame = chart.frame3d,
+                    frame = chart.chart3d.frame3d,
                     startSegment = path[0],
                     endSegment = path[1],
                     pArr,
@@ -1998,7 +2022,7 @@
 
         return Axis3D;
     });
-    _registerModule(_modules, 'parts-3d/ZAxis.js', [_modules['parts/Axis.js'], _modules['parts/Utilities.js']], function (Axis, U) {
+    _registerModule(_modules, 'Core/Axis/ZAxis.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Utilities.js']], function (Axis, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -2164,7 +2188,7 @@
 
         return ZAxis;
     });
-    _registerModule(_modules, 'parts-3d/Chart.js', [_modules['parts/Axis.js'], _modules['parts-3d/Axis3D.js'], _modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['parts-3d/ZAxis.js']], function (Axis, Axis3D, H, U, ZAxis) {
+    _registerModule(_modules, 'Core/Chart/Chart3D.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Axis/Axis3D.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Animation/Fx.js'], _modules['Core/Globals.js'], _modules['Extensions/Math3D.js'], _modules['Core/Options.js'], _modules['Core/Utilities.js'], _modules['Core/Axis/ZAxis.js']], function (Axis, Axis3D, Chart, Fx, H, Math3D, O, U, ZAxis) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -2176,158 +2200,493 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var perspective = Math3D.perspective,
+            shapeArea3D = Math3D.shapeArea3D;
+        var genericDefaultOptions = O.defaultOptions;
         var addEvent = U.addEvent,
-            Fx = U.Fx,
             isArray = U.isArray,
             merge = U.merge,
             pick = U.pick,
             wrap = U.wrap;
-        var Chart = H.Chart,
-            perspective = H.perspective;
-        /**
-         * Shorthand to check the is3d flag.
-         * @private
-         * @return {boolean}
-         *         Whether it is a 3D chart.
-         */
-        Chart.prototype.is3d = function () {
-            return (this.options.chart.options3d &&
-                this.options.chart.options3d.enabled); // #4280
-        };
-        Chart.prototype.propsRequireDirtyBox.push('chart.options3d');
-        Chart.prototype.propsRequireUpdateSeries.push('chart.options3d');
-        /* eslint-disable no-invalid-this */
-        // Legacy support for HC < 6 to make 'scatter' series in a 3D chart route to the
-        // real 'scatter3d' series type.
-        addEvent(Chart, 'afterInit', function () {
-            var options = this.options;
-            if (this.is3d()) {
-                (options.series || []).forEach(function (s) {
-                    var type = s.type ||
-                            options.chart.type ||
-                            options.chart.defaultSeriesType;
-                    if (type === 'scatter') {
-                        s.type = 'scatter3d';
-                    }
-                });
-            }
-        });
-        // And do it on dynamic add (#8407)
-        addEvent(Chart, 'addSeries', function (e) {
-            if (this.is3d()) {
-                if (e.options.type === 'scatter') {
-                    e.options.type = 'scatter3d';
-                }
-            }
-        });
-        /**
-         * Calculate scale of the 3D view. That is required to
-         * fit chart's 3D projection into the actual plotting area. Reported as #4933.
-         * @notice This function should ideally take the plot values instead of a chart
-         *         object, but since the chart object is needed for perspective it is
-         *         not practical. Possible to make both getScale and perspective more
-         *         logical and also immutable.
-         *
-         * @private
-         * @function getScale
-         *
-         * @param {Highcharts.Chart} chart
-         * Chart object
-         *
-         * @param {number} depth
-         * The depth of the chart
-         *
-         * @return {number}
-         * The scale to fit the 3D chart into the plotting area.
-         *
-         * @requires highcharts-3d
-         */
-        function getScale(chart, depth) {
-            var plotLeft = chart.plotLeft,
-                plotRight = chart.plotWidth + plotLeft,
-                plotTop = chart.plotTop,
-                plotBottom = chart.plotHeight + plotTop,
-                originX = plotLeft + chart.plotWidth / 2,
-                originY = plotTop + chart.plotHeight / 2,
-                bbox3d = {
-                    minX: Number.MAX_VALUE,
-                    maxX: -Number.MAX_VALUE,
-                    minY: Number.MAX_VALUE,
-                    maxY: -Number.MAX_VALUE
-                },
-                corners,
-                scale = 1;
-            // Top left corners:
-            corners = [{
-                    x: plotLeft,
-                    y: plotTop,
-                    z: 0
-                }, {
-                    x: plotLeft,
-                    y: plotTop,
-                    z: depth
-                }];
-            // Top right corners:
-            [0, 1].forEach(function (i) {
-                corners.push({
-                    x: plotRight,
-                    y: corners[i].y,
-                    z: corners[i].z
-                });
-            });
-            // All bottom corners:
-            [0, 1, 2, 3].forEach(function (i) {
-                corners.push({
-                    x: corners[i].x,
-                    y: plotBottom,
-                    z: corners[i].z
-                });
-            });
-            // Calculate 3D corners:
-            corners = perspective(corners, chart, false);
-            // Get bounding box of 3D element:
-            corners.forEach(function (corner) {
-                bbox3d.minX = Math.min(bbox3d.minX, corner.x);
-                bbox3d.maxX = Math.max(bbox3d.maxX, corner.x);
-                bbox3d.minY = Math.min(bbox3d.minY, corner.y);
-                bbox3d.maxY = Math.max(bbox3d.maxY, corner.y);
-            });
-            // Left edge:
-            if (plotLeft > bbox3d.minX) {
-                scale = Math.min(scale, 1 - Math.abs((plotLeft + originX) / (bbox3d.minX + originX)) % 1);
-            }
-            // Right edge:
-            if (plotRight < bbox3d.maxX) {
-                scale = Math.min(scale, (plotRight - originX) / (bbox3d.maxX - originX));
-            }
-            // Top edge:
-            if (plotTop > bbox3d.minY) {
-                if (bbox3d.minY < 0) {
-                    scale = Math.min(scale, (plotTop + originY) / (-bbox3d.minY + plotTop + originY));
-                }
-                else {
-                    scale = Math.min(scale, 1 - (plotTop + originY) / (bbox3d.minY + originY) % 1);
+        var Chart3D;
+        (function (Chart3D) {
+            /* *
+             *
+             *  Interfaces
+             *
+             * */
+            /* *
+             *
+             *  Classes
+             *
+             * */
+            var Composition = /** @class */ (function () {
+                    /* *
+                     *
+                     *  Constructors
+                     *
+                     * */
+                    /**
+                     * @private
+                     */
+                    function Composition(chart) {
+                        this.frame3d = void 0;
+                    this.chart = chart;
                 }
-            }
-            // Bottom edge:
-            if (plotBottom < bbox3d.maxY) {
-                scale = Math.min(scale, Math.abs((plotBottom - originY) / (bbox3d.maxY - originY)));
-            }
-            return scale;
-        }
-        wrap(H.Chart.prototype, 'isInsidePlot', function (proceed) {
-            return this.is3d() || proceed.apply(this, [].slice.call(arguments, 1));
-        });
-        var defaultOptions = H.getOptions();
-        /**
-         * @optionparent
-         */
-        var extendedOptions = {
+                /* *
+                 *
+                 *  Functions
+                 *
+                 * */
+                Composition.prototype.get3dFrame = function () {
+                    var chart = this.chart,
+                        options3d = chart.options.chart.options3d,
+                        frameOptions = options3d.frame,
+                        xm = chart.plotLeft,
+                        xp = chart.plotLeft + chart.plotWidth,
+                        ym = chart.plotTop,
+                        yp = chart.plotTop + chart.plotHeight,
+                        zm = 0,
+                        zp = options3d.depth,
+                        faceOrientation = function (vertexes) {
+                            var area = shapeArea3D(vertexes,
+                        chart);
+                        // Give it 0.5 squared-pixel as a margin for rounding errors
+                        if (area > 0.5) {
+                            return 1;
+                        }
+                        if (area < -0.5) {
+                            return -1;
+                        }
+                        return 0;
+                    }, bottomOrientation = faceOrientation([
+                        { x: xm, y: yp, z: zp },
+                        { x: xp, y: yp, z: zp },
+                        { x: xp, y: yp, z: zm },
+                        { x: xm, y: yp, z: zm }
+                    ]), topOrientation = faceOrientation([
+                        { x: xm, y: ym, z: zm },
+                        { x: xp, y: ym, z: zm },
+                        { x: xp, y: ym, z: zp },
+                        { x: xm, y: ym, z: zp }
+                    ]), leftOrientation = faceOrientation([
+                        { x: xm, y: ym, z: zm },
+                        { x: xm, y: ym, z: zp },
+                        { x: xm, y: yp, z: zp },
+                        { x: xm, y: yp, z: zm }
+                    ]), rightOrientation = faceOrientation([
+                        { x: xp, y: ym, z: zp },
+                        { x: xp, y: ym, z: zm },
+                        { x: xp, y: yp, z: zm },
+                        { x: xp, y: yp, z: zp }
+                    ]), frontOrientation = faceOrientation([
+                        { x: xm, y: yp, z: zm },
+                        { x: xp, y: yp, z: zm },
+                        { x: xp, y: ym, z: zm },
+                        { x: xm, y: ym, z: zm }
+                    ]), backOrientation = faceOrientation([
+                        { x: xm, y: ym, z: zp },
+                        { x: xp, y: ym, z: zp },
+                        { x: xp, y: yp, z: zp },
+                        { x: xm, y: yp, z: zp }
+                    ]), defaultShowBottom = false, defaultShowTop = false, defaultShowLeft = false, defaultShowRight = false, defaultShowFront = false, defaultShowBack = true;
+                    // The 'default' criteria to visible faces of the frame is looking
+                    // up every axis to decide whenever the left/right//top/bottom sides
+                    // of the frame will be shown
+                    []
+                        .concat(chart.xAxis, chart.yAxis, chart.zAxis)
+                        .forEach(function (axis) {
+                        if (axis) {
+                            if (axis.horiz) {
+                                if (axis.opposite) {
+                                    defaultShowTop = true;
+                                }
+                                else {
+                                    defaultShowBottom = true;
+                                }
+                            }
+                            else {
+                                if (axis.opposite) {
+                                    defaultShowRight = true;
+                                }
+                                else {
+                                    defaultShowLeft = true;
+                                }
+                            }
+                        }
+                    });
+                    var getFaceOptions = function (sources, faceOrientation, defaultVisible) {
+                            var faceAttrs = ['size', 'color', 'visible'];
+                        var options = {};
+                        for (var i = 0; i < faceAttrs.length; i++) {
+                            var attr = faceAttrs[i];
+                            for (var j = 0; j < sources.length; j++) {
+                                if (typeof sources[j] === 'object') {
+                                    var val = sources[j][attr];
+                                    if (typeof val !== 'undefined' && val !== null) {
+                                        options[attr] = val;
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                        var isVisible = defaultVisible;
+                        if (options.visible === true || options.visible === false) {
+                            isVisible = options.visible;
+                        }
+                        else if (options.visible === 'auto') {
+                            isVisible = faceOrientation > 0;
+                        }
+                        return {
+                            size: pick(options.size, 1),
+                            color: pick(options.color, 'none'),
+                            frontFacing: faceOrientation > 0,
+                            visible: isVisible
+                        };
+                    };
+                    // docs @TODO: Add all frame options (left, right, top, bottom,
+                    // front, back) to apioptions JSDoc once the new system is up.
+                    var ret = {
+                            axes: {},
+                            // FIXME: Previously, left/right, top/bottom and front/back
+                            // pairs shared size and color.
+                            // For compatibility and consistency sake, when one face have
+                            // size/color/visibility set, the opposite face will default to
+                            // the same values. Also, left/right used to be called 'side',
+                            // so that's also added as a fallback.
+                            bottom: getFaceOptions([frameOptions.bottom,
+                        frameOptions.top,
+                        frameOptions],
+                        bottomOrientation,
+                        defaultShowBottom),
+                            top: getFaceOptions([frameOptions.top,
+                        frameOptions.bottom,
+                        frameOptions],
+                        topOrientation,
+                        defaultShowTop),
+                            left: getFaceOptions([
+                                frameOptions.left,
+                                frameOptions.right,
+                                frameOptions.side,
+                                frameOptions
+                            ],
+                        leftOrientation,
+                        defaultShowLeft),
+                            right: getFaceOptions([
+                                frameOptions.right,
+                                frameOptions.left,
+                                frameOptions.side,
+                                frameOptions
+                            ],
+                        rightOrientation,
+                        defaultShowRight),
+                            back: getFaceOptions([frameOptions.back,
+                        frameOptions.front,
+                        frameOptions],
+                        backOrientation,
+                        defaultShowBack),
+                            front: getFaceOptions([frameOptions.front,
+                        frameOptions.back,
+                        frameOptions],
+                        frontOrientation,
+                        defaultShowFront)
+                        };
+                    // Decide the bast place to put axis title/labels based on the
+                    // visible faces. Ideally, The labels can only be on the edge
+                    // between a visible face and an invisble one. Also, the Y label
+                    // should be one the left-most edge (right-most if opposite).
+                    if (options3d.axisLabelPosition === 'auto') {
+                        var isValidEdge = function (face1,
+                            face2) {
+                                return ((face1.visible !== face2.visible) ||
+                                    (face1.visible &&
+                                        face2.visible &&
+                                        (face1.frontFacing !== face2.frontFacing)));
+                        };
+                        var yEdges = [];
+                        if (isValidEdge(ret.left, ret.front)) {
+                            yEdges.push({
+                                y: (ym + yp) / 2,
+                                x: xm,
+                                z: zm,
+                                xDir: { x: 1, y: 0, z: 0 }
+                            });
+                        }
+                        if (isValidEdge(ret.left, ret.back)) {
+                            yEdges.push({
+                                y: (ym + yp) / 2,
+                                x: xm,
+                                z: zp,
+                                xDir: { x: 0, y: 0, z: -1 }
+                            });
+                        }
+                        if (isValidEdge(ret.right, ret.front)) {
+                            yEdges.push({
+                                y: (ym + yp) / 2,
+                                x: xp,
+                                z: zm,
+                                xDir: { x: 0, y: 0, z: 1 }
+                            });
+                        }
+                        if (isValidEdge(ret.right, ret.back)) {
+                            yEdges.push({
+                                y: (ym + yp) / 2,
+                                x: xp,
+                                z: zp,
+                                xDir: { x: -1, y: 0, z: 0 }
+                            });
+                        }
+                        var xBottomEdges = [];
+                        if (isValidEdge(ret.bottom, ret.front)) {
+                            xBottomEdges.push({
+                                x: (xm + xp) / 2,
+                                y: yp,
+                                z: zm,
+                                xDir: { x: 1, y: 0, z: 0 }
+                            });
+                        }
+                        if (isValidEdge(ret.bottom, ret.back)) {
+                            xBottomEdges.push({
+                                x: (xm + xp) / 2,
+                                y: yp,
+                                z: zp,
+                                xDir: { x: -1, y: 0, z: 0 }
+                            });
+                        }
+                        var xTopEdges = [];
+                        if (isValidEdge(ret.top, ret.front)) {
+                            xTopEdges.push({
+                                x: (xm + xp) / 2,
+                                y: ym,
+                                z: zm,
+                                xDir: { x: 1, y: 0, z: 0 }
+                            });
+                        }
+                        if (isValidEdge(ret.top, ret.back)) {
+                            xTopEdges.push({
+                                x: (xm + xp) / 2,
+                                y: ym,
+                                z: zp,
+                                xDir: { x: -1, y: 0, z: 0 }
+                            });
+                        }
+                        var zBottomEdges = [];
+                        if (isValidEdge(ret.bottom, ret.left)) {
+                            zBottomEdges.push({
+                                z: (zm + zp) / 2,
+                                y: yp,
+                                x: xm,
+                                xDir: { x: 0, y: 0, z: -1 }
+                            });
+                        }
+                        if (isValidEdge(ret.bottom, ret.right)) {
+                            zBottomEdges.push({
+                                z: (zm + zp) / 2,
+                                y: yp,
+                                x: xp,
+                                xDir: { x: 0, y: 0, z: 1 }
+                            });
+                        }
+                        var zTopEdges = [];
+                        if (isValidEdge(ret.top, ret.left)) {
+                            zTopEdges.push({
+                                z: (zm + zp) / 2,
+                                y: ym,
+                                x: xm,
+                                xDir: { x: 0, y: 0, z: -1 }
+                            });
+                        }
+                        if (isValidEdge(ret.top, ret.right)) {
+                            zTopEdges.push({
+                                z: (zm + zp) / 2,
+                                y: ym,
+                                x: xp,
+                                xDir: { x: 0, y: 0, z: 1 }
+                            });
+                        }
+                        var pickEdge = function (edges,
+                            axis,
+                            mult) {
+                                if (edges.length === 0) {
+                                    return null;
+                            }
+                            if (edges.length === 1) {
+                                return edges[0];
+                            }
+                            var best = 0,
+                                projections = perspective(edges,
+                                chart,
+                                false);
+                            for (var i = 1; i < projections.length; i++) {
+                                if (mult * projections[i][axis] >
+                                    mult * projections[best][axis]) {
+                                    best = i;
+                                }
+                                else if ((mult * projections[i][axis] ===
+                                    mult * projections[best][axis]) &&
+                                    (projections[i].z < projections[best].z)) {
+                                    best = i;
+                                }
+                            }
+                            return edges[best];
+                        };
+                        ret.axes = {
+                            y: {
+                                'left': pickEdge(yEdges, 'x', -1),
+                                'right': pickEdge(yEdges, 'x', +1)
+                            },
+                            x: {
+                                'top': pickEdge(xTopEdges, 'y', -1),
+                                'bottom': pickEdge(xBottomEdges, 'y', +1)
+                            },
+                            z: {
+                                'top': pickEdge(zTopEdges, 'y', -1),
+                                'bottom': pickEdge(zBottomEdges, 'y', +1)
+                            }
+                        };
+                    }
+                    else {
+                        ret.axes = {
+                            y: {
+                                'left': { x: xm, z: zm, xDir: { x: 1, y: 0, z: 0 } },
+                                'right': { x: xp, z: zm, xDir: { x: 0, y: 0, z: 1 } }
+                            },
+                            x: {
+                                'top': { y: ym, z: zm, xDir: { x: 1, y: 0, z: 0 } },
+                                'bottom': { y: yp, z: zm, xDir: { x: 1, y: 0, z: 0 } }
+                            },
+                            z: {
+                                'top': {
+                                    x: defaultShowLeft ? xp : xm,
+                                    y: ym,
+                                    xDir: defaultShowLeft ?
+                                        { x: 0, y: 0, z: 1 } :
+                                        { x: 0, y: 0, z: -1 }
+                                },
+                                'bottom': {
+                                    x: defaultShowLeft ? xp : xm,
+                                    y: yp,
+                                    xDir: defaultShowLeft ?
+                                        { x: 0, y: 0, z: 1 } :
+                                        { x: 0, y: 0, z: -1 }
+                                }
+                            }
+                        };
+                    }
+                    return ret;
+                };
+                /**
+                 * Calculate scale of the 3D view. That is required to fit chart's 3D
+                 * projection into the actual plotting area. Reported as #4933.
+                 *
+                 * @notice
+                 * This function should ideally take the plot values instead of a chart
+                 * object, but since the chart object is needed for perspective it is
+                 * not practical. Possible to make both getScale and perspective more
+                 * logical and also immutable.
+                 *
+                 * @private
+                 * @function getScale
+                 *
+                 * @param {number} depth
+                 * The depth of the chart
+                 *
+                 * @return {number}
+                 * The scale to fit the 3D chart into the plotting area.
+                 *
+                 * @requires highcharts-3d
+                 */
+                Composition.prototype.getScale = function (depth) {
+                    var chart = this.chart,
+                        plotLeft = chart.plotLeft,
+                        plotRight = chart.plotWidth + plotLeft,
+                        plotTop = chart.plotTop,
+                        plotBottom = chart.plotHeight + plotTop,
+                        originX = plotLeft + chart.plotWidth / 2,
+                        originY = plotTop + chart.plotHeight / 2,
+                        bbox3d = {
+                            minX: Number.MAX_VALUE,
+                            maxX: -Number.MAX_VALUE,
+                            minY: Number.MAX_VALUE,
+                            maxY: -Number.MAX_VALUE
+                        },
+                        corners,
+                        scale = 1;
+                    // Top left corners:
+                    corners = [{
+                            x: plotLeft,
+                            y: plotTop,
+                            z: 0
+                        }, {
+                            x: plotLeft,
+                            y: plotTop,
+                            z: depth
+                        }];
+                    // Top right corners:
+                    [0, 1].forEach(function (i) {
+                        corners.push({
+                            x: plotRight,
+                            y: corners[i].y,
+                            z: corners[i].z
+                        });
+                    });
+                    // All bottom corners:
+                    [0, 1, 2, 3].forEach(function (i) {
+                        corners.push({
+                            x: corners[i].x,
+                            y: plotBottom,
+                            z: corners[i].z
+                        });
+                    });
+                    // Calculate 3D corners:
+                    corners = perspective(corners, chart, false);
+                    // Get bounding box of 3D element:
+                    corners.forEach(function (corner) {
+                        bbox3d.minX = Math.min(bbox3d.minX, corner.x);
+                        bbox3d.maxX = Math.max(bbox3d.maxX, corner.x);
+                        bbox3d.minY = Math.min(bbox3d.minY, corner.y);
+                        bbox3d.maxY = Math.max(bbox3d.maxY, corner.y);
+                    });
+                    // Left edge:
+                    if (plotLeft > bbox3d.minX) {
+                        scale = Math.min(scale, 1 - Math.abs((plotLeft + originX) / (bbox3d.minX + originX)) % 1);
+                    }
+                    // Right edge:
+                    if (plotRight < bbox3d.maxX) {
+                        scale = Math.min(scale, (plotRight - originX) / (bbox3d.maxX - originX));
+                    }
+                    // Top edge:
+                    if (plotTop > bbox3d.minY) {
+                        if (bbox3d.minY < 0) {
+                            scale = Math.min(scale, (plotTop + originY) / (-bbox3d.minY + plotTop + originY));
+                        }
+                        else {
+                            scale = Math.min(scale, 1 - (plotTop + originY) / (bbox3d.minY + originY) % 1);
+                        }
+                    }
+                    // Bottom edge:
+                    if (plotBottom < bbox3d.maxY) {
+                        scale = Math.min(scale, Math.abs((plotBottom - originY) / (bbox3d.maxY - originY)));
+                    }
+                    return scale;
+                };
+                return Composition;
+            }());
+            Chart3D.Composition = Composition;
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            /**
+             * @optionparent
+             * @private
+             */
+            Chart3D.defaultOptions = {
                 chart: {
                     /**
                      * Options to render charts in 3 dimensions. This feature requires
-                     * `highcharts-3d.js`,
-            found in the download package or online at
+                     * `highcharts-3d.js`, found in the download package or online at
                      * [code.highcharts.com/highcharts-3d.js](https://code.highcharts.com/highcharts-3d.js).
                      *
                      * @since    4.0
@@ -2364,8 +2723,8 @@
                          */
                         depth: 100,
                         /**
-                         * Whether the 3d box should automatically adjust to the chart plot
-                         * area.
+                         * Whether the 3d box should automatically adjust to the chart
+                         * plot area.
                          *
                          * @since   4.2.4
                          * @product highcharts
@@ -2373,18 +2732,17 @@
                         fitToPlot: true,
                         /**
                          * Defines the distance the viewer is standing in front of the
-                         * chart,
-            this setting is important to calculate the perspective
-                         * effect in column and scatter charts. It is not used for 3D pie
-                         * charts.
+                         * chart, this setting is important to calculate the perspective
+                         * effect in column and scatter charts. It is not used for 3D
+                         * pie charts.
                          *
                          * @since   4.0
                          * @product highcharts
                          */
                         viewDistance: 25,
                         /**
-                         * Set it to `"auto"` to automatically move the labels to the best
-                         * edge.
+                         * Set it to `"auto"` to automatically move the labels to the
+                         * best edge.
                          *
                          * @type    {"auto"|null}
                          * @since   5.0.12
@@ -2392,9 +2750,8 @@
                          */
                         axisLabelPosition: null,
                         /**
-                         * Provides the option to draw a frame around the charts by defining
-                         * a bottom,
-            front and back panel.
+                         * Provides the option to draw a frame around the charts by
+                         * defining a bottom, front and back panel.
                          *
                          * @since    4.0
                          * @product  highcharts
@@ -2436,11 +2793,9 @@
                              */
                             /**
                              * Whether to display the frame. Possible values are `true`,
-                             * `false`,
-            `"auto"` to display only the frames behind the data,
-                             * and `"default"` to display faces behind the data based on the
-                             * axis layout,
-            ignoring the point of view.
+                             * `false`, `"auto"` to display only the frames behind the
+                             * data, and `"default"` to display faces behind the data
+                             * based on the axis layout, ignoring the point of view.
                              *
                              * @sample {highcharts} highcharts/3d/scatter-frame/
                              *         Auto frames
@@ -2489,1274 +2844,1048 @@
                     }
                 }
             };
-        merge(true, defaultOptions, extendedOptions);
-        // Add the required CSS classes for column sides (#6018)
-        addEvent(Chart, 'afterGetContainer', function () {
-            if (this.styledMode) {
-                this.renderer.definition({
-                    tagName: 'style',
-                    textContent: '.highcharts-3d-top{' +
-                        'filter: url(#highcharts-brighter)' +
-                        '}\n' +
-                        '.highcharts-3d-side{' +
-                        'filter: url(#highcharts-darker)' +
-                        '}\n'
-                });
-                // Add add definitions used by brighter and darker faces of the cuboids.
-                [{
-                        name: 'darker',
-                        slope: 0.6
-                    }, {
-                        name: 'brighter',
-                        slope: 1.4
-                    }].forEach(function (cfg) {
-                    this.renderer.definition({
-                        tagName: 'filter',
-                        id: 'highcharts-' + cfg.name,
-                        children: [{
-                                tagName: 'feComponentTransfer',
-                                children: [{
-                                        tagName: 'feFuncR',
-                                        type: 'linear',
-                                        slope: cfg.slope
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * @private
+             */
+            function compose(ChartClass, FxClass) {
+                var chartProto = ChartClass.prototype;
+                var fxProto = FxClass.prototype;
+                /**
+                 * Shorthand to check the is3d flag.
+                 * @private
+                 * @return {boolean}
+                 * Whether it is a 3D chart.
+                 */
+                chartProto.is3d = function () {
+                    return (this.options.chart.options3d &&
+                        this.options.chart.options3d.enabled); // #4280
+                };
+                chartProto.propsRequireDirtyBox.push('chart.options3d');
+                chartProto.propsRequireUpdateSeries.push('chart.options3d');
+                /**
+                 * Animation setter for matrix property.
+                 * @private
+                 */
+                fxProto.matrixSetter = function () {
+                    var interpolated;
+                    if (this.pos < 1 &&
+                        (isArray(this.start) || isArray(this.end))) {
+                        var start = this.start || [1, 0, 0, 1, 0, 0];
+                        var end = this.end || [1, 0, 0, 1, 0, 0];
+                        interpolated = [];
+                        for (var i = 0; i < 6; i++) {
+                            interpolated.push(this.pos * end[i] + (1 - this.pos) * start[i]);
+                        }
+                    }
+                    else {
+                        interpolated = this.end;
+                    }
+                    this.elem.attr(this.prop, interpolated, null, true);
+                };
+                merge(true, genericDefaultOptions, Chart3D.defaultOptions);
+                addEvent(ChartClass, 'init', onInit);
+                addEvent(ChartClass, 'addSeries', onAddSeries);
+                addEvent(ChartClass, 'afterDrawChartBox', onAfterDrawChartBox);
+                addEvent(ChartClass, 'afterGetContainer', onAfterGetContainer);
+                addEvent(ChartClass, 'afterInit', onAfterInit);
+                addEvent(ChartClass, 'afterSetChartSize', onAfterSetChartSize);
+                addEvent(ChartClass, 'beforeRedraw', onBeforeRedraw);
+                addEvent(ChartClass, 'beforeRender', onBeforeRender);
+                wrap(H.Chart.prototype, 'isInsidePlot', wrapIsInsidePlot);
+                wrap(ChartClass, 'renderSeries', wrapRenderSeries);
+                wrap(ChartClass, 'setClassName', wrapSetClassName);
+            }
+            Chart3D.compose = compose;
+            /**
+             * Legacy support for HC < 6 to make 'scatter' series in a 3D chart route to
+             * the real 'scatter3d' series type. (#8407)
+             * @private
+             */
+            function onAddSeries(e) {
+                if (this.is3d()) {
+                    if (e.options.type === 'scatter') {
+                        e.options.type = 'scatter3d';
+                    }
+                }
+            }
+            /**
+             * @private
+             */
+            function onAfterDrawChartBox() {
+                if (this.chart3d &&
+                    this.is3d()) {
+                    var chart = this,
+                        renderer = chart.renderer,
+                        options3d = this.options.chart.options3d,
+                        frame = this.chart3d.get3dFrame(),
+                        xm = this.plotLeft,
+                        xp = this.plotLeft + this.plotWidth,
+                        ym = this.plotTop,
+                        yp = this.plotTop + this.plotHeight,
+                        zm = 0,
+                        zp = options3d.depth,
+                        xmm = xm - (frame.left.visible ? frame.left.size : 0),
+                        xpp = xp + (frame.right.visible ? frame.right.size : 0),
+                        ymm = ym - (frame.top.visible ? frame.top.size : 0),
+                        ypp = yp + (frame.bottom.visible ? frame.bottom.size : 0),
+                        zmm = zm - (frame.front.visible ? frame.front.size : 0),
+                        zpp = zp + (frame.back.visible ? frame.back.size : 0),
+                        verb = chart.hasRendered ? 'animate' : 'attr';
+                    this.chart3d.frame3d = frame;
+                    if (!this.frameShapes) {
+                        this.frameShapes = {
+                            bottom: renderer.polyhedron().add(),
+                            top: renderer.polyhedron().add(),
+                            left: renderer.polyhedron().add(),
+                            right: renderer.polyhedron().add(),
+                            back: renderer.polyhedron().add(),
+                            front: renderer.polyhedron().add()
+                        };
+                    }
+                    this.frameShapes.bottom[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-bottom',
+                        zIndex: frame.bottom.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.bottom.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }],
+                                enabled: frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.bottom.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.bottom.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.bottom.visible && !frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.bottom.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.bottom.visible && !frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.bottom.color).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
                                     }, {
-                                        tagName: 'feFuncG',
-                                        type: 'linear',
-                                        slope: cfg.slope
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
                                     }, {
-                                        tagName: 'feFuncB',
-                                        type: 'linear',
-                                        slope: cfg.slope
-                                    }]
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.bottom.visible && !frame.front.visible
+                            },
+                            {
+                                fill: H.color(frame.bottom.color).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.bottom.visible && !frame.back.visible
                             }]
                     });
-                }, this);
-            }
-        });
-        wrap(Chart.prototype, 'setClassName', function (proceed) {
-            proceed.apply(this, [].slice.call(arguments, 1));
-            if (this.is3d()) {
-                this.container.className += ' highcharts-3d-chart';
-            }
-        });
-        addEvent(H.Chart, 'afterSetChartSize', function () {
-            var chart = this,
-                options3d = chart.options.chart.options3d;
-            if (chart.is3d()) {
-                // Add a 0-360 normalisation for alfa and beta angles in 3d graph
-                if (options3d) {
-                    options3d.alpha = options3d.alpha % 360 + (options3d.alpha >= 0 ? 0 : 360);
-                    options3d.beta = options3d.beta % 360 + (options3d.beta >= 0 ? 0 : 360);
-                }
-                var inverted = chart.inverted, clipBox = chart.clipBox, margin = chart.margin, x = inverted ? 'y' : 'x', y = inverted ? 'x' : 'y', w = inverted ? 'height' : 'width', h = inverted ? 'width' : 'height';
-                clipBox[x] = -(margin[3] || 0);
-                clipBox[y] = -(margin[0] || 0);
-                clipBox[w] =
-                    chart.chartWidth + (margin[3] || 0) + (margin[1] || 0);
-                clipBox[h] =
-                    chart.chartHeight + (margin[0] || 0) + (margin[2] || 0);
-                // Set scale, used later in perspective method():
-                // getScale uses perspective, so scale3d has to be reset.
-                chart.scale3d = 1;
-                if (options3d.fitToPlot === true) {
-                    chart.scale3d = getScale(chart, options3d.depth);
-                }
-                // Recalculate the 3d frame with every call of setChartSize,
-                // instead of doing it after every redraw(). It avoids ticks
-                // and axis title outside of chart.
-                chart.frame3d = this.get3dFrame(); // #7942
-            }
-        });
-        addEvent(Chart, 'beforeRedraw', function () {
-            if (this.is3d()) {
-                // Set to force a redraw of all elements
-                this.isDirtyBox = true;
-            }
-        });
-        addEvent(Chart, 'beforeRender', function () {
-            if (this.is3d()) {
-                this.frame3d = this.get3dFrame();
-            }
-        });
-        // Draw the series in the reverse order (#3803, #3917)
-        wrap(Chart.prototype, 'renderSeries', function (proceed) {
-            var series,
-                i = this.series.length;
-            if (this.is3d()) {
-                while (i--) {
-                    series = this.series[i];
-                    series.translate();
-                    series.render();
-                }
-            }
-            else {
-                proceed.call(this);
-            }
-        });
-        addEvent(Chart, 'afterDrawChartBox', function () {
-            if (this.is3d()) {
-                var chart = this,
-                    renderer = chart.renderer,
-                    options3d = this.options.chart.options3d,
-                    frame = chart.get3dFrame(),
-                    xm = this.plotLeft,
-                    xp = this.plotLeft + this.plotWidth,
-                    ym = this.plotTop,
-                    yp = this.plotTop + this.plotHeight,
-                    zm = 0,
-                    zp = options3d.depth,
-                    xmm = xm - (frame.left.visible ? frame.left.size : 0),
-                    xpp = xp + (frame.right.visible ? frame.right.size : 0),
-                    ymm = ym - (frame.top.visible ? frame.top.size : 0),
-                    ypp = yp + (frame.bottom.visible ? frame.bottom.size : 0),
-                    zmm = zm - (frame.front.visible ? frame.front.size : 0),
-                    zpp = zp + (frame.back.visible ? frame.back.size : 0),
-                    verb = chart.hasRendered ? 'animate' : 'attr';
-                this.frame3d = frame;
-                if (!this.frameShapes) {
-                    this.frameShapes = {
-                        bottom: renderer.polyhedron().add(),
-                        top: renderer.polyhedron().add(),
-                        left: renderer.polyhedron().add(),
-                        right: renderer.polyhedron().add(),
-                        back: renderer.polyhedron().add(),
-                        front: renderer.polyhedron().add()
-                    };
-                }
-                this.frameShapes.bottom[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-bottom',
-                    zIndex: frame.bottom.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.bottom.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }],
-                            enabled: frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.bottom.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.bottom.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.bottom.visible && !frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.bottom.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.bottom.visible && !frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.bottom.color).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.bottom.visible && !frame.front.visible
-                        },
-                        {
-                            fill: H.color(frame.bottom.color).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.bottom.visible && !frame.back.visible
-                        }]
-                });
-                this.frameShapes.top[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-top',
-                    zIndex: frame.top.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.top.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }],
-                            enabled: frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.top.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.top.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.top.visible && !frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.top.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.top.visible && !frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.top.color).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.top.visible && !frame.front.visible
-                        },
-                        {
-                            fill: H.color(frame.top.color).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.top.visible && !frame.back.visible
-                        }]
-                });
-                this.frameShapes.left[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-left',
-                    zIndex: frame.left.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.left.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }],
-                            enabled: frame.left.visible && !frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.left.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }],
-                            enabled: frame.left.visible && !frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.left.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }],
-                            enabled: frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.left.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.left.color).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.left.visible && !frame.front.visible
-                        },
-                        {
-                            fill: H.color(frame.left.color).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.left.visible && !frame.back.visible
-                        }]
-                });
-                this.frameShapes.right[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-right',
-                    zIndex: frame.right.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.right.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }],
-                            enabled: frame.right.visible && !frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.right.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }],
-                            enabled: frame.right.visible && !frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.right.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.right.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }],
-                            enabled: frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.right.color).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.right.visible && !frame.front.visible
-                        },
-                        {
-                            fill: H.color(frame.right.color).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.right.visible && !frame.back.visible
-                        }]
-                });
-                this.frameShapes.back[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-back',
-                    zIndex: frame.back.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.back.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.back.visible && !frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.back.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.back.visible && !frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.back.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.back.visible && !frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.back.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }],
-                            enabled: frame.back.visible && !frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.back.color).get(),
-                            vertexes: [{
-                                    x: xm,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zp
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zp
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zp
-                                }],
-                            enabled: frame.back.visible
-                        },
-                        {
-                            fill: H.color(frame.back.color).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zpp
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zpp
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zpp
-                                }],
-                            enabled: frame.back.visible
-                        }]
-                });
-                this.frameShapes.front[verb]({
-                    'class': 'highcharts-3d-frame highcharts-3d-frame-front',
-                    zIndex: frame.front.frontFacing ? -1000 : 1000,
-                    faces: [{
-                            fill: H.color(frame.front.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.front.visible && !frame.bottom.visible
-                        },
-                        {
-                            fill: H.color(frame.front.color).brighten(0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.front.visible && !frame.top.visible
-                        },
-                        {
-                            fill: H.color(frame.front.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }],
-                            enabled: frame.front.visible && !frame.left.visible
-                        },
-                        {
-                            fill: H.color(frame.front.color).brighten(-0.1).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.front.visible && !frame.right.visible
-                        },
-                        {
-                            fill: H.color(frame.front.color).get(),
-                            vertexes: [{
-                                    x: xp,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: ym,
-                                    z: zm
-                                }, {
-                                    x: xm,
-                                    y: yp,
-                                    z: zm
-                                }, {
-                                    x: xp,
-                                    y: yp,
-                                    z: zm
-                                }],
-                            enabled: frame.front.visible
-                        },
-                        {
-                            fill: H.color(frame.front.color).get(),
-                            vertexes: [{
-                                    x: xpp,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ypp,
-                                    z: zmm
-                                }, {
-                                    x: xmm,
-                                    y: ymm,
-                                    z: zmm
-                                }, {
-                                    x: xpp,
-                                    y: ymm,
-                                    z: zmm
-                                }],
-                            enabled: frame.front.visible
-                        }]
-                });
-            }
-        });
-        Chart.prototype.retrieveStacks = function (stacking) {
-            var series = this.series,
-                stacks = {},
-                stackNumber,
-                i = 1;
-            this.series.forEach(function (s) {
-                stackNumber = pick(s.options.stack, (stacking ? 0 : series.length - 1 - s.index)); // #3841, #4532
-                if (!stacks[stackNumber]) {
-                    stacks[stackNumber] = { series: [s], position: i };
-                    i++;
-                }
-                else {
-                    stacks[stackNumber].series.push(s);
-                }
-            });
-            stacks.totalStacks = i + 1;
-            return stacks;
-        };
-        Chart.prototype.get3dFrame = function () {
-            var chart = this,
-                options3d = chart.options.chart.options3d,
-                frameOptions = options3d.frame,
-                xm = chart.plotLeft,
-                xp = chart.plotLeft + chart.plotWidth,
-                ym = chart.plotTop,
-                yp = chart.plotTop + chart.plotHeight,
-                zm = 0,
-                zp = options3d.depth,
-                faceOrientation = function (vertexes) {
-                    var area = H.shapeArea3d(vertexes,
-                chart);
-                // Give it 0.5 squared-pixel as a margin for rounding errors.
-                if (area > 0.5) {
-                    return 1;
-                }
-                if (area < -0.5) {
-                    return -1;
-                }
-                return 0;
-            }, bottomOrientation = faceOrientation([
-                { x: xm, y: yp, z: zp },
-                { x: xp, y: yp, z: zp },
-                { x: xp, y: yp, z: zm },
-                { x: xm, y: yp, z: zm }
-            ]), topOrientation = faceOrientation([
-                { x: xm, y: ym, z: zm },
-                { x: xp, y: ym, z: zm },
-                { x: xp, y: ym, z: zp },
-                { x: xm, y: ym, z: zp }
-            ]), leftOrientation = faceOrientation([
-                { x: xm, y: ym, z: zm },
-                { x: xm, y: ym, z: zp },
-                { x: xm, y: yp, z: zp },
-                { x: xm, y: yp, z: zm }
-            ]), rightOrientation = faceOrientation([
-                { x: xp, y: ym, z: zp },
-                { x: xp, y: ym, z: zm },
-                { x: xp, y: yp, z: zm },
-                { x: xp, y: yp, z: zp }
-            ]), frontOrientation = faceOrientation([
-                { x: xm, y: yp, z: zm },
-                { x: xp, y: yp, z: zm },
-                { x: xp, y: ym, z: zm },
-                { x: xm, y: ym, z: zm }
-            ]), backOrientation = faceOrientation([
-                { x: xm, y: ym, z: zp },
-                { x: xp, y: ym, z: zp },
-                { x: xp, y: yp, z: zp },
-                { x: xm, y: yp, z: zp }
-            ]), defaultShowBottom = false, defaultShowTop = false, defaultShowLeft = false, defaultShowRight = false, defaultShowFront = false, defaultShowBack = true;
-            // The 'default' criteria to visible faces of the frame is looking up every
-            // axis to decide whenever the left/right//top/bottom sides of the frame
-            // will be shown
-            []
-                .concat(chart.xAxis, chart.yAxis, chart.zAxis)
-                .forEach(function (axis) {
-                if (axis) {
-                    if (axis.horiz) {
-                        if (axis.opposite) {
-                            defaultShowTop = true;
-                        }
-                        else {
-                            defaultShowBottom = true;
-                        }
-                    }
-                    else {
-                        if (axis.opposite) {
-                            defaultShowRight = true;
-                        }
-                        else {
-                            defaultShowLeft = true;
-                        }
-                    }
-                }
-            });
-            var getFaceOptions = function (sources, faceOrientation, defaultVisible) {
-                    var faceAttrs = ['size', 'color', 'visible'];
-                var options = {};
-                for (var i = 0; i < faceAttrs.length; i++) {
-                    var attr = faceAttrs[i];
-                    for (var j = 0; j < sources.length; j++) {
-                        if (typeof sources[j] === 'object') {
-                            var val = sources[j][attr];
-                            if (typeof val !== 'undefined' && val !== null) {
-                                options[attr] = val;
-                                break;
-                            }
-                        }
-                    }
-                }
-                var isVisible = defaultVisible;
-                if (options.visible === true || options.visible === false) {
-                    isVisible = options.visible;
-                }
-                else if (options.visible === 'auto') {
-                    isVisible = faceOrientation > 0;
-                }
-                return {
-                    size: pick(options.size, 1),
-                    color: pick(options.color, 'none'),
-                    frontFacing: faceOrientation > 0,
-                    visible: isVisible
-                };
-            };
-            // docs @TODO: Add all frame options (left, right, top, bottom, front, back)
-            // to apioptions JSDoc once the new system is up.
-            var ret = {
-                    axes: {},
-                    // FIXME: Previously, left/right, top/bottom and front/back pairs shared
-                    // size and color.
-                    // For compatibility and consistency sake, when one face have
-                    // size/color/visibility set, the opposite face will default to the same
-                    // values. Also, left/right used to be called 'side', so that's also
-                    // added as a fallback
-                    bottom: getFaceOptions([frameOptions.bottom, frameOptions.top, frameOptions], bottomOrientation, defaultShowBottom),
-                    top: getFaceOptions([frameOptions.top, frameOptions.bottom, frameOptions], topOrientation, defaultShowTop),
-                    left: getFaceOptions([
-                        frameOptions.left,
-                        frameOptions.right,
-                        frameOptions.side,
-                        frameOptions
-                    ], leftOrientation, defaultShowLeft),
-                    right: getFaceOptions([
-                        frameOptions.right,
-                        frameOptions.left,
-                        frameOptions.side,
-                        frameOptions
-                    ], rightOrientation, defaultShowRight),
-                    back: getFaceOptions([frameOptions.back, frameOptions.front, frameOptions], backOrientation, defaultShowBack),
-                    front: getFaceOptions([frameOptions.front, frameOptions.back, frameOptions], frontOrientation, defaultShowFront)
-                };
-            // Decide the bast place to put axis title/labels based on the visible
-            // faces. Ideally, The labels can only be on the edge between a visible face
-            // and an invisble one. Also, the Y label should be one the left-most edge
-            // (right-most if opposite),
-            if (options3d.axisLabelPosition === 'auto') {
-                var isValidEdge = function (face1,
-                    face2) {
-                        return ((face1.visible !== face2.visible) ||
-                            (face1.visible &&
-                                face2.visible &&
-                                (face1.frontFacing !== face2.frontFacing)));
-                };
-                var yEdges = [];
-                if (isValidEdge(ret.left, ret.front)) {
-                    yEdges.push({
-                        y: (ym + yp) / 2,
-                        x: xm,
-                        z: zm,
-                        xDir: { x: 1, y: 0, z: 0 }
-                    });
-                }
-                if (isValidEdge(ret.left, ret.back)) {
-                    yEdges.push({
-                        y: (ym + yp) / 2,
-                        x: xm,
-                        z: zp,
-                        xDir: { x: 0, y: 0, z: -1 }
+                    this.frameShapes.top[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-top',
+                        zIndex: frame.top.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.top.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }],
+                                enabled: frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.top.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.top.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.top.visible && !frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.top.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.top.visible && !frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.top.color).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.top.visible && !frame.front.visible
+                            },
+                            {
+                                fill: H.color(frame.top.color).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.top.visible && !frame.back.visible
+                            }]
                     });
-                }
-                if (isValidEdge(ret.right, ret.front)) {
-                    yEdges.push({
-                        y: (ym + yp) / 2,
-                        x: xp,
-                        z: zm,
-                        xDir: { x: 0, y: 0, z: 1 }
+                    this.frameShapes.left[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-left',
+                        zIndex: frame.left.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.left.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }],
+                                enabled: frame.left.visible && !frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.left.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }],
+                                enabled: frame.left.visible && !frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.left.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }],
+                                enabled: frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.left.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.left.color).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.left.visible && !frame.front.visible
+                            },
+                            {
+                                fill: H.color(frame.left.color).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.left.visible && !frame.back.visible
+                            }]
                     });
-                }
-                if (isValidEdge(ret.right, ret.back)) {
-                    yEdges.push({
-                        y: (ym + yp) / 2,
-                        x: xp,
-                        z: zp,
-                        xDir: { x: -1, y: 0, z: 0 }
+                    this.frameShapes.right[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-right',
+                        zIndex: frame.right.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.right.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }],
+                                enabled: frame.right.visible && !frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.right.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }],
+                                enabled: frame.right.visible && !frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.right.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.right.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }],
+                                enabled: frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.right.color).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.right.visible && !frame.front.visible
+                            },
+                            {
+                                fill: H.color(frame.right.color).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.right.visible && !frame.back.visible
+                            }]
                     });
-                }
-                var xBottomEdges = [];
-                if (isValidEdge(ret.bottom, ret.front)) {
-                    xBottomEdges.push({
-                        x: (xm + xp) / 2,
-                        y: yp,
-                        z: zm,
-                        xDir: { x: 1, y: 0, z: 0 }
+                    this.frameShapes.back[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-back',
+                        zIndex: frame.back.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.back.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.back.visible && !frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.back.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.back.visible && !frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.back.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.back.visible && !frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.back.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }],
+                                enabled: frame.back.visible && !frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.back.color).get(),
+                                vertexes: [{
+                                        x: xm,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zp
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zp
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zp
+                                    }],
+                                enabled: frame.back.visible
+                            },
+                            {
+                                fill: H.color(frame.back.color).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zpp
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zpp
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zpp
+                                    }],
+                                enabled: frame.back.visible
+                            }]
                     });
-                }
-                if (isValidEdge(ret.bottom, ret.back)) {
-                    xBottomEdges.push({
-                        x: (xm + xp) / 2,
-                        y: yp,
-                        z: zp,
-                        xDir: { x: -1, y: 0, z: 0 }
+                    this.frameShapes.front[verb]({
+                        'class': 'highcharts-3d-frame highcharts-3d-frame-front',
+                        zIndex: frame.front.frontFacing ? -1000 : 1000,
+                        faces: [{
+                                fill: H.color(frame.front.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.front.visible && !frame.bottom.visible
+                            },
+                            {
+                                fill: H.color(frame.front.color).brighten(0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.front.visible && !frame.top.visible
+                            },
+                            {
+                                fill: H.color(frame.front.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }],
+                                enabled: frame.front.visible && !frame.left.visible
+                            },
+                            {
+                                fill: H.color(frame.front.color).brighten(-0.1).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.front.visible && !frame.right.visible
+                            },
+                            {
+                                fill: H.color(frame.front.color).get(),
+                                vertexes: [{
+                                        x: xp,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: ym,
+                                        z: zm
+                                    }, {
+                                        x: xm,
+                                        y: yp,
+                                        z: zm
+                                    }, {
+                                        x: xp,
+                                        y: yp,
+                                        z: zm
+                                    }],
+                                enabled: frame.front.visible
+                            },
+                            {
+                                fill: H.color(frame.front.color).get(),
+                                vertexes: [{
+                                        x: xpp,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ypp,
+                                        z: zmm
+                                    }, {
+                                        x: xmm,
+                                        y: ymm,
+                                        z: zmm
+                                    }, {
+                                        x: xpp,
+                                        y: ymm,
+                                        z: zmm
+                                    }],
+                                enabled: frame.front.visible
+                            }]
                     });
                 }
-                var xTopEdges = [];
-                if (isValidEdge(ret.top, ret.front)) {
-                    xTopEdges.push({
-                        x: (xm + xp) / 2,
-                        y: ym,
-                        z: zm,
-                        xDir: { x: 1, y: 0, z: 0 }
+            }
+            /**
+             * Add the required CSS classes for column sides (#6018)
+             * @private
+             */
+            function onAfterGetContainer() {
+                if (this.styledMode) {
+                    this.renderer.definition({
+                        tagName: 'style',
+                        textContent: '.highcharts-3d-top{' +
+                            'filter: url(#highcharts-brighter)' +
+                            '}\n' +
+                            '.highcharts-3d-side{' +
+                            'filter: url(#highcharts-darker)' +
+                            '}\n'
                     });
+                    // Add add definitions used by brighter and darker faces of the
+                    // cuboids.
+                    [{
+                            name: 'darker',
+                            slope: 0.6
+                        }, {
+                            name: 'brighter',
+                            slope: 1.4
+                        }].forEach(function (cfg) {
+                        this.renderer.definition({
+                            tagName: 'filter',
+                            id: 'highcharts-' + cfg.name,
+                            children: [{
+                                    tagName: 'feComponentTransfer',
+                                    children: [{
+                                            tagName: 'feFuncR',
+                                            type: 'linear',
+                                            slope: cfg.slope
+                                        }, {
+                                            tagName: 'feFuncG',
+                                            type: 'linear',
+                                            slope: cfg.slope
+                                        }, {
+                                            tagName: 'feFuncB',
+                                            type: 'linear',
+                                            slope: cfg.slope
+                                        }]
+                                }]
+                        });
+                    }, this);
                 }
-                if (isValidEdge(ret.top, ret.back)) {
-                    xTopEdges.push({
-                        x: (xm + xp) / 2,
-                        y: ym,
-                        z: zp,
-                        xDir: { x: -1, y: 0, z: 0 }
+            }
+            /**
+             * Legacy support for HC < 6 to make 'scatter' series in a 3D chart route to
+             * the real 'scatter3d' series type. (#8407)
+             * @private
+             */
+            function onAfterInit() {
+                var options = this.options;
+                if (this.is3d()) {
+                    (options.series || []).forEach(function (s) {
+                        var type = s.type ||
+                                options.chart.type ||
+                                options.chart.defaultSeriesType;
+                        if (type === 'scatter') {
+                            s.type = 'scatter3d';
+                        }
                     });
                 }
-                var zBottomEdges = [];
-                if (isValidEdge(ret.bottom, ret.left)) {
-                    zBottomEdges.push({
-                        z: (zm + zp) / 2,
-                        y: yp,
-                        x: xm,
-                        xDir: { x: 0, y: 0, z: -1 }
-                    });
+            }
+            /**
+             * @private
+             */
+            function onAfterSetChartSize() {
+                var chart = this,
+                    options3d = chart.options.chart.options3d;
+                if (chart.chart3d &&
+                    chart.is3d()) {
+                    // Add a 0-360 normalisation for alfa and beta angles in 3d graph
+                    if (options3d) {
+                        options3d.alpha = options3d.alpha % 360 + (options3d.alpha >= 0 ? 0 : 360);
+                        options3d.beta = options3d.beta % 360 + (options3d.beta >= 0 ? 0 : 360);
+                    }
+                    var inverted = chart.inverted, clipBox = chart.clipBox, margin = chart.margin, x = inverted ? 'y' : 'x', y = inverted ? 'x' : 'y', w = inverted ? 'height' : 'width', h = inverted ? 'width' : 'height';
+                    clipBox[x] = -(margin[3] || 0);
+                    clipBox[y] = -(margin[0] || 0);
+                    clipBox[w] =
+                        chart.chartWidth + (margin[3] || 0) + (margin[1] || 0);
+                    clipBox[h] =
+                        chart.chartHeight + (margin[0] || 0) + (margin[2] || 0);
+                    // Set scale, used later in perspective method():
+                    // getScale uses perspective, so scale3d has to be reset.
+                    chart.scale3d = 1;
+                    if (options3d.fitToPlot === true) {
+                        chart.scale3d = chart.chart3d.getScale(options3d.depth);
+                    }
+                    // Recalculate the 3d frame with every call of setChartSize,
+                    // instead of doing it after every redraw(). It avoids ticks
+                    // and axis title outside of chart.
+                    chart.chart3d.frame3d = chart.chart3d.get3dFrame(); // #7942
                 }
-                if (isValidEdge(ret.bottom, ret.right)) {
-                    zBottomEdges.push({
-                        z: (zm + zp) / 2,
-                        y: yp,
-                        x: xp,
-                        xDir: { x: 0, y: 0, z: 1 }
-                    });
+            }
+            /**
+             * @private
+             */
+            function onBeforeRedraw() {
+                if (this.is3d()) {
+                    // Set to force a redraw of all elements
+                    this.isDirtyBox = true;
                 }
-                var zTopEdges = [];
-                if (isValidEdge(ret.top, ret.left)) {
-                    zTopEdges.push({
-                        z: (zm + zp) / 2,
-                        y: ym,
-                        x: xm,
-                        xDir: { x: 0, y: 0, z: -1 }
-                    });
+            }
+            /**
+             * @private
+             */
+            function onBeforeRender() {
+                if (this.chart3d && this.is3d()) {
+                    this.chart3d.frame3d = this.chart3d.get3dFrame();
                 }
-                if (isValidEdge(ret.top, ret.right)) {
-                    zTopEdges.push({
-                        z: (zm + zp) / 2,
-                        y: ym,
-                        x: xp,
-                        xDir: { x: 0, y: 0, z: 1 }
-                    });
+            }
+            /**
+             * @private
+             */
+            function onInit() {
+                if (!this.chart3d) {
+                    this.chart3d = new Composition(this);
                 }
-                var pickEdge = function (edges,
-                    axis,
-                    mult) {
-                        if (edges.length === 0) {
-                            return null;
-                    }
-                    if (edges.length === 1) {
-                        return edges[0];
-                    }
-                    var best = 0,
-                        projections = perspective(edges,
-                        chart,
-                        false);
-                    for (var i = 1; i < projections.length; i++) {
-                        if (mult * projections[i][axis] >
-                            mult * projections[best][axis]) {
-                            best = i;
-                        }
-                        else if ((mult * projections[i][axis] ===
-                            mult * projections[best][axis]) &&
-                            (projections[i].z < projections[best].z)) {
-                            best = i;
-                        }
-                    }
-                    return edges[best];
-                };
-                ret.axes = {
-                    y: {
-                        'left': pickEdge(yEdges, 'x', -1),
-                        'right': pickEdge(yEdges, 'x', +1)
-                    },
-                    x: {
-                        'top': pickEdge(xTopEdges, 'y', -1),
-                        'bottom': pickEdge(xBottomEdges, 'y', +1)
-                    },
-                    z: {
-                        'top': pickEdge(zTopEdges, 'y', -1),
-                        'bottom': pickEdge(zBottomEdges, 'y', +1)
-                    }
-                };
             }
-            else {
-                ret.axes = {
-                    y: {
-                        'left': { x: xm, z: zm, xDir: { x: 1, y: 0, z: 0 } },
-                        'right': { x: xp, z: zm, xDir: { x: 0, y: 0, z: 1 } }
-                    },
-                    x: {
-                        'top': { y: ym, z: zm, xDir: { x: 1, y: 0, z: 0 } },
-                        'bottom': { y: yp, z: zm, xDir: { x: 1, y: 0, z: 0 } }
-                    },
-                    z: {
-                        'top': {
-                            x: defaultShowLeft ? xp : xm,
-                            y: ym,
-                            xDir: defaultShowLeft ?
-                                { x: 0, y: 0, z: 1 } :
-                                { x: 0, y: 0, z: -1 }
-                        },
-                        'bottom': {
-                            x: defaultShowLeft ? xp : xm,
-                            y: yp,
-                            xDir: defaultShowLeft ?
-                                { x: 0, y: 0, z: 1 } :
-                                { x: 0, y: 0, z: -1 }
-                        }
-                    }
-                };
+            /**
+             * @private
+             */
+            function wrapIsInsidePlot(proceed) {
+                return this.is3d() || proceed.apply(this, [].slice.call(arguments, 1));
             }
-            return ret;
-        };
-        // Animation setter for matrix property.
-        Fx.prototype.matrixSetter = function () {
-            var interpolated;
-            if (this.pos < 1 &&
-                (isArray(this.start) || isArray(this.end))) {
-                var start = this.start || [1, 0, 0, 1, 0, 0];
-                var end = this.end || [1, 0, 0, 1, 0, 0];
-                interpolated = [];
-                for (var i = 0; i < 6; i++) {
-                    interpolated.push(this.pos * end[i] + (1 - this.pos) * start[i]);
+            /**
+             * Draw the series in the reverse order (#3803, #3917)
+             * @private
+             */
+            function wrapRenderSeries(proceed) {
+                var series,
+                    i = this.series.length;
+                if (this.is3d()) {
+                    while (i--) {
+                        series = this.series[i];
+                        series.translate();
+                        series.render();
+                    }
+                }
+                else {
+                    proceed.call(this);
                 }
             }
-            else {
-                interpolated = this.end;
+            /**
+             * @private
+             */
+            function wrapSetClassName(proceed) {
+                proceed.apply(this, [].slice.call(arguments, 1));
+                if (this.is3d()) {
+                    this.container.className += ' highcharts-3d-chart';
+                }
             }
-            this.elem.attr(this.prop, interpolated, null, true);
-        };
+        })(Chart3D || (Chart3D = {}));
+        Chart3D.compose(Chart, Fx);
         ZAxis.ZChartComposition.compose(Chart);
         Axis3D.compose(Axis);
         /**
@@ -3792,8 +3921,9 @@
          */
         ''; // adds doclets above to transpiled file
 
+        return Chart3D;
     });
-    _registerModule(_modules, 'parts-3d/Series.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Core/Series/Series3D.js', [_modules['Core/Globals.js'], _modules['Extensions/Math3D.js'], _modules['Core/Utilities.js']], function (H, Math3D, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -3805,9 +3935,9 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var perspective = Math3D.perspective;
         var addEvent = U.addEvent,
             pick = U.pick;
-        var perspective = H.perspective;
         /* eslint-disable no-invalid-this */
         // Wrap the translate method to post-translate points into 3D perspective
         addEvent(H.Series, 'afterTranslate', function () {
@@ -3862,7 +3992,7 @@
         };
 
     });
-    _registerModule(_modules, 'parts-3d/Column.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['parts/Stacking.js']], function (H, U, StackItem) {
+    _registerModule(_modules, 'Series/Column3DSeries.js', [_modules['Core/Series/Series.js'], _modules['Core/Globals.js'], _modules['Extensions/Math3D.js'], _modules['Extensions/Stacking.js'], _modules['Core/Utilities.js']], function (BaseSeries, H, Math3D, StackItem, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -3872,12 +4002,12 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var perspective = Math3D.perspective;
         var addEvent = U.addEvent,
             pick = U.pick,
             wrap = U.wrap;
-        var perspective = H.perspective,
-            Series = H.Series,
-            seriesTypes = H.seriesTypes,
+        var Series = H.Series,
+            columnProto = BaseSeries.seriesTypes.column.prototype,
             svg = H.svg;
         /**
          * Depth of the columns in a 3D column chart.
@@ -3918,7 +4048,33 @@
          * @apioption plotOptions.column.groupZPadding
          */
         /* eslint-disable no-invalid-this */
-        wrap(seriesTypes.column.prototype, 'translate', function (proceed) {
+        /**
+         * @private
+         * @param {Highcharts.Chart} chart
+         * Chart with stacks
+         * @param {string} stacking
+         * Stacking option
+         * @return {Highcharts.Stack3dDictionary}
+         */
+        function retrieveStacks(chart, stacking) {
+            var series = chart.series,
+                stacks = {};
+            var stackNumber,
+                i = 1;
+            series.forEach(function (s) {
+                stackNumber = pick(s.options.stack, (stacking ? 0 : series.length - 1 - s.index)); // #3841, #4532
+                if (!stacks[stackNumber]) {
+                    stacks[stackNumber] = { series: [s], position: i };
+                    i++;
+                }
+                else {
+                    stacks[stackNumber].series.push(s);
+                }
+            });
+            stacks.totalStacks = i + 1;
+            return stacks;
+        }
+        wrap(columnProto, 'translate', function (proceed) {
             proceed.apply(this, [].slice.call(arguments, 1));
             // Do not do this if the chart is not 3D
             if (this.chart.is3d()) {
@@ -3926,13 +4082,13 @@
             }
         });
         // Don't use justifyDataLabel when point is outsidePlot
-        wrap(H.Series.prototype, 'justifyDataLabel', function (proceed) {
+        wrap(Series.prototype, 'justifyDataLabel', function (proceed) {
             return !(arguments[2].outside3dPlot) ?
                 proceed.apply(this, [].slice.call(arguments, 1)) :
                 false;
         });
-        seriesTypes.column.prototype.translate3dPoints = function () { };
-        seriesTypes.column.prototype.translate3dShapes = function () {
+        columnProto.translate3dPoints = function () { };
+        columnProto.translate3dShapes = function () {
             var series = this,
                 chart = series.chart,
                 seriesOptions = series.options,
@@ -4027,7 +4183,7 @@
             // store for later use #4067
             series.z = z;
         };
-        wrap(seriesTypes.column.prototype, 'animate', function (proceed) {
+        wrap(columnProto, 'animate', function (proceed) {
             if (!this.chart.is3d()) {
                 proceed.apply(this, [].slice.call(arguments, 1));
             }
@@ -4081,7 +4237,7 @@
         // In case of 3d columns there is no sense to add this columns to a specific
         // series group - if series is added to a group all columns will have the same
         // zIndex in comparison with different series.
-        wrap(seriesTypes.column.prototype, 'plotGroup', function (proceed, prop, name, visibility, zIndex, parent) {
+        wrap(columnProto, 'plotGroup', function (proceed, prop, name, visibility, zIndex, parent) {
             if (prop !== 'dataLabelsGroup') {
                 if (this.chart.is3d()) {
                     if (this[prop]) {
@@ -4106,7 +4262,7 @@
         });
         // When series is not added to group it is needed to change setVisible method to
         // allow correct Legend funcionality. This wrap is basing on pie chart series.
-        wrap(seriesTypes.column.prototype, 'setVisible', function (proceed, vis) {
+        wrap(columnProto, 'setVisible', function (proceed, vis) {
             var series = this,
                 pointVis;
             if (series.chart.is3d()) {
@@ -4126,8 +4282,7 @@
             }
             proceed.apply(this, Array.prototype.slice.call(arguments, 1));
         });
-        seriesTypes.column.prototype
-            .handle3dGrouping = true;
+        columnProto.handle3dGrouping = true;
         addEvent(Series, 'afterInit', function () {
             if (this.chart.is3d() &&
                 this.handle3dGrouping) {
@@ -4140,7 +4295,8 @@
                     z = 0;
                 // @todo grouping === true ?
                 if (!(typeof grouping !== 'undefined' && !grouping)) {
-                    var stacks = this.chart.retrieveStacks(stacking),
+                    var stacks = retrieveStacks(this.chart,
+                        stacking),
                         stack = seriesOptions.stack || 0,
                         i; // position within the stack
                         for (i = 0; i < stacks[stack].series.length; i++) {
@@ -4206,17 +4362,16 @@
                 this.graphic && this.graphic.element.nodeName !== 'g' :
                 proceed.apply(this, args);
         }
-        wrap(seriesTypes.column.prototype, 'pointAttribs', pointAttribs);
-        wrap(seriesTypes.column.prototype, 'setState', setState);
-        wrap(seriesTypes.column.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
-        if (seriesTypes.columnrange) {
-            wrap(seriesTypes.columnrange.prototype, 'pointAttribs', pointAttribs);
-            wrap(seriesTypes.columnrange.prototype, 'setState', setState);
-            wrap(seriesTypes.columnrange.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
-            seriesTypes.columnrange.prototype.plotGroup =
-                seriesTypes.column.prototype.plotGroup;
-            seriesTypes.columnrange.prototype.setVisible =
-                seriesTypes.column.prototype.setVisible;
+        wrap(columnProto, 'pointAttribs', pointAttribs);
+        wrap(columnProto, 'setState', setState);
+        wrap(columnProto.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
+        if (BaseSeries.seriesTypes.columnRange) {
+            var columnRangeProto = BaseSeries.seriesTypes.columnrange.prototype;
+            wrap(columnRangeProto, 'pointAttribs', pointAttribs);
+            wrap(columnRangeProto, 'setState', setState);
+            wrap(columnRangeProto.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
+            columnRangeProto.plotGroup = columnProto.plotGroup;
+            columnRangeProto.setVisible = columnProto.setVisible;
         }
         wrap(Series.prototype, 'alignDataLabel', function (proceed, point, dataLabel, options, alignTo) {
             var chart = this.chart;
@@ -4273,7 +4428,7 @@
                 // use its barW, z and depth parameters
                 // for correct stackLabels position calculation
                 if (columnSeries &&
-                    columnSeries instanceof seriesTypes.column) {
+                    columnSeries instanceof BaseSeries.seriesTypes.column) {
                     var dLPosition = {
                             x: stackBox.x + (chart.inverted ? h : xWidth / 2),
                             y: stackBox.y,
@@ -4297,9 +4452,64 @@
             }
             return stackBox;
         });
+        /*
+            @merge v6.2
+            @todo
+            EXTENSION FOR 3D CYLINDRICAL COLUMNS
+            Not supported
+        */
+        /*
+        var defaultOptions = H.getOptions();
+        defaultOptions.plotOptions.cylinder =
+            merge(defaultOptions.plotOptions.column);
+        var CylinderSeries = extendClass(seriesTypes.column, {
+                type: 'cylinder'
+            });
+        seriesTypes.cylinder = CylinderSeries;
+
+        wrap(seriesTypes.cylinder.prototype, 'translate', function (proceed) {
+            proceed.apply(this, [].slice.call(arguments, 1));
+
+            // Do not do this if the chart is not 3D
+            if (!this.chart.is3d()) {
+                return;
+            }
+
+            var series = this,
+                    chart = series.chart,
+                    options = chart.options,
+                    cylOptions = options.plotOptions.cylinder,
+                    options3d = options.chart.options3d,
+                    depth = cylOptions.depth || 0,
+                    alpha = chart.alpha3d;
+
+            var z = cylOptions.stacking ?
+                    (this.options.stack || 0) * depth :
+                    series._i * depth;
+            z += depth / 2;
+
+            if (cylOptions.grouping !== false) { z = 0; }
+
+            each(series.data, function (point) {
+                var shapeArgs = point.shapeArgs,
+                        deg2rad = H.deg2rad;
+                point.shapeType = 'arc3d';
+                shapeArgs.x += depth / 2;
+                shapeArgs.z = z;
+                shapeArgs.start = 0;
+                shapeArgs.end = 2 * PI;
+                shapeArgs.r = depth * 0.95;
+                shapeArgs.innerR = 0;
+                shapeArgs.depth =
+                    shapeArgs.height * (1 / sin((90 - alpha) * deg2rad)) - z;
+                shapeArgs.alpha = 90 - alpha;
+                shapeArgs.beta = 0;
+            });
+        });
+        */
 
     });
-    _registerModule(_modules, 'parts-3d/Pie.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Series/Pie3DSeries.js', [_modules['Core/Series/Series.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (BaseSeries, H, U) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -4311,11 +4521,11 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var pick = U.pick,
-            wrap = U.wrap;
         var deg2rad = H.deg2rad,
-            seriesTypes = H.seriesTypes,
             svg = H.svg;
+        var pick = U.pick,
+            wrap = U.wrap;
+        var seriesTypes = BaseSeries.seriesTypes;
         /**
          * The thickness of a 3D pie.
          *
@@ -4468,7 +4678,7 @@
         });
 
     });
-    _registerModule(_modules, 'parts-3d/Scatter.js', [_modules['parts/Globals.js'], _modules['parts/Point.js'], _modules['parts/Utilities.js']], function (H, Point, U) {
+    _registerModule(_modules, 'Series/Scatter3DSeries.js', [_modules['Core/Series/Series.js'], _modules['Extensions/Math3D.js'], _modules['Core/Series/Point.js']], function (BaseSeries, Math3D, Point) {
         /* *
          *
          *  (c) 2010-2020 Torstein Honsi
@@ -4480,8 +4690,8 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var seriesType = U.seriesType;
-        var seriesTypes = H.seriesTypes;
+        var seriesTypes = BaseSeries.seriesTypes;
+        var pointCameraDistance = Math3D.pointCameraDistance;
         /**
          * @private
          * @class
@@ -4489,7 +4699,7 @@
          *
          * @augments Highcharts.Series
          */
-        seriesType('scatter3d', 'scatter', 
+        BaseSeries.seriesType('scatter3d', 'scatter', 
         /**
          * A 3D scatter plot uses x, y and z coordinates to display values for three
          * variables for a set of data.
@@ -4500,7 +4710,7 @@
          *         Draggable 3d scatter
          *
          * @extends      plotOptions.scatter
-         * @excluding    dragDrop, cluster
+         * @excluding    dragDrop, cluster, boostThreshold, boostBlending
          * @product      highcharts
          * @requires     highcharts-3d
          * @optionparent plotOptions.scatter3d
@@ -4517,7 +4727,7 @@
                     arguments);
                 if (this.chart.is3d() && point) {
                     attribs.zIndex =
-                        H.pointCameraDistance(point, this.chart);
+                        pointCameraDistance(point, this.chart);
                 }
                 return attribs;
             },
@@ -4545,6 +4755,7 @@
          * scatter3d](#plotOptions.scatter3d).
          *
          * @extends   series,plotOptions.scatter3d
+         * @excluding boostThreshold, boostBlending
          * @product   highcharts
          * @requires  highcharts-3d
          * @apioption series.scatter3d
@@ -4612,119 +4823,6 @@
          */
         ''; // adds doclets above to transpiled file
 
-    });
-    _registerModule(_modules, 'parts-3d/VMLAxis3D.js', [_modules['parts/Utilities.js']], function (U) {
-        /* *
-         *
-         *  (c) 2010-2020 Torstein Honsi
-         *
-         *  Extension to the VML Renderer
-         *
-         *  License: www.highcharts.com/license
-         *
-         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
-         *
-         * */
-        var addEvent = U.addEvent;
-        /* eslint-disable valid-jsdoc */
-        var VMLAxis3DAdditions = /** @class */ (function () {
-                /* *
-                 *
-                 *  Constructors
-                 *
-                 * */
-                function VMLAxis3DAdditions(axis) {
-                    this.axis = axis;
-            }
-            return VMLAxis3DAdditions;
-        }());
-        var VMLAxis3D = /** @class */ (function () {
-                function VMLAxis3D() {
-                }
-                /* *
-                 *
-                 *  Static Properties
-                 *
-                 * */
-                VMLAxis3D.compose = function (AxisClass) {
-                    AxisClass.keepProps.push('vml');
-                addEvent(AxisClass, 'init', VMLAxis3D.onInit);
-                addEvent(AxisClass, 'render', VMLAxis3D.onRender);
-            };
-            /**
-             * @private
-             */
-            VMLAxis3D.onInit = function () {
-                var axis = this;
-                if (!axis.vml) {
-                    axis.vml = new VMLAxis3DAdditions(axis);
-                }
-            };
-            /**
-             * @private
-             */
-            VMLAxis3D.onRender = function () {
-                var axis = this;
-                var vml = axis.vml;
-                // VML doesn't support a negative z-index
-                if (vml.sideFrame) {
-                    vml.sideFrame.css({ zIndex: 0 });
-                    vml.sideFrame.front.attr({
-                        fill: vml.sideFrame.color
-                    });
-                }
-                if (vml.bottomFrame) {
-                    vml.bottomFrame.css({ zIndex: 1 });
-                    vml.bottomFrame.front.attr({
-                        fill: vml.bottomFrame.color
-                    });
-                }
-                if (vml.backFrame) {
-                    vml.backFrame.css({ zIndex: 0 });
-                    vml.backFrame.front.attr({
-                        fill: vml.backFrame.color
-                    });
-                }
-            };
-            return VMLAxis3D;
-        }());
-
-        return VMLAxis3D;
-    });
-    _registerModule(_modules, 'parts-3d/VMLRenderer.js', [_modules['parts/Axis.js'], _modules['parts/Globals.js'], _modules['parts-3d/VMLAxis3D.js']], function (Axis, H, VMLAxis3D) {
-        /* *
-         *
-         *  (c) 2010-2020 Torstein Honsi
-         *
-         *  Extension to the VML Renderer
-         *
-         *  License: www.highcharts.com/license
-         *
-         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
-         *
-         * */
-        var SVGRenderer = H.SVGRenderer,
-            VMLRenderer = H.VMLRenderer;
-        if (VMLRenderer) {
-            H.setOptions({ animate: false });
-            VMLRenderer.prototype.face3d = SVGRenderer.prototype.face3d;
-            VMLRenderer.prototype.polyhedron = SVGRenderer.prototype.polyhedron;
-            VMLRenderer.prototype.elements3d = SVGRenderer.prototype.elements3d;
-            VMLRenderer.prototype.element3d = SVGRenderer.prototype.element3d;
-            VMLRenderer.prototype.cuboid = SVGRenderer.prototype.cuboid;
-            VMLRenderer.prototype.cuboidPath = SVGRenderer.prototype.cuboidPath;
-            VMLRenderer.prototype.toLinePath = SVGRenderer.prototype.toLinePath;
-            VMLRenderer.prototype.toLineSegments = SVGRenderer.prototype.toLineSegments;
-            VMLRenderer.prototype.arc3d = function (shapeArgs) {
-                var result = SVGRenderer.prototype.arc3d.call(this,
-                    shapeArgs);
-                result.css({ zIndex: result.zIndex });
-                return result;
-            };
-            H.VMLRenderer.prototype.arc3dPath = H.SVGRenderer.prototype.arc3dPath;
-            VMLAxis3D.compose(Axis);
-        }
-
     });
     _registerModule(_modules, 'masters/highcharts-3d.src.js', [], function () {