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:

<script src="node_modules/chart.js/src/chart.js"></script>

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

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

[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:

<div style="display: block"> <!-- add this div -->
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

[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'
      }
}

4. 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
      ]
    )}

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

6. 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