Ng2-charts: Embedd Chart.js

[bene-starzengruber]

Hey guys!

I'm trying to use ng2-charts in my app, but I get following error

EXCEPTION: Uncaught (in promise): Error: Error in ./Skillset class Skillset - inline template:5:10 caused by: ng2-charts configuration issue: Embedding Chart.js lib is mandatory Error: ng2-charts configuration issue: Embedding Chart.js lib is mandatory at BaseChartDirective.getChartBuilder

I already installed ng2-charts and chart.js via npm.
Where can I embedd Chart.js in an Angular2 app? (it's already in the vendor.browser.ts - file)

Thanks

[limjoonae]

me too

[schrej]

The easiest way is to just include the Chart.min.js from node_modules/chart.js/dist/Chart.min.js

[jkon]

I was having this problem too because my project is set up in a way that the node_modules weren't getting served in a way that I could reference them in my index.html to embed Chart.js from there. I just used the cdn instead. It means I need an internet connection for testing all the time, but it works just fine for me.
https://cdnjs.com/libraries/Chart.js

[MrFragStealer]

I'm having the same issue in an Angular CLI app, and I'm also not sure where to embed.
I added the line"../node_modules/chart.js/src/chart.js" to angular-cli.json to the scripts array, but it didn't work. (also tried adding here schrej's suggestion Chart.min.js but no luck).

I tried adding <script src="node_modules/chart.js/src/chart.js"></script> to my index.html file and also to the corresponding component template. But none of these solved the issue.

Edit: SOLVED:
If you use Angular CLI you only need to add this to the scripts array in angular-cli.json
"../node_modules/chart.js/dist/Chart.bundle.min.js"

[HtetWaiYanLin]

hay guys

please insert your index.html.

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

[Cuica20]

Guys,
In your component.ts insert this:

import 'chart.js'

[edgarfroes]

After @MrFragStealer 's solution, stop and restart your application. Live reload won't do the trick.

[ahmadalibaloch]

Do this in your main.ts below your other imports:

import * as Chart from 'chart.js';
window['Chart'] = Chart;

you must have already done this:

npm install ng2-charts --save
npm install chart.js --save

and

// In your App's module:
import { ChartsModule } from 'ng2-charts/ng2-charts';
imports: [
   ChartsModule
]

[clintonjnelson]

@EdgarSalazar 's tip to restart the application reminded me that changes to the angular-cli config (.angular-cli.json), requires the ng build --watch be stopped/restarted to apply the updated configuration. Doh! Working great now.

[lukibsubekti]

You don't need to include the script in index.html, just do what @Cuica20 or @ahmadalibaloch suggest, both work for me. But, don't forget to update chart.js to latest version. I just spent an hour to find a way, I reliazed my chart.js was still v1.1.1 then I upgraded to latest (2.5.0) and it worked.

[rabee1981]

for offline instead of using CDN
1- open https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js in the browser and copy the content of the page
2- create new folder "chartjs" under assests
3- create file under the new folder and call it Chart.bundel.min.js
4- copy the content to the file
5- in index.html add <script src="assets/chartjs/Chart.bundle.min.js"></script>

[paviad]

This package is now updated for Angular 7. It is now no longer required to embed chart.js manually in your index.html or in angular.json. Please see the demo app for reference (it is also updated). If this issue persists, please provide a codepen/stackblitz/... example showing the issue.