CODEWITHSUNDEEP
angularchartsng2-charts
Enrique GF
Enrique GF

Reputation: 1295

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

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

Upvotes: 40

Views: 59564

Answers (7)

Soy Diabs
Soy Diabs

Reputation: 142

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,
],

Upvotes: 1

CHIRANJIB SWAIN
CHIRANJIB SWAIN

Reputation: 1

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.

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

Upvotes: 0

Sinh Nguyễn Đức
Sinh Nguyễn Đức

Reputation: 711

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

Upvotes: 1

Eyayu Tefera
Eyayu Tefera

Reputation: 931

for angular 12.2.2 below dependencies version worked for me

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

Upvotes: 4

ammad khan
ammad khan

Reputation: 1154

You have to update ng2-charts

npm install [email protected]

Upvotes: 10

S J BHAVANA
S J BHAVANA

Reputation: 1501

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.

Upvotes: 35

Venkatesh K
Venkatesh K

Reputation: 721

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

Upvotes: 58

Related Questions