Fixed #7371, sunburst chart failed in styled mode.

js/mixins/draw-point.js

@@ -34,6 +34,9 @@ var draw = function draw(params) {
 			}
 		});
 	}
+	if (graphic) {
+		graphic.addClass(point.getClassName(), true);
+	}
 };
 
 export default draw;

js/mixins/tree-series.js

@@ -76,6 +76,7 @@ var getColor = function getColor(node, options) {
 		point,
 		level,
 		colorByPoint,
+		colorIndexByPoint,
 		color,
 		colorIndex;
 	function variation(color) {
@@ -102,9 +103,14 @@ var getColor = function getColor(node, options) {
 				!!series.options.colorByPoint
 			)
 		);
+
 		if (getColorByPoint) {
-			colorByPoint = colors[(point.index % colors.length)];
+			colorIndexByPoint = point.index %
+				(colors ? colors.length : series.chart.options.chart.colorCount);
+			colorByPoint = colors && colors[colorIndexByPoint];
 		}
+
+		/*= if (build.classic) { =*/
 		// Select either point color, level color or inherited color.
 		color = pick(
 			point && point.options.color,
@@ -113,9 +119,11 @@ var getColor = function getColor(node, options) {
 			parentColor && variation(parentColor),
 			series.color
 		);
+		/*= } =*/
 		colorIndex = pick(
 			point && point.options.colorIndex,
 			level && level.colorIndex,
+			colorIndexByPoint,
 			parentColorIndex,
 			options.colorIndex
 		);

js/modules/sunburst.src.js

@@ -436,7 +436,6 @@ var sunburstSeries = {
 				level = levelMap[node.levelDynamic],
 				shapeExisting = point.shapeExisting || {},
 				shape = node.shapeArgs || {},
-				attrStyle = series.pointAttribs(point, point.selected && 'select'),
 				animationInfo,
 				onComplete,
 				visible = !!(node.visible && node.shapeArgs);
@@ -482,7 +481,13 @@ var sunburstSeries = {
 			}
 			point.draw({
 				animate: animationInfo.to,
-				attr: extend(animationInfo.from, attrStyle),
+				attr: extend(
+					animationInfo.from,
+					series.pointAttribs && series.pointAttribs(
+						point,
+						point.selected && 'select'
+					)
+				),
 				onComplete: onComplete,
 				group: group,
 				renderer: renderer,
@@ -506,7 +511,9 @@ var sunburstSeries = {
 			Series.prototype.drawDataLabels.call(series);
 		}
 	},
+	/*= if (build.classic) { =*/
 	pointAttribs: seriesTypes.column.prototype.pointAttribs,
+	/*= } =*/
 
 	/*
 	 * Set the shape arguments on the nodes. Recursive from root down.

samples/highcharts/css/sunburst/demo.css

@@ -0,0 +1,11 @@
+@import 'https://code.highcharts.com/css/highcharts.css';
+
+#container {
+	min-width: 310px;
+	max-width: 800px;
+	margin: 0 auto
+}
+.highcharts-sunburst-series .highcharts-point {
+    stroke: white;
+    stroke-width: 1px;
+}

samples/highcharts/css/sunburst/demo.details

@@ -0,0 +1,6 @@
+---
+ name: Sunburst Styled Mode
+ authors:
+   - Torstein Hønsi
+ js_wrap: b
+...

samples/highcharts/css/sunburst/demo.html

@@ -0,0 +1,4 @@
+<script src="https://code.highcharts.com/js/highcharts.js"></script>
+<script src="https://code.highcharts.com/js/modules/sunburst.js"></script>
+
+<div id="container"></div>