Hi Andrew,
I am doing it in the similar way. Just that I am assigning brushes color dynamically like –

public brushes: any =[]

var brushes = [‘#FFFBBD’, ‘#FFD3A8’, ‘#FFD8D8’];
brushes.filter((x, index) => {
if (count[index] != 0) {
this.brushes.push(x);
this.outlinebrushes.push(outlinebrushes[index])
}
})
It is based on some condition we are assigning the brushes color, it is not fixed.
Sometimes brushes can contain only one value or sometimes two values.

I am sending you the versions which I am using in my project, just for your reference to understand better :-

1. We have a infragistics licenced version

2. Following is the styles we are using in angular.json :-
"styles": [
“node_modules/bootstrap/dist/css/bootstrap.min.css”,
“node_modules/font-awesome/css/font-awesome.css”,
“node_modules/ngx-ui-switch/ui-switch.component.css”,
“node_modules/@infragistics/igniteui-angular/styles/igniteui-angular.css”,
“node_modules/@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css”,
//”node_modules/@infragistics/ignite-ui-full/en/css/structure/infragistics.css”,
“src/styles.css”
]

3. Following is the versions we are using in package.json :-
"@angular/cli": "9.1.14",
"igniteui-angular-charts": "^9.1.2",
"igniteui-angular-core": "^9.1.2",
"igniteui-angular-wrappers": "^9.1.1"

Please let me know the solution.

Thank you in Advance!