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

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.