Chart.js: Uncaught RangeError: Maximum call stack size exceeded

[cnmicha]

Expected Behavior

The chart shows data when using 45000 datapoints to create the chart.

Current Behavior

When creating the chart with 45000 datapoints, the following error is thrown and the canvas stays empty:

RangeError: Maximum call stack size exceeded
    at computeLabelSizes (Chart.js:11242)
    at ChartElement._getLabelSizes (Chart.js:11911)
    at ChartElement.calculateTickRotation (Chart.js:11689)
    at ChartElement.update (Chart.js:11547)
    at fitBoxes (Chart.js:7127)
    at Object.update (Chart.js:7341)
    at Chart.updateLayout (Chart.js:9680)
    at Chart.update (Chart.js:9633)
    at Chart.construct (Chart.js:9357)
    at new Chart (Chart.js:9294)

Possible Solution

Modify the lines (Chart.js:11242-11243):

widest = widths.indexOf(Math.max.apply(null, widths));
highest = heights.indexOf(Math.max.apply(null, heights));

So that they call an alternative implementation of Math.max.apply() that is non-recursive.

For an example implementation, please see the change from numbers/numbers.js#110 in file lib/numbers/basic.js, lines 240-255, function basic.max(), which introduces a non-recursive implementation of Math.max.apply().

Using the code from numbers.js, the issue was resolved.

Steps to Reproduce (for bugs)

Create a line chart with a single dataset which contains around 45000 datapoints (x|y). Use linear axes type.

Context

Chart.js is only working with small datasets.

Environment

• Chart.js version: Chart.js v2.9.3
• Browser name and version: Chrome 79.0.3945.130 (Official Build) (64-bit)

[cnmicha]

Tried it out with approx. 500 datapoints. Still the same issue.

[kurkle]

Would it be possible to reproduce this in a interactive example?

[kurkle]

2.9.3: https://codepen.io/kurkle/pen/VwLmobz
master: https://codepen.io/kurkle/pen/ExjNqWK

Closing due to missing test case and not able to reproduce.

[cailen-fisher]

I am seeing this with only 3 data points and 3 matching labels. I have other instances of ChartJs that run just fine, but there is definitely some weird behavior here. I am using default config options except for setting colors and not doing anything complicated or strange- just one simple static instance of a chart, but it goes into an infinite loop until the browser crashes.

This is such a simple use case, I don't expect it to be reproducible easily- there has to be some combination of more subtle factors (canvas size maybe?) but I thought it was worth documenting.

Data: ["1", "2", "4"]
Labels: ["James Hetfield", "Zooey Deschanel", "Dolly Parton"]

Chart instance:
chart = new Chart(element, {
      type: "bar",
      data: {
        labels: labels,
        datasets: [
          {
            label: false,
            data: data,
            backgroundColor: colors,
            borderColor: borderColors,
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                stepSize: stepSize,
                beginAtZero: true
              }
            }
          ]
        }
      }
    });

[cailen-fisher]

Update: in my case, it was because of having a low stepsize when the data contained large numbers. Removing the stepsize setting altogether solved the issue.