Primeng: Chart is not defined error

[murathazer]

when we try to use doughnutChart component following error occurs;

angular2.dev.js:23730 ReferenceError: Chart is not defined
    at DoughnutChart.initChart (http://localhost:8080/node_modules/primeng/components/chart/doughnutchart/doughnutchart.js:91:30)
    at DoughnutChart.ngAfterViewInit (http://localhost:8080/node_modules/primeng/components/chart/doughnutchart/doughnutchart.js:62:14)
    at AbstractChangeDetector.ChangeDetector_FrontPageComponent_0.afterViewLifecycleCallbacksInternal (viewFactory_FrontPageComponent:119:82)
    at AbstractChangeDetector.afterViewLifecycleCallbacks (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:9924:12)

"angular2": "2.0.0-beta.11",
"primeng": "^0.8.1",
"primeui": "^4.1.5"

[cagataycivici]

Welcome to PrimeNG, you also need to add charts.js to your page.

[Faigjaz]

I've got the same Problem. chart.js implemented before angular-chartjs.

Chart is not defined. Error occurs within my .html.

[abbas-innotical]

@cagataycivici
Could you please give a working example of chart using primeng ?
and from where we have to add chart.js ?

[leexiaozheng]

@abbas-innotical
Could you please give a working example of chart using primeng ?
and from where we have to add chart.js ?

[mornir]

I would also like to see a working example of chart using primeng in order to see how to add it.

[JakeSummers]

Adding:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

To my index.html page, resolved this issue for me.

[bomberblue07]

Y'know, the fact you have to import Chart.js isn't really mentioned on the showcase...

[dyrleif]

wow thank you , I would never have found this out.

[merlosy]

Hi!
I am working with angular (v2+) in Typescript, I added:

npm install --save chart.js
npm install --save-dev @types/chart.js

But still couldn't work with a simple:
import { Chart } from 'chart.js';
I have an issue. It seems chart.js is not typescript friendly..

[cagataycivici]

Yes;

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

Added this info to chart docs as well.

[d668]

it doesn't work this way may be because the scripts are loaded at the bottom of the page

[cagataycivici]

It works for me;

https://www.primefaces.org/ultima-ng/#/charts

[d668]

hm yeah that works indeed https://github.com/intergleam/test-primeng

[eheb]

In .angular-cli.json i add :+1: "scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
I get this issue : ERROR in multi script-loader!./~/chart.js/dist/Chart.js
Module not found: Error

[eheb]

@cagataycivici where can i find the to chart docs in your post on 11 march ?

[jwiesmann]

I had a similar issue ReferenceError: Chart is not defined funny thing was, that i had to change the order of how my javascript was loaded (same issue i had before with quill.js)

What i did:
added ChartModule to my module.ts (plus imports)

installed chart.js

npm install --save chart.js
npm install --save-dev @types/chart.js

added script to .angular-cli.json

NOT WORKING (in .angular-cli.json)


"../node_modules/quill/dist/quill.js",
"../node_modules/angular2-indexeddb/angular2-indexeddb.js",
"../node_modules/chart.js/dist/Chart.bundle.js"


WORKING (in .angular-cli.json)


"../node_modules/quill/dist/quill.js",
"../node_modules/chart.js/dist/Chart.bundle.js",
"../node_modules/angular2-indexeddb/angular2-indexeddb.js"


I do not really have an idea why it is like that... but that worked for me..

[mahesh5b5]

@jwiesmann thanks ! :)

[kosnet2]

1. In package.json add at the _dependencies_

"chart.js": "^2.7.2",

1. In angular.json add at the _scripts_

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

1. _run_ npm install

[borriej]

Thanks! The docs should really be updated about installation. I only needed ng prime charts and ran into the same issue. @kosnet2 solution for the win