Dfyjkt

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

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.