ngx bar chart not working

[kkakroo]

Describe the bug Ngx Vertical bar chart is not working in serve PROD

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior Bar Chart should load with data

Screenshots If applicable, add screenshots to help explain your problem.

Demo Provide an online demo (stackblitz, codesandbox, or similar) where the issue can be reproduced

ngx-charts version 10.1.0, even present for 12.0.1

Additional context The issue only exists when we do ng serve --prod with optimization and buildOptimizer as true(we cannot turn these off for PROD), otherwise it works fine. We have our application on angular 7 with below configuration.

Angular JSON: "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, } }

Package JSON: "@angular/animations": "7.2.7", "@angular/common": "7.2.7", "@angular/compiler": "7.2.7", "@angular/core": "7.2.7", "@angular/fire": "5.0.2", "@angular/flex-layout": "7.0.0-beta.23", "@angular/cdk": "7.3.1", "@angular/forms": "7.2.7", "@angular/http": "7.2.7", "@angular/platform-browser": "7.2.7", "@angular/platform-browser-dynamic": "7.2.7", "@angular/router": "7.2.7", "@swimlane/ngx-charts": "10.1.0",

"devDependencies": { "@angular-devkit/build-angular": "0.13.9", "@angular/cli": "^7.3.3", "@angular/compiler-cli": "7.2.7", "@angular/language-service": "7.2.7", "@types/jasmine": "2.8.3", "@types/jasminewd2": "2.0.2", "@types/node": "6.0.60", "codelyzer": "4.0.1", "jasmine-core": "2.99.1", "jasmine-spec-reporter": "4.2.1", "karma": "2.0.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.2.1", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.1.2", "ts-node": "4.1.0", "tslint": "5.9.1", "typescript": "3.2.4" }

ERROR IN CONSOLE: 2019-11-19T06:22:36.870Z [ERROR] ERROR: TypeError: (void 0) is not a function at Sf (defaultLocale.js.pre-build-optimizer.js:4) at Function.n.tickFormat (linear.js.pre-build-optimizer.js:15) at n.update (y-axis-ticks.component.js.pre-build-optimizer.js:60) at n.ngOnChanges (y-axis-ticks.component.js.pre-build-optimizer.js:34) at core.js.pre-build-optimizer.js:22117 at core.js.pre-build-optimizer.js:23378 at Ry (core.js.pre-build-optimizer.js:23327) at rv (core.js.pre-build-optimizer.js:23865) at Object.updateDirectives (y-axis.component.d.ts.YAxisComponent.html:3) at Object.updateDirectives (core.js.pre-build-optimizer.js:23653) at ky (core.js.pre-build-optimizer.js:23306) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at Object.ky [as checkAndUpdateView] (core.js.pre-build-optimizer.js:23312) at e.detectChanges (core.js.pre-build-optimizer.js:21687) at core.js.pre-build-optimizer.js:18118 at Array.forEach (<anonymous>) at e.tick (core.js.pre-build-optimizer.js:18118) at core.js.pre-build-optimizer.js:18009 at t.invoke (zone.js.pre-build-optimizer.js:391) at Object.onInvoke (core.js.pre-build-optimizer.js:17298) at t.invoke (zone.js.pre-build-optimizer.js:390) at n.run (zone.js.pre-build-optimizer.js:150) at e.run (core.js.pre-build-optimizer.js:17212) at Object.next (core.js.pre-build-optimizer.js:18009) at t.o [as _next] (core.js.pre-build-optimizer.js:13514) at t.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:194) at t.next (Subscriber.js.pre-build-optimizer.js:132) at t._next (Subscriber.js.pre-build-optimizer.js:76) at t.next (Subscriber.js.pre-build-optimizer.js:53) at t.next (Subject.js.pre-build-optimizer.js:47)

