"Uncaught RangeError: Maximum call stack size exceeded" when parent element not in DOM tree yet

[nuandawm]

I noticed that when creating a Chart appended to an element that is still not in the DOM tree you end up with a Maximum call stack error because of an infinite recursive call in fitBoxes method. This happens when the responsive option is true and when using multiple yAxes.

It's quite common in modern frameworks that elements are created before they are added to the DOM tree (and added when data are ready). I noticed the issue using the ng2-charts component in an Angular project.

The issue has been introduced in 2.9 version (previous versions works fine).

Expected Behavior

The chart should be created without errors, or the render should stop with a more clear error.

Current Behavior

A Maximum call stack error is shown in the console.

Uncaught RangeError: Maximum call stack size exceeded
    at ChartElement.update (Chart.bundle.js:11478)
    at fitBoxes (Chart.bundle.js:7131)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)
    at fitBoxes (Chart.bundle.js:7149)

Possible Solution

The problem could also be solved simply checking if the parent element can be found in the DOM tree and stop the render with an error.

The cause of the issue is that the getMaximumWidth (and getMaximumHeight) helper returns NaN in this condition.

A solution could be to change the _calculatePadding private helper to manage the NaN value returned by the parseInt method. The getStyle helper could also be changed to try to get the property from the element style in case the getComputedStyle method returns an empty string.

I made some changes, created a test which fails with the actual code and tested my new code against all other tests: I can do a
pull request, so you can have a look at it.

Steps to Reproduce

I created a codepen with a code example, but sadly it doesn't show the maximum call stack error. Anyway, you can easily reproduce the error copying the code on a local project and get the error in the console.

https://codepen.io/nuandawm/pen/bGpYQKJ

Context

Environment

• Chart.js version: 2.9.3
• Browser name and version: Chrome Version 85.0.4183.83
• Link to your project:

[kurkle]

Does not reproduce in master: https://codepen.io/kurkle/pen/BaKPRQG?editors=1010
Note the scale configuration difference. You can test with v3.0.0-beta available in npm.

[nuandawm]

Hello @kurkle , I know that it works on the 3.0 version, but I hoped that it could be fixed (I kind of did) in the 2.9 version.
We are using Chart.js on Angular through another package (ng2-charts) and I'm pretty sure that it's not compatible with the v3.0.0-beta

[kurkle]

Not sure how difficult the fix would be. Most of the related code is changed in v3, so I don't think the fix can be back ported. Personally I'm not interested in investigating this, but would probably review a pr for it.