Issue
When I import ChartDataSets I have an error message on line-chart.component.ts
'"chart.js"' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?ts(2724
I don't understand where is the problem? I forgot to install a library?
My code is presented like this on 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';
}
On line-chart.component.html I have this:
<div class="chart-wrapper">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins">
</canvas>
</div>
Then on 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 { }
I thank you in advance for your help.
Solution
That happened because of version incompatibility. Try to change ChartDataSets to ChartDataSet.
Here is working sample on StackBlitz
Also you can see this
Answered By - Alireza Ahmadi

0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.