and 2019-11-19T06:22:36.910Z [ERROR] ERROR: TypeError: e.transform is not a function at Object.updateRenderer (y-axis-ticks.component.d.ts.YAxisTicksComponent.html:3) at Object.updateRenderer (core.js.pre-build-optimizer.js:23655) at ky (core.js.pre-build-optimizer.js:23311) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at ky (core.js.pre-build-optimizer.js:23312) at Gy (core.js.pre-build-optimizer.js:23547) at Vy (core.js.pre-build-optimizer.js:23510) at ky (core.js.pre-build-optimizer.js:23307) at Gy (core.js.pre-build-optimizer.js:23547) at jy (core.js.pre-build-optimizer.js:23489) at Object.ky [as checkAndUpdateView] (core.js.pre-build-optimizer.js:23312) at e.detectChanges (core.js.pre-build-optimizer.js:21687) at core.js.pre-build-optimizer.js:18118 at Array.forEach (<anonymous>) at e.tick (core.js.pre-build-optimizer.js:18118) at core.js.pre-build-optimizer.js:18009 at t.invoke (zone.js.pre-build-optimizer.js:391) at Object.onInvoke (core.js.pre-build-optimizer.js:17298) at t.invoke (zone.js.pre-build-optimizer.js:390) at n.run (zone.js.pre-build-optimizer.js:150) at e.run (core.js.pre-build-optimizer.js:17212) at Object.next (core.js.pre-build-optimizer.js:18009) at t.o [as _next] (core.js.pre-build-optimizer.js:13514) at t.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:194) at t.next (Subscriber.js.pre-build-optimizer.js:132) at t._next (Subscriber.js.pre-build-optimizer.js:76) at t.next (Subscriber.js.pre-build-optimizer.js:53) at t.next (Subject.js.pre-build-optimizer.js:47) at t.emit (core.js.pre-build-optimizer.js:13498) at Ah (core.js.pre-build-optimizer.js:17267)

[Kinjal10]

Having the same issue.Did someone find the solution?

[pstyrna]

+1, me too

[kkakroo]

There are new versions out of d3 and it's dependencies which will be included by ^ used here . for eg. d3-brush has been updated from 1.1.3 to 1.1.4. Could this be the reason.

[RicardoFR]

+1, the same issue.

Trying to lock the versions with npm shrinkwrap atm.

[TmanTman]

I'm sure it's related to issues with the Angular CLI. The production build optimiser removes important code from the libraries. The suggested fix is to change the angular-cli build process - not sure how that can be done in a maintainable way.

A related issue on ngx-charts due to the issue: https://github.com/swimlane/ngx-charts/issues/1305

More information on the angular/cli issue: https://github.com/angular/angular-cli/issues/11439

Looking forward to suggestions to a fix. Have thought about including minified libraries in the assets folder and loading it in index.html. Just not sure how that can be done effectively.

From what I can tell from this ticket and the related commit, this will be fixed in Angular 9. https://github.com/angular/angular-cli/pull/14187 https://github.com/angular/angular-cli/commit/9a9939fc4eb92f50241bc1e46b6623505a587bc5

[RicardoFR]

We have added the flag to disable this feature on prod build while the bug is fixed

ng build --prod --build-optimizer=false

[TmanTman]

Thanks @RicardoFR for the suggestion. Unfortunately that leaves us with a bundle size that is too big for our clients to reliably download. Ideally just disabling a single step in the optimizer process (pure_getters: buildOptions.buildOptimizer, from https://github.com/angular/angular-cli/blob/3108ce30ab429cff581b888a5f88118d3400ad99/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L221) you can get small builds that still work perfectly.

Just not sure how to customise the angular build process to do this.

[kkakroo]

We didn't had an option to turn the build optimizer off as our app was in PROD. The issue was because the d3 and it's dependencies have recently updated their version. When we used the old package-lock.json, it was running fine. So you can either: 1) update old package-lock.json's d3 dependencies of your newly generated lock file. 2) add the below packages in your solution. "d3-array": "1.2.4", "d3-brush": "1.1.3", "d3-color": "1.4.0", "d3-force": "1.2.1", "d3-format": "1.4.1", "d3-hierarchy": "1.1.8", "d3-interpolate": "1.3.2", "d3-scale": "1.0.7", "d3-selection": "1.4.0", "d3-shape": "1.3.5", "d3-time-format": "2.2.1"

This will override the ones which have recently got updated , causing the issues.

Will it be fine if we use specific versions instead of automatically updated ones due to ^ here cz that fixed it or me . I think that should fix the issue.

Shall i raise the PR for that if it's okay?

[redmission84]

@kakroo Same issue here. Glad you solved it! For your #1 point, what exactly did you do? And for #2, what version of the main d3 package did you use, and with what version of ngx-charts?

[TmanTman]

Posting this in duplicate as I think #1305 is the same issue. A combination of the following version numbers removed this issue for me:

"@angular/animations": "8.2.14", "@angular/cdk": "8.2.3", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/forms": "8.2.14", "@angular/material": "8.2.3", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14", "d3": "~4.13.0", ---> I use D3 outside of ngx-charts, so have got this as its own dependency. "@swimlane/ngx-charts": "^12.0.1", ----> Would be good to fix this version number

