1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: The charts in MDB Angular is throwing an error?

salman1793 pro asked 6 years ago

Hi,I am using charts in my application but I am getting this error: Input <mdb-simple-chart [percent]=\"56\" [barColor]=\"\'4CAF50\'\"></mdb-simple-chart> <h5><spanclass=\"badge green\">Sales <iclass=\"fa fa-arrow-circle-up\"></i></span></h5> Console error: ng:///AppModule/AboutmeComponent.ngfactory.js:61 ERROR TypeError: Cannot read property \'duration\' of undefinedat SimpleChartComponent.ngOnInit (webpack-internal:///../../../../../src/app/typescripts/pro/easy-charts/chart-simple.component.ts:43)at checkAndUpdateDirectiveInline (webpack-internal:///../../../core/esm5/core.js:12596)at checkAndUpdateNodeInline (webpack-internal:///../../../core/esm5/core.js:14123)at checkAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14066)at debugCheckAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14959)at debugCheckDirectivesFn (webpack-internal:///../../../core/esm5/core.js:14900)at Object.eval [as updateDirectives] (ng:///AppModule/AboutmeComponent.ngfactory.js:73)at Object.debugUpdateDirectives [as updateDirectives] (webpack-internal:///../../../core/esm5/core.js:14885)at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14032)at callViewAction (webpack-internal:///../../../core/esm5/core.js:14383)View_AboutmeComponent_0 @ ng:///AppModule/AboutmeComponent.ngfactory.js:61proxyClass @ webpack-internal:///../../../compiler/esm5/compiler.js:14868DebugContext_.logError @ webpack-internal:///../../../core/esm5/core.js:15226ErrorHandler.handleError @ webpack-internal:///../../../core/esm5/core.js:1684(anonymous) @ webpack-internal:///../../../core/esm5/core.js:6111ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:388Zone.run @ webpack-internal:///../../../../zone.js/dist/zone.js:138NgZone.runOutsideAngular @ webpack-internal:///../../../core/esm5/core.js:4897ApplicationRef.tick @ webpack-internal:///../../../core/esm5/core.js:6111ApplicationRef._loadComponent @ webpack-internal:///../../../core/esm5/core.js:6170ApplicationRef.bootstrap @ webpack-internal:///../../../core/esm5/core.js:6058(anonymous) @ webpack-internal:///../../../core/esm5/core.js:5778PlatformRef._moduleDoBootstrap @ webpack-internal:///../../../core/esm5/core.js:5778(anonymous) @ webpack-internal:///../../../core/esm5/core.js:5699ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:388onInvoke @ webpack-internal:///../../../core/esm5/core.js:4949ZoneDelegate.invoke @ webpack-internal:///../../../../zone.js/dist/zone.js:387Zone.run @ webpack-internal:///../../../../zone.js/dist/zone.js:138(anonymous) @ webpack-internal:///../../../../zone.js/dist/zone.js:870ZoneDelegate.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:421onInvokeTask @ webpack-internal:///../../../core/esm5/core.js:4940ZoneDelegate.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:420Zone.runTask @ webpack-internal:///../../../../zone.js/dist/zone.js:188drainMicroTaskQueue @ webpack-internal:///../../../../zone.js/dist/zone.js:594ng:///AppModule/AboutmeComponent.ngfactory.js:61 ERROR CONTEXT DebugContext_ Could you please help me fix this?

Damian Gemza staff answered 6 years ago

Hi salman1793,

you have to use code below:

 

<mdb-simple-chart percent="56" barColor="4CAF50" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>

<h5><span class="badge green">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>

If you define some configuration options like barColor, trackColor etc..., you have to write it without square brackets. But defining an [animate]="{duration: , enabled: }" is necessary for easy charts.

Please try to follow my advices. If it won't work, please let me know.

Best Regards,
Damian

salman1793 pro commented 6 years ago

Hi Damian, Thank you for your reply. I followed your advice and now everything is working fine. Regards, Salman Mujtaba

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
salman1793
Pro User 77Support score
9Questions 7Answers 0Snippets