Chart.Js - Maximum Call Stack Size Exceeded (Chrome), too much recursion (Firefox) com.google.gwt.core.client.JavaScriptException

[jjlazzard]

Hi, Chart.js classes of charts occur Error in browsers, some one know how to solve?

the bug occur only in Vaadin debug application mode, but i'm not sure if in production mode it presents in a hidden way and complicates the UI client's performance or application server consumption

Thanks JJL

[benmccann]

I don't think anyone here will be able to debug this since we don't use GWT / Vaadin and it doesn't appear to be a bug in Chart.js, but rather in how those tools have been setup to use Chart.js. I think the best place to work on debugging this issue would be in the ticket for vaadin-chartjs as that would be a community with much stronger knowledge of this issue: https://github.com/moberwasserlechner/vaadin-chartjs/issues/17

[jjlazzard]

benmccann thanks for your reply and for directions,

I'll explain better, I did not mean if anyone could debug, mine was an affirmation

when you set up the Vaadin Servelet configuration in debug mode, in order to use Inspector tools, if there are any Chart.js components (based on GWT) in the GUI, this error occur and does not allow you to use Vaadin's debugging tool well,

moreover the applications go in a block with the blue progress bar that stops and flashes and from there it does not move anymore.

I was wondering if anyone has solved and in which way this bug clearly/probably is in Chart.js since it also sometimes comes out in the original link of the classes. as seen from the attached images

http://vaadin-demos.qqjtxeeuih.eu-central-1.elasticbeanstalk.com:5600/?debug#!multi-axis-bar-chart

[benmccann]

I don't see any indication that this is a bug in Chart.js. You would need to give us a bit more info showing what the bug might. I've never seen this using Chart.js alone. It seems more like a bug in Vaadin or the GWT configuration to me. All the stack trace lines refer to com.vaadin.DefaultWidgetSet. There's no information about Chart.js here that would let us know where to look. I'm not sure what this output like at Unknown.new O4d means. If that's a minimized symbol perhaps try using the non-minimized version to get more useful debug output?

Mon Feb 11 10:06:59 GMT-800 2019 com.vaadin.client.ApplicationConfiguration
SEVERE: (RangeError) : Maximum call stack size exceeded
com.google.gwt.core.client.JavaScriptException: (RangeError) : Maximum call stack size exceeded
    at Unknown.new Map(Unknown)
    at Unknown.z5d(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.new k5d(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.B$d(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.new O4d(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.Jv(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.new Lv(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.vv(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.new uv(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.Nnb(com.vaadin.DefaultWidgetSet-0.js)
    at Unknown.QHb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.new RHb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.uLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.vLb(com.vaadin.DefaultWidgetSet-1.js)
    at Unknown.tLb(com.vaadin.DefaultWidgetSet-1.js)

[jjlazzard]

I actually considered to chart.js is involved in the bug just because it comes out when I add a chart component of any type to the GUI,

if I do not add a chart.js component this bug does not come out .. but I can not say where the problem is because on my console does not come out any exception (despite having captured in all the methods of our classes) and also re-launching from the methods of the components chart.js

so I do not know how I can find the origin, those coded messages I do not know what they are, I think it's a trace of GWT components

I do not know what to do to find out the cause, I also checked that in the final components of the chart there are recursive calls but it is not so,

however I did not go to the bottom (parent classes) in the java classes of chart.js, I use them as final components without modifying them

[jjlazzard]

in addition, the last components added to our applications, graph charts are the only JavaScript code,

and questobug only presented with the addition of these classes (chart.js) and there is evidence only when we set the vaadin applications to debug mode

[mbonaci]

I assume this was the cause in his case too: I get this when I try to provide arrays for pointRadius, pointBackgroundColor, pointBorderColor, pointHoverRadius, pointHoverBackgroundColor, pointHoverBorderColor in an attempt to mark certain points in the chart.

The clone calls itself for each of those array elements, so when chart has many points it all quickly gets out of hand.

[simonbrunel]

@mbonaci it's strange to get a call stack size error here because there is only one recursion level for arrays (except if your array contains objects or arrays). Starting 2.8, almost all dataset options are now scriptable, which I think should be used most of the time instead of providing arrays.

[chrisadamsonmcri]

I'm having this issue too and I'm not using arrays to define per-point properties. The error occurs after a call to update(). How can I get more information for debugging? How can I get a complete stack trace so that I can find the first call to clone? Thanks in advance.

[misraelsen]

I also am having this issue "max stack size exceeded" with chart.js 2.9.3. However in chart.js version 2.8.0 it works fine for me. I will try to create an example of the issue.

[misraelsen]

So I am including an object i called "meta1" in the datasets object which has a bunch of data/info for drilldown purposes. When a user clicks on a point on the current graph it will drilldown to the next level by using the meta1 object -- and on down as many levels the user wants to drilldown.

In chart.js 2.8.0 this method of doing drilldown works fine. However, in chart.js 2.9.3 I get the "max stack size exceeded" error. I am guessing that chart.js must be cloning or following this large "meta1" object I am passing along with the dataset and it is causing this error.

Is there any way to just have chart.js clone only the things it needs in the object rather than following any and all items in the dataset object?

[chrisadamsonmcri]

I was storing objects in chartInstance.options temporarily and not deleting them. These objects were references/copies of other objects in the chartInstance. I think that was causing the recursion. My bad.

[linewei]

I have this issue too , use with angular 8 and chart.js 2.9.3:

ERROR RangeError: Maximum call stack size exceeded at Chart.js:9286 at Array.sort () at Chart._getSortedDatasetMetas (Chart.js:9870) at Chart._getSortedVisibleDatasetMetas (Chart.js:9879) at ChartElement._getMatchingVisibleMetas (Chart.js:12512) at ChartElement.determineDataLimits (Chart.js:12979) at ChartElement.update (Chart.js:11502) at fitBoxes (Chart.js:7127) at fitBoxes (Chart.js:7145) at fitBoxes (Chart.js:7145)

[kevinmao96]

i hace the same error anyone knows how to solved it ?

[jebos]

Suffering from the same issue, using angular.

@benmccann this seems to be a general issue, not directly related to vaadin. You should consider to reopen this ticket.

[benmccann]

We would need an issue filed that follows our issue guidelines. Specifically we would need a piece of code that reproduces the issue

[osnersanchez]

I had the same problem implementing the graphs in angular, using canvas and ViewChild, initializing the graphs in ngAfterViewInit.

Although the ngAfterViewInit waits for the rendering of the html, it kept giving me the error mentioned in this issue and it only painted the first graph that it initialized.

What I did was add a setTimeOut to initialize the graphics inside the ngAfterViewInit, and all the graphics were rendered without any message in the console.

It has not yet been determined, but with this I was able to solve it.

[Lena-Ki]

Used to have this problem with react-chartjs-2 v2.10.0 and React v16.14.0

The problem was solved by removing 'responsive: true' from options, it might have called too much rerender