7

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';
Radhika Kandasamy
  • 161
  • 1
  • 3
  • 12

4 Answers4

13

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.

DirtyMind
  • 2,353
  • 2
  • 22
  • 43
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.

Pierre
  • 2,335
  • 22
  • 40
  • 1
    I was confused as to why my Angular 9 project apparently required me to install chart.js and FullCalendar when I was not actually using any of those PrimeNG components. Your answer was the solution for me – I was importing a component `from "primeng";` and after changing that to `from "primeng/"` I did not get any errors about needing those libraries anymore. Thanks! – vtamm May 24 '21 at 10:35
1

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 Chart.js@2.9.2 and everything went fine .

hichem hamdaoui
  • 148
  • 1
  • 13
0

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.

Theo Spencer
  • 1