I am trying out ngx-charts library in Angular 12 and I keep getting this issue:
Type 'any[]' is not assignable to type '[number, number]'.
Target requires 2 element(s) but source may have fewer.
I don't know what the error means.
Here is the code:
HTML:
<ngx-charts-linear-gauge
[view]="view"
[scheme]="colorScheme"
[value]="value"
[previousValue]="previousValue"
(select)="onSelect($event)"
[units]="units"
>
</ngx-charts-linear-gauge>
ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
single: any[];
view: any[] = [400, 400];
colorScheme = {
domain: ['#aae3f5']
};
value: number = 43;
previousValue: number = 70;
units: string = 'counts';
onSelect(event) {
console.log(event);
}
}
Any ideas on what the error means, how to fix this?
ts config code is:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
I guess the issue is the type of you view
property. According to the docs it must be of type number[]
: doc-ref
note: the type in the docs is not exact enough. view
is not defined as array of number (number[]
), but as a tuple of 2 numbers ([number, number]
) - source-code ref
But you define it as any[]
.
Depending on your typescript compiler settings, you may get an error or warning.
The explict type would be:
view: [number, number] = [400, 400];
See more examples and details in this Stackblitz example