Description
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: