error TS2322: Type 'string' is not assignable to type 'keyof ChartTypeRegistry'

Question

home.component.ts

global: boolean = false;
country!: string;
data: GlobalData;
dailyData: any[] = [];
countries: any[] = [];
lineChartData: any[] = [
  {
    data: [65, 64, 33, 44],
    label: 'Temp label'
  }
];
lineChartType = "line";
lineChartLabels: any[] = [
  'label01', 'label02', 'label03'
];
barChartData: any[] = [
  {
      data: [65, 76, 33],
      label: 'Label'
  }
];

home.component.html

<canvas baseChart
    [chartType] = "lineChartType"
    [datasets] = "lineChartData"
    [labels] = "lineChartLabels"
>
</canvas>

Error:

Type 'string' is not assignable to type 'keyof ChartTypeRegistry'

Error-line:

[chartType] = "lineChartType"

The error occurred in home.component.html

I need a solution. Try to find out the solution on google but I couldn't find it.

Answer 1

FYI, ChartTypeRegistry was introduced by chart.js in version 3.0 and later.

Hence, I conclude that you installed chart.js that is incompatible with the latest ng2-chart (version 2.4.2).

To reproduce the same issue, I have installed chart.js version 3.4 as the link below:

Sample project (chart.js v 3.4)

---

Solution (chart.js version before 3.0)

According to ng2-charts - npm,

You need to install chart.js with:

npm install [email protected]

OR

npm install @types/[email protected]

Sample solution (chart.js v 2.9.4)

---

Solution (chart.js version 3.0 and later)

Specify lineChartType with ChartType type.

import { ChartType } from 'chart.js';

public lineChartType: ChartType = "line";

Sample solution (chart.js v 3.0)