Skip to content

Unable to render chart when dataset includes Number.MAX_VALUE #12184

@tomvecchi

Description

@tomvecchi

Expected behavior

Chart y-axis should automatically rescale to match the range of the provided input data, provided the data points are within the permitted range for js Number.

Current behavior

If a dataset for the chart includes Number.MAX_VALUE (approx 1.7976931348623157e+308), then upon attempting to rescale the y-axis, the chart is no longer rendered.

Additionally, the tab containing the chart may crash with a SIGILL message (when testing in chrome).

The issue seems to be related to the range of the points in the dataset. The same behaviour can be seen if Number.MIN_VALUE is used.

Reproducible sample

https://codepen.io/leelenaleee/pen/WNyJXEe

Optional extra steps/info to reproduce

The bug can be replicated in the default codepen:

  1. Add Number.MAX_VALUE to the data field on line 8 in the JS section: data: [12, 19, 3, 5, 2, 1.79e308]
  2. Wait for chart.js to automatically rescale the y-axis.
  3. The chart will disappear, in some cases the codepen component may crash. (See the example image below)
Image

Possible solution

I think the default y-axis scaling is attempting to go up to 2.00e308 or some other round number that exceeds Number.MAX_VALUE, the axis ranges should be clipped to the range of a js Number.

Context

My application is using chart.js to stream real-time data using chartjs-plugin-streaming. This issue was identified when testing edgecases for possible input values. It is possible to work around this by excluding extreme values from the datasets passed into chart.js.

chart.js version

v4.5.1

Browser name and version

No response

Link to your project

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions