-
Notifications
You must be signed in to change notification settings - Fork 12k
Description
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