Ng2-charts: Unable to load chart.js in Angular 4 project

[devinvail]

Styarted having problems with chartjs in my large NG2 project which is using the Angular 2 seed. To simplify things, I just tried using the Angular cli quickstart Tour of Heroes project.

I have run the npm installs for ng-chart and chart.js.
I have put the import statement in the index.html file:

Nevertheless, it can't seem to load the chart.js file:

ERROR: GET http://localhost:4200/node_modules/chart.js/src/chart.js

[bfan1256]

This won't work as when it is serving, it is not serving the node_modules along with the project. You would either have to use a cdn like below:

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

Or you can input the chart.js under the scripts array in the .angular.cli.json like below:

{
"apps" : { 
    "scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/chart.js/dist/Chart.bundle.min.js"
    ]
}

[arkadiuszcelej]

Hi, you don't have to add this script if you are using angular-cli. If I am not mistaken angular-cli should pack ng2-charts lib(and other from node_modules) and add it automatically to your index.html

[bfan1256]

@arkadiuszcelej is correct with that, do not worry about importing the chart bundle.

[skofgar]

I can confirm that removing it works automatically in Angular CLI as described by @arkadiuszcelej

Initially I imported it and got weird error messages.

"scripts": [
        "../node_modules/chart.js/src/chart.js"
      ],

This always caused me to get the error message:
Chrome: Uncaught ReferenceError: require is not defined
Safari: ReferenceError: Can't find variable: require

The error messages went away by using a _dist_ version:

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

but I ended up just removing the line:

"scripts": [
      ],

[nitshar]

I am running into the same issues of Chrome but on edge it works just fine.
I am not using angular cli so I have included the below line in the index.cshtml

[nitshar]

and I see below error:
Error loading https://localhost:44387/chart.js as "chart.js" from https://localhost:44387/node_modules/ng2-charts/charts/charts.js

[jcroll]

I wrapped my chart in a container div with display: block like charts in the demo app and the chart miraculously appeared for the first time:
```html

[Aofhero]

My way

1. npm install ng2-charts --save
2. npm install chart.js --save <-- don't forget install
3. Config

paths: {
    'ng2-charts': 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js'
},
packages: {
'ng2-charts': {
        main: 'ng2-charts.js',
        defaultExtension: 'js'
      }
}

1. import module *I'm not import app.module but import chart in module uesed, U can try
   import { ChartsModule } from 'ng2-charts/ng2-charts';

   NgModule({
      imports: [
         CommonModule,
         ChartsModule
      ]
    )}

1. My index.html I do not insert this code
   <script src="node_modules/chart.js/src/chart.js"></script>

2. Test by copy code from http://valor-software.com/ng2-charts/

[RBurrage]

@jcroll: Thank you for the tip. Once I wrapped my canvas in a div, the chart displayed, but then I removed the 'display: block' part and it still displays.

[anilsingh581]

It might helps you guys,
http://www.code-sample.com/2017/09/ionic-3-and-angular-4-charts.html

Thanks,
Anil

[suraj-ankola]

It's Perfect 👍

Thanks Anil

[prcbass]

I had to use import { ChartsModule } from 'ng2-charts/ng2-charts';

instead of

import { ChartsModule } from 'ng2-charts';

[Ubaldo1002]

I had the same issue, I did everything but still didn't work, so, what I did I re installed node_modules ( desperation got me ), so I delete the folder node_modules and i execute the npm install.. somehow this clean the environment and got new libraries..

[f22hd]

I resolved by move importing to angular.json
"scripts: [ "./node_modules/chart.js/src/chart.js" ]"

note : no need to import the file in index.html

[paviad]

This package is now updated for Angular 7. If this issue persists, please provide a codepen/stackblitz/... example showing the issue.

[RuudVerhoef]

I resolved by move importing to angular.json
"scripts: [ "./node_modules/chart.js/src/chart.js" ]"

note : no need to import the file in index.html

This worked for me. Thanks man, you saved me a lot of time.

[ishwara-bhat]

Thanks a lot. It really helped!
For me this helped, with angular 8.
My revised steps.

1. npm install ng2-charts --save
2. npm install chart.js --save <-- don't forget install
   [Your 3. Config. This was not necessary for me. ]
3. For radar chart I had to add this in my chart component.ts
   import { ChartsModule } from 'ng2-charts/ng2-charts';
   import { ChartDataSets, ChartType, RadialChartOptions } from 'chart.js'; //Reference: https://valor-software.com/ng2-charts/#RadarChart
4. Your step

NgModule({
imports: [
CommonModule,
ChartsModule
]
)}

Additional Reference project: https://angular-radar-chart.stackblitz.io

[shallonkobusinge]

You don't need the chartjs script in your angular json
I also had
"scripts": ["node_modules/chart.js/src/chart.js",
"node_modules/chart.js/dist/chart.js"]
in my Angular json file.
So I removed them and adding typing to chartjs with
npm install --save @types/chart.js did the trick for me.

Plus you give the div which holds the canvas display:block;