[Fixed] How to make a chart with chartjs and Angular?

Issue

I’m trying to make a graph with ChartJS, but I can’t get it…

I have followed a lot of tutorials but I get the same problem always.

This is my app.module:

import { ChartsModule } from 'ng2-charts/ng2-charts';

@NgModule({
  declarations: [
    ...
    ...
    ...
  ],
  imports: [
    ...
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my angular.json:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/apexcharts/dist/apexcharts.min.js"
]

My component.ts:

import { Component, OnInit } from '@angular/core';
import { ChartDataset } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'app-stadistics',
  templateUrl: './stadistics.component.html',
  styleUrls: ['./stadistics.component.css']
})

export class LineChartComponent {

  lineChartData: ChartDataset[] = [
    { 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';
  
}

export class StadisticsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

And finally, my html component, where I get the following error:

I don’t know what it happens, but I can’t find the solution…

How can I solve this?

Thanks!

EDIT

I share my package.json:

{
  "name": "foro-front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.9",
    "@angular/common": "~11.0.9",
    "@angular/compiler": "~11.0.9",
    "@angular/core": "~11.0.9",
    "@angular/forms": "~11.0.9",
    "@angular/platform-browser": "~11.0.9",
    "@angular/platform-browser-dynamic": "~11.0.9",
    "@angular/router": "~11.0.9",
    "@popperjs/core": "^2.9.1",
    "apexcharts": "^3.26.0",
    "bootstrap": "^4.5.3",
    "chart.js": "^3.1.0",
    "jquery": "^3.6.0",
    "mdb-ui-kit": "^3.3.0",
    "moment": "^2.29.1",
    "ng-apexcharts": "^1.5.9",
    "ng2-charts": "^2.4.2",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.6.0",
    "save": "^2.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "~11.0.9",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Solution

I think ng2-charts might not play well with chart.js version 3.0.0+, try to install an older version:
npm install [email protected] --save.

Also, I’m not sure if your html has the baseChart directive added (because the picture is cut with the error), it should look something like:

<canvas 
  baseChart 
  [datasets]="barChartData" 
  [labels]="barChartLabels" 
  [options]="barChartOptions"
  [legend]="barChartLegend" 
  [chartType]="barChartType">
</canvas>

Finally, here is a minimal example of adding chart.js to your application – stackblitz