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


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

enter image description here

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

  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 

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

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

I thank you in advance for your help.


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

Answer Checked By – Katrina (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *