Highchart pie chart colors are not changing

Question

I'm trying to create a pie chart with custom colors. My legend colors update just fine but the pie itself is not changing its colors. I've tried many different ways like setOptions:

Highcharts.setOptions({ colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });

Or change color for each pie separately in series:

series: [{ type: 'pie', keys: ['name', 'y', 'color'], data: [ { name: "KPI", y: 60, color: '#f3c200' }, { name: "-KPI", y: 0, color: '#e87e04' }, { name: "Remains", y: 40, color: '#e2000f' } ], size: '60%', innerSize: '40%', showInLegend: true, dataLabels: { enabled: false } }]

And other methods too, but the output is always the same, legend color changed, pie colors did not. When I test my code in a fiddle it works just fine, so it's a local issue, but I do not see where, because every piece of code is the same. So I'm not sure is it a bug, missing package, or imported styles. Please advise if you faced this issue. Here's my code in a fiddle: "http://jsfiddle.net/vnfkw9ds/"

In this post, Rohitesh in the comments had the same issue, but it was never resolved: https://stackoverflow.com/a/10074739/11745912

Hi @urasavidi, Here is probably a reproducetion of the problem: jsfiddle.net/BlackLabel/23vfjwLt When you are using a styled mode, you can only style a chart by CSS. You can learn more about it here: highcharts.com/docs/chart-design-and-style/style-by-css — ppotaczek

urasavidi urasavidi · Accepted Answer · 2021-04-23T15:01:57

Ok, looks like if you add highcharts.css to you styles you cannot do any color modifications for some reason. Could not find an answer for two days, but after posting it here, the answer found me.

Highchart pie chart colors are not changing

1 Answers