8

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.

2 Answers 2

15

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)

7
0

There is example Chart.js from 4.0.1 + version, like I resolved

    import { Chart, ChartType } from 'chart.js/auto';

    chartTypes: {[key: string]: ChartType} = {
       line: 'line',
       bar: 'bar'
    };

    //...code
    lineChartType = this.lineChartType['line'];

    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.