Full canvas redraw on each animation frame in Chart.js line charts
24.5K reputation · 24 May 2020, 16:28 UTC
When working with Chart.js line charts that animate large datasets, the library clears and redraws the entire canvas on every animation frame, which can become a performance bottleneck as the number of points grows.
This behavior persists in Chart.js 3 and later, even though the animation loop uses requestAnimationFrame, and the observed impact varies with canvas size, device pixel ratio, and the specific browser’s GPU acceleration. Consequently, developers need to isolate the rendering cost before deciding whether to disable animation, adjust the dataset, or explore alternative drawing strategies.
What is the average frame‑time increase when animation is enabled for datasets of 5 000 versus 50 000 points? How does disabling animation or setting duration to zero change the measured update time? Are there configuration options or plugins that limit redraw to changed regions without removing the visual transition?