Charts is not displaying with beta12. 'mousemove' errors

[kuncevic]

I just created a project based on https://github.com/preboot/angular2-webpack and copied the charts over to play with. But getting an errors:

lang.js:352 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
line-chart-demo.ts:17 line demo
linechart.ts:19 Hello Chart
browser_adapter.js:85 EXCEPTION: Error during evaluation of "mousemove"
browser_adapter.js:76 EXCEPTION: Error during evaluation of "mousemove"BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ORIGINAL EXCEPTION: TypeError: Cannot read property 'getPointsAtEvent' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:68(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 TypeError: Cannot read property 'getPointsAtEvent' of undefined
    at BaseChart.hover (charts.ts:190)
    at AbstractChangeDetector.ChangeDetector_BaseChart_0.handleEventInternal (viewFactory_BaseChart:37)
    at AbstractChangeDetector.handleEvent (abstract_change_detector.js:57)
    at AppView.triggerEventHandlers (view.js:221)
    at eval (viewFactory_BaseChart:84)
    at dom_renderer.js:282
    at dom_events.js:28
    at ZoneDelegate.invoke (angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
    at ZoneDelegate.invoke (angular2-polyfills.js:331)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:72(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 EventEvaluationErrorContext {element: canvas, componentElement: base-chart.chart, context: BaseChart, locals: Object, injector: Injector}BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:73(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
angular2-polyfills.js:267 Uncaught EXCEPTION: Error during evaluation of "mousemove"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'getPointsAtEvent' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'getPointsAtEvent' of undefined
    at BaseChart.hover (http://localhost:8080/js/app.bcd202a3021246321f81.js:1:13978)
    at AbstractChangeDetector.ChangeDetector_BaseChart_0.handleEventInternal (viewFactory_BaseChart:37:24)
    at AbstractChangeDetector.handleEvent (http://localhost:8080/js/common.bcd202a3021246321f81.js:11:6607)
    at AppView.triggerEventHandlers (http://localhost:8080/js/common.bcd202a3021246321f81.js:14:17188)
    at eval (viewFactory_BaseChart:84:108)
    at http://localhost:8080/js/common.bcd202a3021246321f81.js:20:30711
    at http://localhost:8080/js/common.bcd202a3021246321f81.js:20:19646
    at ZoneDelegate.invoke (http://localhost:8080/js/vendor.bcd202a3021246321f81.js:41:11578)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:8080/js/common.bcd202a3021246321f81.js:13:27810)
    at ZoneDelegate.invoke (http://localhost:8080/js/vendor.bcd202a3021246321f81.js:41:11485)
ERROR CONTEXT:
[object Object]

If you please can have a look https://www.dropbox.com/s/znmcqiz6lb9q8in/angular2-webpack.zip?dl=0

[valorkin]

beta.11 was not working property, see here (valor-software/ngx-bootstrap#305)
beta.12 already released
ng2-bootstrap will be updated today

[kuncevic]

Yes my bad, I just put a wrong title. I tried with beta.12. I think somehow ng2-charts cant detect the reference on charts.js in my case. I wasn't using the whole module. I just copy-pasted charts.ts + line-chart-demo.ts + line-chart-demo.html in to angular2-webpack skeleton trying to make it work with the latest angular2. Also I didn't use any files from ng2-charts that referenced ng2-bootstrap If you check the link with a code I posted above you will see what I am taking about.

[valorkin]

@Kuncevich can you create a public repo for your sample?

[kuncevic]

Just replicated my example here https://plnkr.co/edit/62p48myINDYssKubSkPC?p=preview
The chart is not displaying once app is loaded and no errors shown in console.
Once you move the mouse over the page you will get the exact errors I mentioned above.
Just pop the console in full page https://embed.plnkr.co/62p48myINDYssKubSkPC/ then move mouse over the page and you will see what I am talking about.
I think the app not able to catch chart.js reference for some reason.

P.S
This file https://www.dropbox.com/s/znmcqiz6lb9q8in/angular2-webpack.zip?dl=0 contained example using angular2-webpack skeleton that produce same errors. If you get it locally npm install npm run you will see same errors.

[aminebizid]

Same error in beta 13

[aminebizid]

All charts work but not Line

[roquevera]

I am having same problem using angular 2.0.0-beta.14. ng2-charts installed from github repo (not npm repo)