chart.js has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'? ts(2724)

Question

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'?

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.

@Yong Shun: It's the version -> `3.5.0` I follow the tutoriel [here](https://www.positronx.io/angular-chart-js-tutorial-with-ng2-charts-examples/) — Alison, Aug 06 '21 at 10:58

score 5 · Answer 1 · answered Aug 06 '21 at 10:59

5

That happened because of version incompatibility. Try to change ChartDataSets to ChartDataSet.

Here is working sample on StackBlitz

Also you can see this

answered Aug 06 '21 at 10:59

Alireza Ahmadi

8,579
5
15
42

3

Thank you Alireza,. I will use your graph. For information: `ChartDataSets` to `ChartDataSet`. do not change anything. – Alison Aug 06 '21 at 12:45
4

I managed to fix the problem switching from "ChartDataSets" to "ChartDataset" – Marco C. Dec 19 '21 at 15:24

score 2 · Answer 2 · answered Mar 18 '22 at 22:41

2

"ng2-charts": "^2.4.2", "chart.js": "^2.9.3",

answered Mar 18 '22 at 22:41

Ib Abayomi Alli

361
3
6

score 1 · Accepted Answer · answered Feb 02 '23 at 19:03

1

Install type chart

npm install @types/chart.js

answered Feb 02 '23 at 19:03

Rajitha Udayanga

1,559
11
21

score 0 · Answer 4 · answered Jul 29 '23 at 20:55

0

you need to upgrade the version:

   "chart.js": "^4.0.0",
    "react-chartjs-2": "^5.0.0",

see here: https://codesandbox.io/s/github/reactchartjs/react-chartjs-2/tree/master/sandboxes/doughnut/default?from-embed=&file=/package.json

Package JSON file.

answered Jul 29 '23 at 20:55

fruitloaf

1,628
15
10

chart.js has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'? ts(2724)

4 Answers4