Highcharts PIE chart series color doesn't change

Question

Pie charts series color doesn't work on my angularjs application. It selects some predefined colors (as seen in image). But when I try to recreate the issue on jsfiddle it works as expected.

here is the working fiddle:

https://jsfiddle.net/gmwbck5q/1

this is the angularjs component definition:

(function () {
    'use strict';

    angular.module('comp.components')
        .component('dashboardHcChart', {
            template: '<div></div>',
            controller: DashboardHCChart,
            bindings: {
                chartConfig: '<'
            }
        });

    function DashboardHCChart($element) {

        this.$onInit = () => {
            Highcharts.chart($element[0], this.chartConfig);
        };
    }
})();

here is what i get with the same code on my angularjs application:

https://imgur.com/a/B5krLan

Answer 1

You can refer solution here: jsFiddle.

There might be some error with your chartConfig object.

Answer 2

Finally I found what was the problem. I've imported the highcharts SCSS file to my project:

@import "node_modules/highcharts/css/highcharts.scss";

and I'm guessing this was overwriting the configuration I was providing to each chart. (Am I correct?)