Error while implementing Angular Google Chart in Angular (Type 'string' is not assignable-CodePudding

I am getting this error while building project. I have install angular-google-charts using this command:

chart npm install angular-google-charts --legacy-peer-deps

error TS2322: Type 'string' is not assignable to type 'ChartType'.
[type]="chartData.type"

my component.ts:

import { Component } from '@angular/core';

@Component({
   selector: 'app-stock-performance-chart',
   templateUrl: './stock-performance-chart.component.html',
   styleUrls: ['./stock-performance-chart.component.css']
})
export class StockPerformanceChartComponent {
    chartData = {
        type: 'BarChart',
        data: [
                ["PHP Books",  500],
                [".Net Books",  800],
                ["Java Books",  400],
              ],
       chartColumns: ['Books', 'Sell'],
       width: 1000,
       height: 400
   };
}

my component.html:

<google-chart  
     [type]="chartData.type" 
     [data]="chartData.data" 
     [columns]="chartData.chartColumns" 
     [width]="chartData.width"
     [height]="chartData.height">
 
</google-chart>

my app.module.ts:

import { GoogleChartsModule } from 'angular-google-charts';  

....
imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    GoogleChartsModule
 ],
   providers: [],
   bootstrap: [AppComponent]
})
....

CodePudding user response：

I changed chart type from string to ChartType.BarchChart and it worked fine.

import { ChartType, GoogleChartsModule } from 'angular-google-charts'; 

//type: 'BarChart'   this DID NOT WORK

type: ChartType.BarChart, //this is working fine

CodePudding user response：

Since charData type property accepts ChartType enum

TypeScript is telling us that we are trying to assign a specific string value to a variable that has a type of ChartType

Try this:

    chartData = {
        type: ChartType.BarChart,
        data: [
                ["PHP Books",  500],
                [".Net Books",  800],
                ["Java Books",  400],
              ],
       chartColumns: ['Books', 'Sell'],
       width: 1000,
       height: 400
   };