Ng2-charts: embedding chart.js lib is mandatory

[graphicsxp]

I'm pulling my hair out trying to get ng2-charts working with my ionic2 application. I have modified rollup config file of ionic in order to copy chart.js to the build folder :

  {
    src: 'node_modules/chart.js/dist/Chart.js',
    dest: 'www/build/chart.js'
  }   

Now it is correctly copied over and when I load my application the file is found. Yet, I'm getting this error in the console:

error_handler.js:47EXCEPTION: Error in ./Page1 class Page1 - inline template:16:16 caused by: ng2-charts configuration issue: Embedding Chart.js lib is mandatory

I've imported the ChartsModule in app.module.ts :

import {ChartsModule} from 'ng2-charts/components/charts/charts';

and also in the imports statement of the module :

@NgModule({
  declarations: [
   MyApp,
   Page1,
   Page2,
   OrderFormListComponent,
    OrderFormDetailComponent
  ],
   imports: [
    ChartsModule, 
   IonicModule.forRoot(MyApp)
    ],

I don't know what else to do.... Any idea ?

[ajhurwitz]

I had the 'Embedding Chart.js lib is mandatory' issue before and fixed it by importing chart.js with

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

in my index.html.

Hopefully this works!

[graphicsxp]

yes, but I already do that. I can tell the file is found in the network tab of chrome, there is 200 response.

[jayhuang75]

Same error here, even I using this <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

[graphicsxp]

I fixed it. It's because ionic2 is now using rollup so I had to modify the rollup.config.js file and add:

 commonjs({
    namedExports: {
        'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule'],            
    }

[mikebarr58]

I'm running into this same issue but with a slightly different setup. I've got an Angular2 project created via the angular-cli with a simple new project call. I am following the pie chart example from the Git page exactly.

I've got this in my pie chart component: import { ChartsModule } from 'ng2-charts/ng2-charts';

In app.module.js, I've got this: import { ChartsModule } from 'ng2-charts/ng2-charts';
and in the imports this: ChartsModule

I edited my system.config.js to have this line: 'ng2-charts/ng2-charts': 'node_modules/ng2-charts/ng2-charts.js'

And I've added this line: <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

to index.html and when that failed the component.html instead.

When it comes time in the app for the chart to render, I get the dreaded "ng2-charts configuration issue: Embedding Chart.js lib is mandatory"

[mikebarr58]

Was able to get it working by removing this line entirely:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

and then in the angular-cli.json file, in the scripts section, using this:

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

[leozulfiu]

If you are working with the angular cli then add
"../node_modules/chart.js/dist/Chart.bundle.js" to your scripts variable in angular-cli.json

[binarious]

@leozulfiu This doesn't work for me. Still getting Embedding Chart.js lib is mandatory.

[tanzeelrana]

was missing

In my index.html file

[matheushf]

a hack solution is to go in your app.component.ts and just initialize one Chart component, like:

import {Chart} from 'chart.js';

@ViewChild('barCanvas') barCanvas;

  constructor() {
      ionViewDidLoad() {
        this.barChart = new Chart(this.barCanvas.nativeElement, { });
      }
  }

this way you don't need to import the chart.min.js file in your index.html

[sxmon]

@matheushf Can you explain more what to do for the hack ?

[nick-jonas]

I fixed it by just putting this in my index.html:

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

However I'm curious how this can be included in webpack config?

[sxmon]

Ok I am using your solution.

[karan182020]

@nick-jonas Your solution is working. Thank you very much.

[danil-farafontov]

Using cdn works. But if you want to work it in offline too then add
import 'chart.js/src/chart.js';
to src/app/app.module.ts file instead of embedding in index.html.
Embedding from node_modules directory doesn't work for some reason.

[ahmadalibaloch]

If you are using WebPack then referencing in Index.html is going to be a problem when bundling. To let webpack handle this, 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
]

[sxmon]

I think it does not work for multi-labels barCharts. The display is broken.

It only displays the bar of the first label with @ahmadalibaloch solution. With
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
it works.

[dfa1234]

@danil-farafontov Your solution is the best I think
We shouldn't touch to index.html and with ionic not the hidden webpack.config file neither
So just import 'chart.js/src/chart.js'; in the main app.component is fine, I tested its work

[benscabbia]

This fixed it as pointed out by @leozulfiu :+1:

add "../node_modules/chart.js/dist/Chart.bundle.js" to your scripts variable in angular-cli.json

I accidentally put: ../../node_modules. Took me a good 30mins to spot the issue