Angular Primeng: ERROR ReferenceError: Chart is not defined at UIChart.initChart (chart.js:53)

Question

Angular Primeng: ERROR ReferenceError: Chart is not defined at UIChart.initChart (chart.js:53)

Imported:

"../node_modules/chart.js/dist/Chart.js",

"../node_modules/chart.js/dist/Chart.bundle.js",

"../node_modules/chart.js/dist/Chart.min.js",

"../node_modules/chart.js/dist/Chart.bundle.min.js"

import { Chart } from 'chart.js';

import { ChartModule } from 'primeng/primeng';

Answer 1

From your question and code it is not very clear what are the steps you followed to achieve this. If you follow the Primeng documentation properly you can achieve this easily. Below is the step by step detail which I followed to run the chart.

I am using:

• Angular 6
• primeng: ^6.0.0
• chart.js: ^2.7.2

First of all install chart js.

npm install chart.js --save

Now add the chartjs in your angular.json file.

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
]

it is not necessary to use "../" in your script. If your node_module and angular.json file at the same level then use like below and this is the default behavior :

 "scripts": [
    "node_modules/chart.js/dist/Chart.js",
]

In app.module.ts

Import only ChartModule do not import from Chart.js as you mentioned in your question.

import {ChartModule} from 'primeng/chart';

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

Now in you component.html :

<p-chart type="line" [data]="data"></p-chart>

component.ts:

data: any;
ngOnInit() {

this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: '#4bc0c0'
                },
                {
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderColor: '#565656'
                }
            ]
        }
}

That's all we need to do.

Answer 2

It seems that all of these answers focus in properly installing PrimeNG and Chart.js. One of the other things you need to check is if the proper JS files are being bundled and built with your application. This could be a Webpack / CommonJS problem.

In Angular and other platforms, when your app is built, it bundles your scripts into one file and attaches that file to your index page. If the Chart.JS script does not get bundled, Chart, the class PrimeNG depends on to build your graph will not be there.

The easiest answer may be to just add the Chart.JS script reference in the tag.

Answer 3

I had that same error but I have resolved it in the end . I was working with

• Angular 8
• primeng: ^8.0.0

when I have just installed Chart.Js using

npm install chart.js --save

The latest version of Chart.js was installed (3.3.2) and the error above showed to me too .

what put me in the way is this paragraph in the official documentation of Chart.js https://www.chartjs.org/docs/master/developers/ and I quote them:

Previous versions

To migrate from version 2 to version 3, please see the v3 migration guide.

Version 3 has a largely different API than earlier versions.

Most earlier version options have current equivalents or are the same.

Please note - documentation for previous versions are available online or in the GitHub repo.

Then I downgraded to [email protected] and everything went fine .

Answer 4

This question already has an accepted answer but, for the record, I ran into the exact same "chart.js" error in Angular 9 and the root cause was that I was importing a component without the full path. I was doing this:

import {DropdownModule} from "primeng";

Instead of this:

import {DropdownModule} from "primeng/dropdown";

And that gave me the "chart.js" error... As soon as I imported the correct path (bottom one), the chart.js error went away. I saw some other responses like that on Stackoverflow for other components which had similar issues (mis-importing somecomponent) even in previous angular versions. So, this definitely still happens in angular9 if you don't import your components the right way.