CODEWITHSUNDEEP
angulartypescriptchart.jsng2-charts
Mahfuz Shuvo
Mahfuz Shuvo

Reputation: 135

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

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.

Upvotes: 9

Views: 14977

Answers (2)

Paulo Berezini
Paulo Berezini

Reputation: 200

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'];

Upvotes: 0

Yong Shun
Yong Shun

Reputation: 51270

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)

Upvotes: 16

Related Questions