Chart JS +ng2-charts not working on Angular+2

Question

Hello developers i have been literally the whole day trying to implement charts on my proyect , but following the official docs there is not way i could rid off this error :

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'
 node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~
    src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '"../../../../node_modules/chart.js/types/index.esm"' has no exported member 'pluginService'.
    
    6 import { ChartType,pluginService} from 'chart.js';
                         ~~~~~~~~~~~~~
    

Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8
6 unchanged chunks

Time: 2109ms

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'

ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21
"export 'pluginService' was not found in 'chart.js'
    
    ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                   ~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'ChartPoint'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                ~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 
'PluginServiceGlobalRegistration'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
    
    4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
    
    32     chart: Chart;
                  ~~~~~
    node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
    
    56     getChartBuilder(ctx: string): Chart;
                                         ~~~~~

All this when I'm trying to implement ng2-charts wrapping chart.js from its official site through the commands:

npm install --save ng2-charts

npm install --save chart.js

My package.json has this structure:

{
  "name": "front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@mapbox/mapbox-gl-geocoder": "^4.7.0",
    "@ngrx/effects": "^10.1.2",
    "@ngrx/store": "^10.1.2",
    "@ngrx/store-devtools": "^10.1.2",
    "@swimlane/ngx-charts": "^17.0.1",
    "@swimlane/ngx-datatable": "^19.0.0",
    "angular-datatables": "^11.1.1",
    "bootstrap": "^4.6.0",
    "chart.js": "^3.0.1",
    "chartjs-plugin-datalabels": "^0.7.0",
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "jquery": "^3.6.0",
    "mapbox-gl": "^2.2.0",
    "ng2-charts": "^2.4.2",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/datatables.net": "^1.10.18",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.33",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

And the ChartModule is implemented in the app.module, as well as the modularized component I might be setting the charts at.

I'm not sure why this situation. Any help would be amazing. Thanks in advance

chart.js recently upgraded to version 3. and ng2charts still on the same vserion 2.4.2 so there might be possibility that ng2charts does not have compatibility with new version of chart.js btw I am also struggling with this issue. — Tushar Rmesh Saindane, Apr 05 '21 at 12:58

score 58 · Accepted Answer · edited Apr 04 '21 at 07:29

58

I too got the similar problem. I am not sure about the fix.I have resolved by downgrading the charts packages to "ng2-charts": "^2.3.0" and "chart.js": "^2.9.3".

edited Apr 04 '21 at 07:29

Dharman

30,962
25
85
135

answered Apr 04 '21 at 07:24

Venkatesh K

721
1
8
9

2

Although this still gives you the bailout warning in Angular11 - "CommonJS or AMD dependencies can cause optimization bailouts" Moving to chart.js 3 or higher should get rid of the warning if we could get it to work. – Chewy Apr 12 '21 at 13:24
In case if you want to get rid out of that bailout warning, please include **chart.js** in "allowedCommonJsDependencies" array in angular.json file. – Venkatesh K Apr 18 '21 at 06:23
2

Instead of downgrading, why not upgrade to ng2-charts@v3.0.0-rc.3 I can confirm upgrading solves this problem. – Vingtoft Jun 26 '21 at 08:23
@ammadkhan I dont know how to tag your answer in a comment. If this triggers you, may I suggest you do it yourself. – Vingtoft Jun 26 '21 at 08:47
Thanks for the response. Shame this isn't just in their docs... – Preston Oct 12 '21 at 00:01

score 34 · Answer 2 · edited Apr 09 '21 at 08:34

The reason for the charts not working in angular maybe because of the version compatibility, I am working with angular 11.2.0, npm 6.14.11 & node v15.13.0. I was facing the below-mentioned issue with charts.

Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:17:23 - error TS2724: '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported  member named 'ChartDataSets'. Did you mean 'ChartDataset'?

17     datasets: chartJs.ChartDataSets[];
                         ~~~~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:33:12 - error TS2304: Cannot find name 'Chart'.

33     chart: Chart;
              ~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:57:35 - error TS2304: Cannot find name 'Chart'.

57     getChartBuilder(ctx: string): Chart;
                                     ~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:6:57 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'ChartPoint'.

6 export declare type SingleDataSet = (number[] | chartJs.ChartPoint[]);
                                                          ~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:7:56 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'ChartPoint'.

7 export declare type MultiDataSet = (number[] | chartJs.ChartPoint[])[];
                                                         ~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:115 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.

9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions;
                                                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:73 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no  exported member 'PluginServiceGlobalRegistration'.

9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions;

this issue can be resolved by installing the compatible version of chart.js and ng2-charts using below command:

npm install chart.js@2.9.3 --save
npm install ng2-charts@2.2.3 --save

in your project then run npm i and restart the project.

score 10 · Answer 3 · edited Aug 23 '21 at 19:16

10

You have to update ng2-charts

npm install ng2-charts@v3.0.0-rc.3

edited Aug 23 '21 at 19:16

Vingtoft

13,368
23
86
135

answered Jun 23 '21 at 09:18

ammad khan

1,022
1
10
14

score 4 · Answer 4 · answered Aug 27 '21 at 21:16

4

for angular 12.2.2 below dependencies version worked for me

   "ng2-charts": "^2.4.2",`
   "chart.js": "^2.9.3",`

answered Aug 27 '21 at 21:16

Eyayu Tefera

771
9
9

score 1 · Answer 5 · answered Oct 07 '21 at 02:55

The same issue for incompatible b/w ng2-charts and chart.js.

Fixed:

"chart.js": "^2.9.4",

"ng2-charts": "^2.4.2"

Angular CLI: 9.0.3
Node: 16.10.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.3
@angular-devkit/core         9.0.3
@angular-devkit/schematics   9.0.3
@schematics/angular          9.0.3
@schematics/update           0.900.3
rxjs                         6.5.3

I wish to use chart.js 3 version because it has my desired feature and I am updating from v2 to v3. — Muhammad Ahsan, Feb 16 '22 at 09:11

score 1 · Answer 6 · answered Jul 06 '22 at 14:35

Hello i faced the same problem here's the solution hope it will work for you. First you need to install Ng chart using --legacy-peer-pers

npm install --save ng2-charts --legacy-peer-deps

Then in your app.Module.ts

import { NgChartsModule } from 'ng2-charts';

and

NgModule[],

imports: [

   NgChartsModule,
],

score 0 · Answer 7 · answered Mar 09 '22 at 05:37

For Angular 12.2.16 i have used "chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7", "ng2-charts": "^2.3.0" and that is working for me.

change the dependencies version to the above version in Package.json .
Just delete your node_modules folder.
Then do npm -install --save.
Restart the server.

Chart JS +ng2-charts not working on Angular+2

7 Answers7

Linked