Search code examples
angularchart.jsangular7chart.js2

Chart.js error: type lacks a call signature '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' in Angular


When deployed angular app to Heroku, I am getting an error

error TS2349: Cannot invoke an expression whose type lacks a call signature. Type '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' has no compatible call signatures.

But I don't have such type of code inside this component the error is showing. So this seems the chart.js type lack issue or mismatch @types/chart.js version.

Following versions are being used

"chart.js": "^2.8.0",
"@types/chart.js": "^2.7.52"

Update

<div style="display: block;">
    <canvas #myChart baseChart 
            [datasets]="lineChartData" 
            [labels]="lineChartLabels" 
            [options]="lineChartOptions"
            [colors]="lineChartColors" 
            [legend]="lineChartLegend" 
            [chartType]="lineChartType"
          (chartClick)="onChartClick($event)">
    </canvas>
</div>

in .ts file

this.lineChartData[0].data = [0]
this.lineChartData[0].data = [1]
this.lineChartData[0].data = [2]

Solution

  • Actually [datasets]="lineChartData" has two types. One is number[] and other is ChartPoint[] so to store data as number we need to type-cast data as

    (this.lineChartData[0].data as number[]).push(1)
    

    HTML

    <div style="display: block;">
        <canvas #myChart baseChart [datasets]="lineChartData"></canvas>
    </div>