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

user_17003028 0
Viewed 1888

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?

ngx-charts angular12 angular
3 Answers

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.

user_89907310

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>
user_30987730

This will work

import { Color, ScaleType } from '@swimlane/ngx-charts';

colorScheme: Color = { 
    domain: ['#99CCE5', '#FF7F7F'], 
    group: ScaleType.Ordinal, 
    selectable: true, 
    name: 'Customer Usage', 
};

Github: Typing of Color is incorrect

user_124903860
Related