html file

 <div style="width: 100%; display: block">
      <canvas
        *ngIf="loaded"
        baseChart
        [data]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        
      >
      </canvas>
    </div>

ts.file

 barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] =[];
  loaded = false;

this.service.Salescount(form).subscribe((data) => {
      this.name = data.result;
      this.barChartLabels = this.name.map((item) => item.name);
      this.barChartData = this.name.map((item) => item.sales);
      this.loaded = true;
})

There are 4 values in barchart.labels and barchartdata. While running i m getting error as " Type 'string' is not assignable to type 'ChartType'"

And also I have imported ChartModules in app.module.ts

html file

 <div style="width: 100%; display: block">
      <canvas
        *ngIf="loaded"
        baseChart
        [data]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        
      >
      </canvas>
    </div>

ts.file

 barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] =[];
  loaded = false;

this.service.Salescount(form).subscribe((data) => {
      this.name = data.result;
      this.barChartLabels = this.name.map((item) => item.name);
      this.barChartData = this.name.map((item) => item.sales);
      this.loaded = true;
})

There are 4 values in barchart.labels and barchartdata. While running i m getting error as " Type 'string' is not assignable to type 'ChartType'"

And also I have imported ChartModules in app.module.ts

• javascript
• angular
• typescript
• chart.js
• ng2-charts

• Which version of chart.js are you using? – LeeLenalee Commented Dec 14, 2021 at 16:25
• It appears that you are passing a string to a value which expects a CharType but is nowhere to be seen – Nibia Commented Dec 14, 2021 at 16:27
• i m using "chart.js": "^2.9.4", "ng2-charts": "^2.4.2" – Mohamed Irshath Commented Dec 14, 2021 at 16:37
• I got the answer . I just changed chartType datatype from string to any . – Mohamed Irshath Commented Dec 14, 2021 at 16:42
• 1 @FazariaAsira any should be avoided as much as possible – Vimal Patel Commented Dec 14, 2021 at 16:47

2 Answers 2

Change your barChartType type from string to ChartType and import it from chart.js.

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
public barChartType: ChartType = 'bar';

Demo: https://stackblitz./edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.ponent.ts

Maybe if you change CharType datatype to any?