[kkakroo]

@kakroo Same issue here. Glad you solved it! For your #1 point, what exactly did you do? And for #2, what version of the main d3 package did you use, and with what version of ngx-charts? @redmission84 , for 1), we looked for the old package-lock.json and just replaced the references for d3 & it's dependent packages with the version i have specified above. But after that we need to make sure that no one deletes the package-lock. for 2), we are using d3 5.9.2.

[Hypercubed]

I believe the next version with ng9 support will fix this issue.

[mifhud]

I have error like this

In angular 6 with "@swimlane/ngx-charts": "^8.1.0" I tried this step

We didn't had an option to turn the build optimizer off as our app was in PROD. The issue was because the d3 and it's dependencies have recently updated their version. When we used the old package-lock.json, it was running fine. So you can either:

1. update old package-lock.json's d3 dependencies of your newly generated lock file.
2. add the below packages in your solution. "d3-array": "1.2.4", "d3-brush": "1.1.3", "d3-color": "1.4.0", "d3-force": "1.2.1", "d3-format": "1.4.1", "d3-hierarchy": "1.1.8", "d3-interpolate": "1.3.2", "d3-scale": "1.0.7", "d3-selection": "1.4.0", "d3-shape": "1.3.5", "d3-time-format": "2.2.1"

This will override the ones which have recently got updated , causing the issues.

Will it be fine if we use specific versions instead of automatically updated ones due to ^ here cz that fixed it or me . I think that should fix the issue.

Shall i raise the PR for that if it's okay?

834, #847, #936 but still not working for me.

Did someone know the solution?

[Vandivier]

@Hypercubed I updated to 13.0.1 and now I get: Cannot read property 'kind' of undefined

I'm still using ng8. Do you know whether 13.0.1 is intended to be compatible?

@kakroo - the below didn't work for me with ng ~8.2.0 and ngx charts ~13.0.1 or ~12.0.1

So you can either:

1. update old package-lock.json's d3 dependencies of your newly generated lock file.
2. add the below packages in your solution. "d3-array": "1.2.4", "d3-brush": "1.1.3", "d3-color": "1.4.0", "d3-force": "1.2.1", "d3-format": "1.4.1", "d3-hierarchy": "1.1.8", "d3-interpolate": "1.3.2", "d3-scale": "1.0.7", "d3-selection": "1.4.0", "d3-shape": "1.3.5", "d3-time-format": "2.2.1"

[TeodorKolev]

angular : ^7.1.1 ngx-charts: ^13.0.1 produce:

ERROR in ./node_modules/@swimlane/ngx-charts/fesm5/swimlane-ngx-charts.js

Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):

TypeError: Cannot read property 'kind' of undefined

Any solution for this one?

[acgrama]

Same problem (build--prod ok, app runs, but chart is not loaded) with ngx-charts: "^10.1.0" and Angular 6.1.

EDIT: Works by upgrading to Angular 8.2.7.

[harshajayaweeraXHJ]

I have error like this

In angular 6 with "@swimlane/ngx-charts": "^8.1.0" I tried this step

We didn't had an option to turn the build optimizer off as our app was in PROD. The issue was because the d3 and it's dependencies have recently updated their version. When we used the old package-lock.json, it was running fine. So you can either:

1. update old package-lock.json's d3 dependencies of your newly generated lock file.
2. add the below packages in your solution. "d3-array": "1.2.4", "d3-brush": "1.1.3", "d3-color": "1.4.0", "d3-force": "1.2.1", "d3-format": "1.4.1", "d3-hierarchy": "1.1.8", "d3-interpolate": "1.3.2", "d3-scale": "1.0.7", "d3-selection": "1.4.0", "d3-shape": "1.3.5", "d3-time-format": "2.2.1"

This will override the ones which have recently got updated , causing the issues. Will it be fine if we use specific versions instead of automatically updated ones due to ^ here cz that fixed it or me . I think that should fix the issue. Shall i raise the PR for that if it's okay?

834, #847, #936 but still not working for me.

Did someone know the solution?

Getting the same error. Did you find a solution for that?

[TeodorKolev]

Why this issue is closed?

[infornite]

Same issue

[msalmankarim]

Getting the same issue.

[dafma]

Hemos agregado la bandera para deshabilitar esta función en la compilación de prod mientras se corrige el error

ng build --prod --build-optimizer=false this work