How to edit the default colors on Styled mode pie - Highscharts?

Question

I tried editing the pie slice colors but it is filling in the label line also. How to avoid this issue? https://codepen.io/jenfloods/pen/WNRELrP Also, how to apply the stroke color outside? I've gone to the Highcharts documentation and it is not clear with This type of pie chart. https://www.highcharts.com/demo/styled-mode-pie (default colors shown)

Answer 1

The connectors also have highcharts-color-x class and because of the fact that you redefine the color classes, they inherit styles from the other. As a solution add fill: none style for highcharts-data-label-connector class.

.highcharts-color-0 { fill: #e5ebed; stroke:#000000; }
.highcharts-color-1 { fill: #b2c3cb; stroke:#000000; }
.highcharts-color-2 { fill: #ccd7dc; stroke:#000000; }
.highcharts-color-3 { fill: #99afb9; stroke:#000000; }
.highcharts-color-4 { fill: #7f9ba8; stroke:#000000; }
.highcharts-color-5 { fill: #668797; stroke:#000000; }
.highcharts-color-6 { fill: #4c7385; stroke:#000000; }
.highcharts-color-7 { fill: #325f74; stroke:#000000; }

.highcharts-data-label-connector {
    fill: none;
}

---

Live demo: http://jsfiddle.net/BlackLabel/ng62q9ej/