'Angular Type '{ domain: string[]; }' is not assignable to type 'string | Color'

I am using ngx-charts with Angular 12 and I'm getting this error message then I use this:

colorScheme = {
  domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

The error message is:

Type '{ domain: string[]; }' is not assignable to type 'string | Color'.

How can I fix this?

Solution 1:^[1]

Use the ngx-charts version 18 or below.

The scheme type [scheme]="colorScheme", is asking for a string but the type you are providing is an object.

The latest version 19 or above as scheme type is of string | color.

Solution 2:^[2]

ngx-charts version 19 or above accepts only types string or Color (from here), and to expand on another answer:

String examples include "cool", "natural", "vivid", etc from the preset color schemes in this file.
Color example to set your own custom scheme:

import { Color, ScaleType } from '@swimlane/ngx-charts';
export class foo {
  colorScheme: Color = {
    name: 'myScheme',
    selectable: true,
    group: ScaleType.Ordinal,
    domain: ['#f00', '#0f0', '#0ff'],
  };
}

<ngx-charts-area-chart 
 ...
 [scheme]="colorScheme"
></ngx-charts-area-chart>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gaurav Shrestha
Solution 2	entozoon

'Angular Type '{ domain: string[]; }' is not assignable to type 'string | Color'

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]