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

Answer 1

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

Answer 2

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 [email protected] --save npm install [email protected] --save 

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