RangeError: minimumFractionDigits value is out of range. (Thrown from new Chart())

[lincolnthree]

Hi all,

Thanks for the great library. I don't have a repro for this (famous last words) but it seems to happen when a specific chart is created. The chart library is calculating NaN for the chart height (even though it should likely just be 0)

Expected Behavior

Error should not be thrown.

Current Behavior

RangeError: minimumFractionDigits value is out of range.
    at new NumberFormat (<anonymous>)
    at getNumberFormat (helpers.segment.js:2155)
    at formatNumber (helpers.segment.js:2161)
    at LinearScale.numeric (chart.esm.js:3177)
    at callback (helpers.segment.js:89)
    at LinearScale.generateTickLabels (chart.esm.js:3710)
    at LinearScale._convertTicksToLabels (chart.esm.js:3870)
    at LinearScale.update (chart.esm.js:3620)
    at fitBoxes (chart.esm.js:2710)
    at Object.update (chart.esm.js:2827)
    at Chart._updateLayout (chart.esm.js:5460)
    at Chart.update (chart.esm.js:5441)
    at new Chart (chart.esm.js:5180)
    at SafeSubscriber._next (chart.component.ts:285)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)

First call to getNumberFormat:

Second call to getNumberFormat:

Intermediate values during chart construction:

RangeError is thrown.

Possible Solution

Steps to Reproduce

Context

Environment

• Chart.js version: ^3.2.1
• Browser name and version:

Google Chrome | 90.0.4430.93 (Official Build) (x86_64)
-- | --
Revision | 4df112c29cfe9a2c69b14195c0275faed4e997a7-refs/branch-heads/4430@{#1348}
OS | macOS Version 11.2.3 (Build 20D91)
JavaScript | V8 9.0.257.23
User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)

• Link to your project:
  None yet.

[lincolnthree]

Options passed to new Chart()

ref to canvas:

<canvas height="0" width="0" style="display: block; box-sizing: border-box; height: 0px; width: 0px;"></canvas>

opts:

{"type":"bar","data":{"datasets":[{"data":[29.05,4,15.69,11.69,2.84,4,0,3.84,4],"backgroundColor":["#597fdd","#51a8e7","#56c9ab","#6fd872","#a4d53f","#e6c72f","#f29a2c","#f0583b","#dc2054","#e0379d","#dd48e1","#aa4ee0","#8260ed"],"hoverBackgroundColor":["#597fdd","#51a8e7","#56c9ab","#6fd872","#a4d53f","#e6c72f","#f29a2c","#f0583b","#dc2054","#e0379d","#dd48e1","#aa4ee0","#8260ed"],"label":"Costs"}],"labels":[0,1,2,3,4,5,6,7,"7+"]},"options":{"responsive":true,"maintainAspectRatio":true,"aspectRatio":2,"plugins":{"labels":false,"legend":{"display":false},"tooltip":{"enabled":true}},"elements":{"line":{"borderColor":"rgba(0,0,0,0)","borderWidth":1}},"layout":{"padding":{"top":30,"bottom":1,"right":1,"left":1}},"devicePixelRatio":2,"animation":{"duration":0}},"plugins":[{"id":"labels"},{"id":"centerText"}]}

[lincolnthree]

Also, FWIW, this error is non-fatal and causes a lot of noise in logs. The chart will update and render correctly as soon as the element has proper dimensions.

[lincolnthree]

Actually, on further thought. I believe this may actually result in a memory leak, since the new Chart() constructor never returns, but the Canvas element is attached to the chart configuration.

[lincolnthree]

Additionally, this bug seems to occur when padding exceeds the available chart height (0). Removing the padding configuration seems to prevent the error from occurring.

[danielgindi]

This error still happens with a chart that has initial w/h=0

[danielgindi]

For me it happens when occasionally, and it looks like 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.

The constraint should be Math.max(Math.min(maxHeight / maxLabelDiagonal, 1), -1).

[danielgindi]

@etimberg I have a random issue with this, sometimes happens sometimes not, and always when the canvas is not yet attached to the dom. Adding the Math.max(..., -1) here fixes it.
This issue propagates into NaN margins and messes up everything until the next update call.

The fix is easy, and mathematically correct, as the range for asin is -1 to 1.

[grempe]

If you found this bug, please see #10673 for a potential solution.