`new Chart` throws `RangeError: minimumFractionDigits value is out of range.`

Expected Behavior

Should work normally

Current Behavior

Throws an error RangeError: minimumFractionDigits value is out of range. from new Chart(...). This is the same as #9019 which was already closed.

It happens when occasionally, and calculateLabelRotation gets a NaN value. This happens when Math.asin(Math.min(maxHeight / maxLabelDiagonal, 1)) is NaN, as you cannot Math.asin on a value less than -1. This issue propagates into NaN margins and messes up everything until the next update call.

Possible Solution

The constraint should be Math.max(Math.min(maxHeight / maxLabelDiagonal, 1), -1). Adding the Math.max(..., -1) here fixes it. The fix is easy, and mathematically correct, as the range for asin is -1 to 1.

Steps to Reproduce

I actually had a hard time reproducing this. This happens ocassionally but not consistently, with a line (time series) chart, and the canvas not being in the dom yet. Although the canvas has a default size of 300x150 to specs. I’m sorry I can’t throw in here a codepen that shows the issue. I guess this has to do with lots of environmental parameters, perhaps including the current time.

Context

Environment

• Chart.js version: 3.4.1
• Browser name and version: Chrome 91.0.4472.124

[jayantbh]

This is for nextjs

@brixbimboavengoza’s comment stopped the error for me, but the y axis only showed one tick (the topmost one), which wasn’t usable to me.

Turns out, based on @kurkle’s comment here, you can turn off swcMinify to fix this.

Problem is, swcMinify: true reduces my build time by almost half. And I didn’t want to let that go.

I took a bit of a risk and changed the next version to the latest canary (15 as of now) as of today and that fixed it just fine! As of 12.3.2 canary 10, the swc minifier version was updated which included the fix.

[brixbimboavengoza]

``> I still got this kind of error in version 3.9.1

try this scale: { y: { ticks: { callback: function (val, index) { return '${this.getLabelForValue(Number(val))}%'; }, } } }