Getting Sad Face With Large Chart

[Theo]

I have a chart that is supposed to be 80630 pixels high with over 1400 data points. When I enter them into the chart the browser shows me a sad face, the tooltip drags and everything seems to crash. Do you know why this is happening?

Thank you!

[Theo]

I am adding the error that I see in Firefox ( in Chrome it only shows the sad face but the console shows no error ):
columnNumber: 0
​
data: null
​
filename: “webpack-internal:///./src/assets/canvasjs.min.js”
​
lineNumber: 119
​
message: “”
​
name: “NS_ERROR_FAILURE”
​
result: 2147500037
​
stack: “ia.prototype.render@webpack-internal:///./src/assets/canvasjs.min.js:119:37\nOa.Chart</E.prototype.renderLabelsTicksAndTitle@webpack-internal:///./src/assets/canvasjs.min.js:693:482\nOa.Chart</E.render@webpack-internal:///./src/assets/canvasjs.min.js:663:492\nOa.Chart</l.prototype.renderElements@webpack-internal:///./src/assets/canvasjs.min.js:201:74\nOa.Chart</l.prototype.render@webpack-internal:///./src/assets/canvasjs.min.js:210:245\nNewCanvasjsComponent.prototype.createChart@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:90:20\nNewCanvasjsComponent.prototype.addStudentDataPoints/<@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:255:47\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:423:31\nonInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4967:33\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:422:60\nZone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:195:47\nZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:498:34\nZoneTask/this.invoke@webpack-internal:///./node_modules/zone.js/dist/zone.js:487:48\ntimer@webpack-internal:///./node_modules/zone.js/dist/zone.js:2281:29\nsetTimeout handler*scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:2302:35\nZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:410:26\nonScheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:301:29\nZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:404:51\nZone.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:238:43\nZone.prototype.scheduleMacroTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:261:25\nscheduleMacroTaskWithCurrentZone@webpack-internal:///./node_modules/zone.js/dist/zone.js:1245:25\npatchTimer/setNative</<@webpack-internal:///./node_modules/zone.js/dist/zone.js:2317:60\npatchMethod/proto[name]@webpack-internal:///./node_modules/zone.js/dist/zone.js:1569:24\nNewCanvasjsComponent.prototype.addStudentDataPoints@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:255:19\nNewCanvasjsComponent.prototype.addDataPoints@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:142:22\nNewCanvasjsComponent.prototype.setDisplayType@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:288:14\nView_NewCanvasjsComponent_0/<@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ngfactory.js:33:25\nhandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13805:142\ncallWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15314:42\ndebugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14901:12\ndispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10220:25\nrenderEventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10845:38\ndecoratePreventDefault/<@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:65\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:423:31\nonInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4967:33\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:422:60\nZone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:195:47\nZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:498:34\ninvokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1744:14\nglobalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1770:27\nEventListener.handleEvent*customScheduleGlobal@webpack-internal:///./node_modules/zone.js/dist/zone.js:1883:43\nZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:410:26\nonScheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:301:29\nZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:404:51\nZone.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:238:43\nZone.prototype.scheduleEventTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:264:25\nmakeAddListener/<@webpack-internal:///./node_modules/zone.js/dist/zone.js:2054:33\nDomEventsPlugin.prototype.addEventListener@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:3380:41\nEventManager.prototype.addEventListener@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2391:23\nDefaultDomRenderer2.prototype.listen@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:3045:53\nDebugRenderer2.prototype.listen@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15691:30\nlistenToElementOutputs@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10834:83\ncreateViewNodes@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13967:39\ncallViewAction@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14434:28\nexecComponentViewsAction@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14343:27\ncreateViewNodes@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14028:29\ncreateRootView@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13889:20\ncallWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15314:42\ndebugCreateRootView@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14597:12\nComponentFactory_.prototype.create@webpack-internal:///./node_modules/@angular/core/esm5/core.js:11494:46\nComponentFactoryBoundToModule.prototype.create@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4246:29\nViewContainerRef_.prototype.createComponent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:11691:62\nRouterOutlet.prototype.activateWith@webpack-internal:///./node_modules/@angular/router/esm5/router.js:6853:40\nActivateRoutes.prototype.activateRoutes@webpack-internal:///./node_modules/@angular/router/esm5/router.js:5933:40\nActivateRoutes.prototype.activateChildRoutes/<@webpack-internal:///./node_modules/@angular/router/esm5/router.js:5873:19\nActivateRoutes.prototype.activateChildRoutes@webpack-internal:///./node_modules/@angular/router/esm5/router.js:5872:29\nActivateRoutes.prototype.activateRoutes@webpack-internal:///./node_modules/@angular/router/esm5/router.js:5935:26\nActivateRoutes.prototype.activateChildRoutes/<@webpack-internal:///./node_modules/@angular/router/esm5/router.js:5873:19\n”
​
<prototype>: ExceptionPrototype { toString: toString(), name: Getter, message: Getter, … }

Thank you

[Theo]

I am adding part of the error in firefox ( Chrome only shows a sad face ):
columnNumber: 0
​
data: null
​
filename: “webpack-internal:///./src/assets/canvasjs.min.js”
​
lineNumber: 119
​
message: “”
​
name: “NS_ERROR_FAILURE”
​
result: 2147500037
​
stack: “ia.prototype.render@webpack-internal:///./src/assets/canvasjs.min.js:119:37\nOa.Chart</E.prototype.renderLabelsTicksAndTitle@webpack-internal:///./src/assets/canvasjs.min.js:693:482\nOa.Chart</E.render@webpack-internal:///./src/assets/canvasjs.min.js:663:492\nOa.Chart</l.prototype.renderElements@webpack-internal:///./src/assets/canvasjs.min.js:201:74\nOa.Chart</l.prototype.render@webpack-internal:///./src/assets/canvasjs.min.js:210:245\nNewCanvasjsComponent.prototype.createChart@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:90:20\nNewCanvasjsComponent.prototype.addStudentDataPoints/<@webpack-internal:///./src/app/home/new-canvasjs/new-canvasjs.component.ts:255:47\nZoneDelegate.prototype.invokeTask@webpack-

[Sunil Urs]

Theo,

Most browsers have a limit on the size of Canvas Element. Chrome and Firefox have a limit of 32767 Pixels. May I know why you are trying to render such a large Chart?

—
Sunil