highcharts 10.0.0 → 10.2.1

package/modules/sunburst.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v10.0.0 (2022-03-07)
+ * @license Highcharts JS v10.2.1 (2022-08-29)
  *
  * (c) 2016-2021 Highsoft AS
  * Authors: Jon Arild Nygard
@@ -36,7 +36,7 @@
             }
         }
     }
-    _registerModule(_modules, 'Series/ColorMapMixin.js', [_modules['Core/Globals.js'], _modules['Core/Series/Point.js'], _modules['Core/Utilities.js']], function (H, Point, U) {
+    _registerModule(_modules, 'Series/ColorMapComposition.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -46,66 +46,92 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        // @todo cleanup & reduction - consider composition
-        var noop = H.noop,
-            seriesTypes = H.seriesTypes;
-        var defined = U.defined,
-            addEvent = U.addEvent;
-        // Move points to the top of the z-index order when hovered
-        addEvent(Point, 'afterSetState', function (e) {
-            var point = this;
-            if (point.moveToTopOnHover && point.graphic) {
-                point.graphic.attr({
-                    zIndex: e && e.state === 'hover' ? 1 : 0
-                });
-            }
-        });
-        /**
-         * Mixin for maps and heatmaps
+        var columnProto = SeriesRegistry.seriesTypes.column.prototype;
+        var addEvent = U.addEvent,
+            defined = U.defined;
+        /* *
          *
-         * @private
-         * @mixin Highcharts.colorMapPointMixin
-         */
-        var PointMixin = {
+         *  Composition
+         *
+         * */
+        var ColorMapComposition;
+        (function (ColorMapComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            ColorMapComposition.pointMembers = {
                 dataLabelOnNull: true,
                 moveToTopOnHover: true,
-                /* eslint-disable valid-jsdoc */
-                /**
-                 * Color points have a value option that determines whether or not it is
-                 * a null point
-                 * @private
-                 */
-                isValid: function () {
-                    // undefined is allowed
-                    return (this.value !== null &&
-                        this.value !== Infinity &&
-                        this.value !== -Infinity);
-            }
-            /* eslint-enable valid-jsdoc */
-        };
-        /**
-         * @private
-         * @mixin Highcharts.colorMapSeriesMixin
-         */
-        var SeriesMixin = {
-                pointArrayMap: ['value'],
+                isValid: pointIsValid
+            };
+            ColorMapComposition.seriesMembers = {
+                colorKey: 'value',
                 axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
-                trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
-                getSymbol: noop,
                 parallelArrays: ['x', 'y', 'value'],
-                colorKey: 'value',
-                pointAttribs: seriesTypes.column.prototype.pointAttribs,
-                /* eslint-disable valid-jsdoc */
-                /**
-                 * Get the color attibutes to apply on the graphic
-                 * @private
-                 * @function Highcharts.colorMapSeriesMixin.colorAttribs
-                 * @param {Highcharts.Point} point
-                 * @return {Highcharts.SVGAttributes}
-                 *         The SVG attributes
-                 */
-                colorAttribs: function (point) {
-                    var ret = {};
+                pointArrayMap: ['value'],
+                trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
+                colorAttribs: seriesColorAttribs,
+                pointAttribs: columnProto.pointAttribs
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * @private
+             */
+            function compose(SeriesClass) {
+                var PointClass = SeriesClass.prototype.pointClass;
+                if (composedClasses.indexOf(PointClass) === -1) {
+                    composedClasses.push(PointClass);
+                    addEvent(PointClass, 'afterSetState', onPointAfterSetState);
+                }
+                return SeriesClass;
+            }
+            ColorMapComposition.compose = compose;
+            /**
+             * Move points to the top of the z-index order when hovered.
+             * @private
+             */
+            function onPointAfterSetState(e) {
+                var point = this;
+                if (point.moveToTopOnHover && point.graphic) {
+                    point.graphic.attr({
+                        zIndex: e && e.state === 'hover' ? 1 : 0
+                    });
+                }
+            }
+            /**
+             * Color points have a value option that determines whether or not it is
+             * a null point
+             * @private
+             */
+            function pointIsValid() {
+                return (this.value !== null &&
+                    this.value !== Infinity &&
+                    this.value !== -Infinity &&
+                    // undefined is allowed, but NaN is not (#17279)
+                    (this.value === void 0 || !isNaN(this.value)));
+            }
+            /**
+             * Get the color attibutes to apply on the graphic
+             * @private
+             * @function Highcharts.colorMapSeriesMixin.colorAttribs
+             * @param {Highcharts.Point} point
+             * @return {Highcharts.SVGAttributes}
+             *         The SVG attributes
+             */
+            function seriesColorAttribs(point) {
+                var ret = {};
                 if (defined(point.color) &&
                     (!point.state || point.state === 'normal') // #15746
                 ) {
@@ -113,13 +139,14 @@
                 }
                 return ret;
             }
-        };
-        var ColorMapMixin = {
-                PointMixin: PointMixin,
-                SeriesMixin: SeriesMixin
-            };
+        })(ColorMapComposition || (ColorMapComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return ColorMapMixin;
+        return ColorMapComposition;
     });
     _registerModule(_modules, 'Series/Treemap/TreemapAlgorithmGroup.js', [], function () {
         /* *
@@ -216,126 +243,98 @@
 
         return TreemapAlgorithmGroup;
     });
-    _registerModule(_modules, 'Series/DrawPointComposition.js', [], function () {
+    _registerModule(_modules, 'Series/DrawPointUtilities.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var isNumber = U.isNumber;
         /* *
          *
-         *  Composition
+         *  Functions
          *
          * */
-        var DrawPointComposition;
-        (function (DrawPointComposition) {
-            /* *
-             *
-             *  Declarations
-             *
-             * */
-            /* *
-             *
-             *  Constants
-             *
-             * */
-            var composedClasses = [];
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /* eslint-disable valid-jsdoc */
-            /**
-             * @private
-             */
-            function compose(PointClass) {
-                if (composedClasses.indexOf(PointClass) === -1) {
-                    composedClasses.push(PointClass);
-                    var pointProto = PointClass.prototype;
-                    pointProto.draw = draw;
-                    if (!pointProto.shouldDraw) {
-                        pointProto.shouldDraw = shouldDraw;
-                    }
+        /**
+         * Handles the drawing of a component.
+         * Can be used for any type of component that reserves the graphic property,
+         * and provides a shouldDraw on its context.
+         *
+         * @private
+         *
+         * @todo add type checking.
+         * @todo export this function to enable usage
+         */
+        function draw(point, params) {
+            var animatableAttribs = params.animatableAttribs,
+                onComplete = params.onComplete,
+                css = params.css,
+                renderer = params.renderer;
+            var animation = (point.series && point.series.chart.hasRendered) ?
+                    // Chart-level animation on updates
+                    void 0 :
+                    // Series-level animation on new points
+                    (point.series &&
+                        point.series.options.animation);
+            var graphic = point.graphic;
+            params.attribs = params.attribs || {};
+            // Assigning class in dot notation does go well in IE8
+            // eslint-disable-next-line dot-notation
+            params.attribs['class'] = point.getClassName();
+            if (shouldDraw(point)) {
+                if (!graphic) {
+                    point.graphic = graphic = params.shapeType === 'text' ?
+                        renderer.text() :
+                        renderer[params.shapeType](params.shapeArgs || {});
+                    graphic.add(params.group);
                 }
-                return PointClass;
+                if (css) {
+                    graphic.css(css);
+                }
+                graphic
+                    .attr(params.attribs)
+                    .animate(animatableAttribs, params.isNew ? false : animation, onComplete);
             }
-            DrawPointComposition.compose = compose;
-            /**
-             * Handles the drawing of a component.
-             * Can be used for any type of component that reserves the graphic property,
-             * and provides a shouldDraw on its context.
-             *
-             * @private
-             *
-             * @todo add type checking.
-             * @todo export this function to enable usage
-             */
-            function draw(params) {
-                var _this = this;
-                var animatableAttribs = params.animatableAttribs,
-                    onComplete = params.onComplete,
-                    css = params.css,
-                    renderer = params.renderer;
-                var animation = (this.series && this.series.chart.hasRendered) ?
-                        // Chart-level animation on updates
-                        void 0 :
-                        // Series-level animation on new points
-                        (this.series &&
-                            this.series.options.animation);
-                var graphic = this.graphic;
-                params.attribs = params.attribs || {};
-                // Assigning class in dot notation does go well in IE8
-                // eslint-disable-next-line dot-notation
-                params.attribs['class'] = this.getClassName();
-                if (this.shouldDraw()) {
-                    if (!graphic) {
-                        this.graphic = graphic = params.shapeType === 'text' ?
-                            renderer.text() :
-                            renderer[params.shapeType](params.shapeArgs || {});
-                        graphic.add(params.group);
+            else if (graphic) {
+                var destroy_1 = function () {
+                        point.graphic = graphic = (graphic && graphic.destroy());
+                    if (typeof onComplete === 'function') {
+                        onComplete();
                     }
-                    if (css) {
-                        graphic.css(css);
-                    }
-                    graphic
-                        .attr(params.attribs)
-                        .animate(animatableAttribs, params.isNew ? false : animation, onComplete);
+                };
+                // animate only runs complete callback if something was animated.
+                if (Object.keys(animatableAttribs).length) {
+                    graphic.animate(animatableAttribs, void 0, function () { return destroy_1(); });
                 }
-                else if (graphic) {
-                    var destroy_1 = function () {
-                            _this.graphic = graphic = (graphic && graphic.destroy());
-                        if (typeof onComplete === 'function') {
-                            onComplete();
-                        }
-                    };
-                    // animate only runs complete callback if something was animated.
-                    if (Object.keys(animatableAttribs).length) {
-                        graphic.animate(animatableAttribs, void 0, function () {
-                            destroy_1();
-                        });
-                    }
-                    else {
-                        destroy_1();
-                    }
+                else {
+                    destroy_1();
                 }
             }
-            /**
-             * @private
-             */
-            function shouldDraw() {
-                return !this.isNull;
+        }
+        /**
+         * @private
+         */
+        function shouldDraw(point) {
+            switch (point.series && point.series.type) {
+                case 'treemap':
+                    return isNumber(point.plotY) && point.y !== null;
+                default:
+                    return !point.isNull;
             }
-        })(DrawPointComposition || (DrawPointComposition = {}));
+        }
         /* *
          *
          *  Default Export
          *
          * */
+        var DrawPointUtilities = {
+                draw: draw,
+                shouldDraw: shouldDraw
+            };
 
-        return DrawPointComposition;
+        return DrawPointUtilities;
     });
-    _registerModule(_modules, 'Series/Treemap/TreemapPoint.js', [_modules['Series/DrawPointComposition.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DrawPointComposition, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Treemap/TreemapPoint.js', [_modules['Series/DrawPointUtilities.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DPU, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2014-2021 Highsoft AS
@@ -399,6 +398,9 @@
              *
              * */
             /* eslint-disable valid-jsdoc */
+            TreemapPoint.prototype.draw = function (params) {
+                DPU.draw(this, params);
+            };
             TreemapPoint.prototype.getClassName = function () {
                 var className = Point.prototype.getClassName.call(this),
                     series = this.series,
@@ -436,14 +438,13 @@
                 }
             };
             TreemapPoint.prototype.shouldDraw = function () {
-                return isNumber(this.plotY) && this.y !== null;
+                return DPU.shouldDraw(this);
             };
             return TreemapPoint;
         }(ScatterPoint));
         extend(TreemapPoint.prototype, {
             setVisible: PiePoint.prototype.setVisible
         });
-        DrawPointComposition.compose(TreemapPoint);
         /* *
          *
          *  Default Export
@@ -774,11 +775,15 @@
         extend(defaultOptions.lang, 
         /**
          * @optionparent lang
+         *
+         * @private
          */
         {
             /**
              * @since 10.0.0
              * @product  highcharts
+             *
+             * @private
              */
             mainBreadcrumb: 'Main'
         });
@@ -1037,6 +1042,9 @@
                     if (xOffset) {
                         newPositions.x += xOffset;
                     }
+                    if (breadcrumbs.options.rtl) {
+                        newPositions.x += positionOptions.width;
+                    }
                     newPositions.y = pick(newPositions.y, this.yOffset, 0);
                     breadcrumbs.group.align(newPositions, true, alignTo);
                 }
@@ -1062,9 +1070,7 @@
                 var breadcrumbs = this,
                     chart = this.chart,
                     breadcrumbsOptions = breadcrumbs.options,
-                    buttonTheme = merge(breadcrumbsOptions.buttonTheme),
-                    states = buttonTheme.states;
-                delete buttonTheme.states;
+                    buttonTheme = merge(breadcrumbsOptions.buttonTheme);
                 var button = chart.renderer
                         .button(breadcrumbs.getButtonText(breadcrumb),
                     posX,
@@ -1089,7 +1095,7 @@
                         }
                         fireEvent(breadcrumbs, 'up', e);
                     }
-                }, buttonTheme, states && states.hover, states && states.select, states && states.disabled)
+                }, buttonTheme)
                     .addClass('highcharts-breadcrumbs-button')
                     .add(breadcrumbs.group);
                 if (!chart.styledMode) {
@@ -1253,10 +1259,19 @@
              *        Breadcrumbs class.
              */
             Breadcrumbs.prototype.updateListElements = function () {
-                var updateXPosition = function (element,
+                var breadcrumbs = this,
+                    elementList = breadcrumbs.elementList,
+                    buttonSpacing = breadcrumbs.options.buttonSpacing,
+                    list = breadcrumbs.list,
+                    rtl = breadcrumbs.options.rtl,
+                    rtlFactor = rtl ? -1 : 1,
+                    updateXPosition = function (element,
                     spacing) {
-                        return element.getBBox().width + spacing;
-                }, breadcrumbs = this, elementList = breadcrumbs.elementList, buttonSpacing = breadcrumbs.options.buttonSpacing, list = breadcrumbs.list;
+                        return rtlFactor * element.getBBox().width +
+                            rtlFactor * spacing;
+                }, adjustToRTL = function (element, posX, posY) {
+                    element.translate(posX - element.getBBox().width, posY);
+                };
                 // Inital position for calculating the breadcrumbs group.
                 var posX = breadcrumbs.group ?
                         updateXPosition(breadcrumbs.group,
@@ -1275,9 +1290,12 @@
                         if (!currentBreadcrumb.separator &&
                             !isLast) {
                             // Add spacing for the next separator
-                            posX += buttonSpacing;
+                            posX += rtlFactor * buttonSpacing;
                             currentBreadcrumb.separator =
                                 breadcrumbs.renderSeparator(posX, posY);
+                            if (rtl) {
+                                adjustToRTL(currentBreadcrumb.separator, posX, posY);
+                            }
                             posX += updateXPosition(currentBreadcrumb.separator, buttonSpacing);
                         }
                         else if (currentBreadcrumb.separator &&
@@ -1290,10 +1308,16 @@
                     else {
                         // Render a button.
                         button = breadcrumbs.renderButton(breadcrumb, posX, posY);
+                        if (rtl) {
+                            adjustToRTL(button, posX, posY);
+                        }
                         posX += updateXPosition(button, buttonSpacing);
                         // Render a separator.
                         if (!isLast) {
                             separator = breadcrumbs.renderSeparator(posX, posY);
+                            if (rtl) {
+                                adjustToRTL(separator, posX, posY);
+                            }
                             posX += updateXPosition(separator, buttonSpacing);
                         }
                         elementList[breadcrumb.level] = {
@@ -1352,7 +1376,7 @@
                         }
                     },
                     style: {
-                        color: "#335cad" /* highlightColor80 */
+                        color: "#335cad" /* Palette.highlightColor80 */
                     }
                 },
                 /**
@@ -1421,6 +1445,16 @@
                  * @product    highcharts highmaps
                  */
                 relativeTo: 'plotBox',
+                /**
+                 * Whether to reverse the order of buttons. This is common in Arabic
+                 * and Hebrew.
+                 *
+                 * @type       {boolean}
+                 * @since 10.2.0
+                 * @sample     {highcharts} highcharts/breadcrumbs/rtl
+                 *             Breadcrumbs in RTL
+                 */
+                rtl: false,
                 /**
                  * Positioning for the button row. The breadcrumbs buttons will be
                  * aligned properly for the default chart layout (title,  subtitle,
@@ -1481,7 +1515,7 @@
                      *  @since 10.0.0
                      */
                     style: {
-                        color: "#666666" /* neutralColor60 */
+                        color: "#666666" /* Palette.neutralColor60 */
                     }
                 },
                 /**
@@ -1736,7 +1770,7 @@
         });
 
     });
-    _registerModule(_modules, 'Series/Treemap/TreemapSeries.js', [_modules['Core/Color/Color.js'], _modules['Series/ColorMapMixin.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Treemap/TreemapAlgorithmGroup.js'], _modules['Series/Treemap/TreemapPoint.js'], _modules['Series/Treemap/TreemapUtilities.js'], _modules['Series/TreeUtilities.js'], _modules['Extensions/Breadcrumbs.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, H, LegendSymbol, SeriesRegistry, TreemapAlgorithmGroup, TreemapPoint, TreemapUtilities, TU, Breadcrumbs, U) {
+    _registerModule(_modules, 'Series/Treemap/TreemapSeries.js', [_modules['Core/Color/Color.js'], _modules['Series/ColorMapComposition.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Treemap/TreemapAlgorithmGroup.js'], _modules['Series/Treemap/TreemapPoint.js'], _modules['Series/Treemap/TreemapUtilities.js'], _modules['Series/TreeUtilities.js'], _modules['Extensions/Breadcrumbs.js'], _modules['Core/Utilities.js']], function (Color, ColorMapComposition, H, LegendSymbol, SeriesRegistry, TreemapAlgorithmGroup, TreemapPoint, TreemapUtilities, TU, Breadcrumbs, U) {
         /* *
          *
          *  (c) 2014-2021 Highsoft AS
@@ -2372,8 +2406,6 @@
                     breadcrumbsOptions = merge(options.drillUpButton,
                     options.breadcrumbs);
                 var setOptionsEvent;
-                // If color series logic is loaded, add some properties
-                this.colorAttribs = ColorMapMixin.SeriesMixin.colorAttribs;
                 setOptionsEvent = addEvent(series, 'setOptions', function (event) {
                     var options = event.userOptions;
                     if (defined(options.allowDrillToNode) &&
@@ -2453,7 +2485,7 @@
                     level = point && mapOptionsToLevel[point.node.level] || {},
                     options = this.options,
                     attr,
-                    stateOptions = (state && options.states[state]) || {},
+                    stateOptions = state && options.states && options.states[state] || {},
                     className = (point && point.getClassName()) || '',
                     opacity;
                 // Set attributes by precedence. Point trumps level trumps series.
@@ -2588,7 +2620,7 @@
              * The id of the new root node.
              *
              * @param {boolean} [redraw=true]
-             * Wether to redraw the chart or not.
+             * Whether to redraw the chart or not.
              *
              * @param {Object} [eventArguments]
              * Arguments to be accessed in event handler.
@@ -2600,7 +2632,7 @@
              * Id of the previous root.
              *
              * @param {boolean} [eventArguments.redraw]
-             * Wether to redraw the chart after.
+             * Whether to redraw the chart after.
              *
              * @param {Object} [eventArguments.series]
              * The series to update the root of.
@@ -2628,7 +2660,7 @@
                  * @param {Object} args The event arguments.
                  * @param {string} args.newRootId Id of the new root.
                  * @param {string} args.previousRootId Id of the previous root.
-                 * @param {boolean} args.redraw Wether to redraw the chart after.
+                 * @param {boolean} args.redraw Whether to redraw the chart after.
                  * @param {Object} args.series The series to update the root of.
                  * @param {string} [args.trigger=undefined] The action which
                  * triggered the event. Undefined if the setRootNode is called
@@ -3180,7 +3212,7 @@
                  *
                  * @type {Highcharts.ColorString}
                  */
-                borderColor: "#e6e6e6" /* neutralColor10 */,
+                borderColor: "#e6e6e6" /* Palette.neutralColor10 */,
                 /**
                  * The width of the border surrounding each tree map item.
                  */
@@ -3209,7 +3241,7 @@
                         /**
                          * The border color for the hovered state.
                          */
-                        borderColor: "#999999" /* neutralColor40 */,
+                        borderColor: "#999999" /* Palette.neutralColor40 */,
                         /**
                          * Brightness for the hovered point. Defaults to 0 if the
                          * heatmap series is loaded first, otherwise 0.1.
@@ -3240,6 +3272,7 @@
         }(ScatterSeries));
         extend(TreemapSeries.prototype, {
             buildKDTree: noop,
+            colorAttribs: ColorMapComposition.seriesMembers.colorAttribs,
             colorKey: 'colorValue',
             directTouch: true,
             drawLegendSymbol: LegendSymbol.drawRectangle,
@@ -3254,6 +3287,7 @@
                 recursive: TreemapUtilities.recursive
             }
         });
+        ColorMapComposition.compose(TreemapSeries);
         SeriesRegistry.registerSeriesType('treemap', TreemapSeries);
         /* *
          *
@@ -3351,7 +3385,7 @@
 
         return TreemapSeries;
     });
-    _registerModule(_modules, 'Series/Sunburst/SunburstPoint.js', [_modules['Series/DrawPointComposition.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DrawPointComposition, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Sunburst/SunburstPoint.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
         /* *
          *
          *  This module implements sunburst charts in Highcharts.
@@ -3384,7 +3418,8 @@
         var Point = SeriesRegistry.series.prototype.pointClass,
             TreemapPoint = SeriesRegistry.seriesTypes.treemap.prototype.pointClass;
         var correctFloat = U.correctFloat,
-            extend = U.extend;
+            extend = U.extend,
+            wrap = U.wrap;
         /* *
          *
          *  Class
@@ -3440,22 +3475,21 @@
                 if (this.dataLabelPath) {
                     this.dataLabelPath = this.dataLabelPath.destroy();
                 }
+                // All times
                 this.dataLabelPath = renderer
                     .arc({
                     open: true,
                     longArc: moreThanHalf ? 1 : 0
                 })
-                    // Add it inside the data label group so it gets destroyed
-                    // with the label
-                    .add(label);
-                this.dataLabelPath.attr({
+                    .attr({
                     start: (upperHalf ? start : end),
                     end: (upperHalf ? end : start),
                     clockwise: +upperHalf,
                     x: shapeArgs.x,
                     y: shapeArgs.y,
                     r: (r + shapeArgs.innerR) / 2
-                });
+                })
+                    .add(renderer.defs);
                 return this.dataLabelPath;
             };
             SunburstPoint.prototype.isValid = function () {
@@ -3468,7 +3502,6 @@
             haloPath: Point.prototype.haloPath,
             setState: Point.prototype.setState
         });
-        DrawPointComposition.compose(SunburstPoint);
         /* *
          *
          *  Defaul Export
@@ -3750,7 +3783,7 @@
                     if (point.innerArcLength < 1 &&
                         point.outerArcLength > shape.radius) {
                         rotationRad = 0;
-                        // Triger setTextPath function to get textOutline etc.
+                        // Trigger setTextPath function to get textOutline etc.
                         if (point.dataLabelPath && rotationMode === 'circular') {
                             options.textPath = {
                                 enabled: true
@@ -3774,7 +3807,7 @@
                     else {
                         // Trigger the destroyTextPath function
                         if (point.dataLabel &&
-                            point.dataLabel.textPathWrapper &&
+                            point.dataLabel.textPath &&
                             rotationMode === 'circular') {
                             options.textPath = {
                                 enabled: false
@@ -4088,7 +4121,7 @@
                         if (s.dataLabelsGroup) {
                             s.dataLabelsGroup.animate({
                                 opacity: 1,
-                                visibility: 'visible'
+                                visibility: 'inherit'
                             });
                         }
                     };
@@ -4264,7 +4297,7 @@
             SunburstSeries.prototype.translate = function () {
                 var series = this,
                     options = series.options,
-                    positions = series.center = getCenter.call(series),
+                    positions = series.center = series.getCenter(),
                     radians = series.startAndEndRadians = getStartAndEndRadians(options.startAngle,
                     options.endAngle),
                     innerRadius = positions[3] / 2,
@@ -4361,6 +4394,7 @@
              * @product      highcharts
              * @requires     modules/sunburst.js
              * @optionparent plotOptions.sunburst
+             *
              * @private
              */
             SunburstSeries.defaultOptions = merge(TreemapSeries.defaultOptions, {
@@ -4408,6 +4442,13 @@
                  * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
                  * @apioption plotOptions.sunburst.levels.color
                  */
+                /**
+                 * Determines whether the chart should receive one color per point based
+                 * on this level.
+                 *
+                 * @type      {boolean}
+                 * @apioption plotOptions.sunburst.levels.colorByPoint
+                 */
                 /**
                  * Can set a `colorVariation` on all points which lies on the same
                  * level.
@@ -4481,6 +4522,8 @@
                  * @type    {Array<number|string>}
                  * @default ["50%", "50%"]
                  * @product highcharts
+                 *
+                 * @private
                  */
                 center: ['50%', '50%'],
                 colorByPoint: false,
@@ -4488,10 +4531,14 @@
                  * Disable inherited opacity from Treemap series.
                  *
                  * @ignore-option
+                 *
+                 * @private
                  */
                 opacity: 1,
                 /**
                  * @declare Highcharts.SeriesSunburstDataLabelsOptionsObject
+                 *
+                 * @private
                  */
                 dataLabels: {
                     allowOverlap: true,
@@ -4523,6 +4570,8 @@
                  * Which point to use as a root in the visualization.
                  *
                  * @type {string}
+                 *
+                 * @private
                  */
                 rootId: void 0,
                 /**
@@ -4530,6 +4579,8 @@
                  * set to false the first level visible when drilling is considered
                  * to be level one. Otherwise the level will be the same as the tree
                  * structure.
+                 *
+                 * @private
                  */
                 levelIsConstant: true,
                 /**
@@ -4539,6 +4590,8 @@
                  *         Sunburst with various sizes per level
                  *
                  * @since 6.0.5
+                 *
+                 * @private
                  */
                 levelSize: {
                     /**
@@ -4586,6 +4639,8 @@
                  *         Sliced sunburst
                  *
                  * @since 6.0.4
+                 *
+                 * @private
                  */
                 slicedOffset: 10
             });
@@ -4593,6 +4648,9 @@
         }(TreemapSeries));
         extend(SunburstSeries.prototype, {
             drawDataLabels: noop,
+            getCenter: getCenter,
+            // Mark that the sunburst is supported by the series on point feature.
+            onPointSupported: true,
             pointAttribs: ColumnSeries.prototype.pointAttribs,
             pointClass: SunburstPoint,
             utils: SunburstUtilities