How to optimize the update function of chart.js

[AZERK0]

I encountered several performance issues with the update function of chart.js. I developed my own zoom system but the problem is the following (same problem with the zoom plugin), since a large number of updates are made (one per scroll), then the zoom bug.

My hypothesis is that the update function was planned to refresh the data, knowing that mine are large, but I only need to refresh the scales.

Indeed when we do a performance analysis with the developer tool we can see that 83% of the time is taken by the update function, and more precisely 77% comes from the call to a function named _updateDatasets which I think does not need to be called since we only want to change the scales and not the datas.

Maybe my assumption is wrong, in any case I would like to know if you know a way either to perform an update on a specific element of the chart, or if there is another function than update that is more suitable for my case , or even maybe another solution.

[sy3ra]

I have same problem.

I'm using requestAnimationFrame() to make the animation work smoothly with the ability of users to manipulate charts through interaction(zoom, panning). But I'm not solving the frame drop because of the running speed of the update() function (although it's a matter of a few ms unlike the author)

I've checked the Flame chart of the update function and I've seen that I'm using a lot of resources to update options on unnecessary charts, and I don't know how to improve this.

Is there a way to optimize the update fuction?

[anuragchvn-blip]

Optimizing the update() Function in Chart.js

If you're experiencing performance issues with chart.update(), especially when implementing a zoom system or frequent updates, here are several optimization techniques to improve efficiency.

---

1. Avoid Full Dataset Updates (Only Update Scales)

By default, chart.update() refreshes all aspects of the chart, including datasets. However, if you only need to update scales (e.g., zooming), you can manually update the scales and call chart.update('none') to avoid unnecessary recalculations.

Solution: Update Scales Without Refreshing Datasets

chart.options.scales.x.min = newMin;
chart.options.scales.x.max = newMax;
chart.update('none'); // 'none' avoids animations & dataset updates

✅ This prevents _updateDatasets() from being called, improving performance.

---

2. Use chart.render() Instead of chart.update()

If you only need to redraw the chart without changing the dataset, use:

chart.render();

✅ This is much faster than chart.update() since it skips layout recalculations.

---

3. Implement requestAnimationFrame() to Reduce Update Calls

If zooming or panning causes multiple updates per frame, batch them using requestAnimationFrame(). This prevents redundant updates.

Solution: Use requestAnimationFrame() for Efficient Updates

let needsUpdate = false;
function updateChart() {

if (!needsUpdate) return;

needsUpdate = false;

chart.update('none'); // Efficient update

}
function handleZoom() {

needsUpdate = true;

requestAnimationFrame(updateChart);

}

✅ This ensures updates happen only once per frame.

---

4. Use Debouncing for Scroll Events

Since scrolling triggers rapid events, debounce the updates to limit execution.

Solution: Debounce Updates

let timeout;
canvas.addEventListener('wheel', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    chart.update('none');
  }, 50); // Adjust delay as needed
});

✅ This prevents unnecessary update calls and improves responsiveness.

---

5. Optimize Dataset Management

If datasets are large, avoid removing and adding data frequently. Instead, toggle visibility.

Solution: Hide Datasets Instead of Removing

chart.getDatasetMeta(index).hidden = true; // Hide dataset
chart.update('none');

✅ This avoids expensive reprocessing of dataset objects.

---

6. Enable decimation for Large Datasets

For large datasets, enable built-in decimation to reduce rendering overhead.

Solution: Enable Decimation

const options = {
  plugins: {
    decimation: {
      enabled: true,
      algorithm: 'min-max', // Keeps important points
    }
  }
};

✅ This simplifies large datasets while maintaining visual accuracy.

---

7. Optimize Data Updates Using setData Instead of update()

If your zooming requires modifying data dynamically, update datasets directly without triggering a full refresh.

Solution: Modify Data Without Calling update()

chart.data.datasets[0].data = newData;
chart.update('none'); // No animation or full refresh

✅ This updates data efficiently without affecting layout.

---

8. Profile Performance Using Chrome DevTools

Use Chrome DevTools > Performance Tab to analyze the bottlenecks in update(). If _updateDatasets() is consuming most resources, prioritize solutions that prevent full dataset updates.

Steps:

1. Open Chrome DevTools (F12 or Ctrl + Shift + I).
2. Go to the Performance tab.
3. Click Record and perform zooming or scrolling actions.
4. Stop recording and analyze the function calls.
5. Look for _updateDatasets() in the flame chart and optimize accordingly.

✅ This helps identify the root cause of performance issues.

---

9. Avoid Layout Recalculations

If performance issues persist, avoid triggering unnecessary layout recalculations by updating only specific elements.

Solution: Manually Adjust Elements

Instead of calling update(), manipulate elements directly:

chart.options.plugins.tooltip.enabled = false; // Example setting
chart.render();

✅ This bypasses the full update cycle.

---

Conclusion

Best Practices for Optimizing update() in Chart.js

Issue	Solution
Full dataset updates are slow	Use chart.update('none') instead of chart.update()
Frequent updates during zoom/pan cause lag	Use requestAnimationFrame() and debounce events
Redundant dataset recalculations	Modify only the necessary parts (scales, visibility)
Large datasets slow down rendering	Enable decimation and limit visible data
Unnecessary layout recalculations	Use chart.render() instead of chart.update()

Recommended Implementation

// Example: Optimized Zooming System
let needsUpdate = false;
function updateChart() {

if (!needsUpdate) return;

needsUpdate = false;

chart.update('none'); // Efficient update

}
function handleZoom() {

chart.options.scales.x.min *= 0.9; // Adjust zoom factor

chart.options.scales.x.max *= 0.9;

needsUpdate = true;

requestAnimationFrame(updateChart);

}

By following these techniques, you can significantly improve the performance of the update() function in Chart.js, making interactions like zooming and panning much smoother.