Cuando importo ChartDataSets , aparece un mensaje de error en line-chart.component.ts
'"chart.js"' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?ts(2724no entiendo donde esta el problema ¿Olvidé instalar una biblioteca?
Mi código se presenta así en line-chart.component.ts
import { Component, } from '@angular/core'; import { ChartDataSets, ChartOptions } from 'chart.js'; import { Color, Label } from 'ng2-charts'; @Component({ selector: 'app-line-chart', templateUrl: './line-chart.component.html', styleUrls: ['./line-chart.component.css'] }) export class LineChartComponent { lineChartData: ChartDataSets[] = [ { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' }, ]; lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June']; lineChartOptions = { responsive: true, }; lineChartColors: Color[] = [ { borderColor: 'black', backgroundColor: 'rgba(255,255,0,0.28)', }, ]; lineChartLegend = true; lineChartPlugins = []; lineChartType = 'line'; } En line-chart.component.html tengo esto:
<div class="chart-wrapper"> <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" [plugins]="lineChartPlugins"> </canvas> </div> Luego en app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ChartsModule } from 'ng2-charts'; import { AppComponent } from './app.component'; import { LineChartComponent } from './line-chart/line-chart.component'; @NgModule({ declarations: [ AppComponent, LineChartComponent ], imports: [ BrowserModule, ChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Te agradezco de antemano por tu ayuda.
Eso sucedió debido a la incompatibilidad de versiones. Intente cambiar ChartDataSets a ChartDataSet .
Aquí hay una muestra de trabajo en StackBlitz
También puedes ver esto
"ng2-charts": "^2.4.2", "chart.js": "^2.9.3",