Skip to content

Charts with a large number of hidden datasets perform poorly #12179

@alex-statsig

Description

@alex-statsig

Expected behavior

The hidden datasets should require minimal processing, and not incur a performance cost on chart updates. With 15 visible datasets of 1000 total datasets, the chart should feel snappy still.

Current behavior

The hidden datasets have their elements updated still, incurring a big performance cost even if only a small number (ex. 15) of the datasets are visible. Animations will not play because of this lag, and the whole browser is locked up.

Reproducible sample

https://codepen.io/alex-statsig/pen/LEZxrry

Optional extra steps/info to reproduce

By default, only 10 datasets are visible in the linked repro. If you toggle the visibility of some datasets using the legend, you will see a ~1 second lag period on each click. If you inspect the performance, you can see the time is being spent in "_updateDataset" for all of the hidden datasets.

Screen.Recording.2026-01-15.at.12.49.23.PM.mov

Possible solution

I tested out adding a simple check if (!meta.visible) return within the LineController.update function and this mostly seemed to work, providing a significant performance improvement. The only caveat was that with an animation, the dataset stuck around until the animation finished. Perhaps we could restrict this optimization to when no animation is enabled, or account for the animation somehow (ex. if we could exclude datasets that are invisible and finished their animations)

Screen.Recording.2026-01-15.at.12.41.27.PM.mov

I also suspect this optimization could be added to DatasetController._update for all datasets, but I'm not sure if there's any special consideration for other types (maybe it should just be opted in for others like BarController etc.)

I'm happy to help contribute this fix, though I believe the fix should be fairly simple (except for any special accounting needed for animations or other edge cases, which I'm not as familiar with)

Context

I'm trying to display a chart with many datasets, but will default the visualization to only show a small subset of datasets at a time to ensure the initial experience is performant (and perhaps restrict the user from marking more a small number of them as visible at once). However, I'm observing that the large number of hidden datasets still impacts performance significantly

In my actual environment I have animations disabled for performance, but still have some dataset properties customized with content functions, which I think seems to be the cause of a similar performance hit, and seems to be solved by the same change

chart.js version

latest

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