[![enter image description here][1]][1]
There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts.
If you look at the code snippet below, you can see that for Chrome specifically, the pie slice and Legend colors do not align.
// Generating the chart
Highcharts.chart('container-donut', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
cursor: 'pointer',
showInLegend: true,
}
},
series: [{
name: 'browsers',
data: [
{
name: 'Chrome',
y: 60 ,
className: 'MyCustomColor'
},
{ name: 'Internet Explorer', y: 5 },
{ name: 'Firefox', y: 5 },
{ name: 'Edge', y: 5 },
{ name: 'Safari', y: 5 },
{ name: 'Other', y: 5 }
]
}]
});.MyCustomColor {
fill: green;
}<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-donut" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="container-column" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>