Hey there! Let's break down why your memory is spiking when modifying Chart.js values and how to fix it—including the right way to use destroy() (I think you might have mixed up the method name a bit, it's destroy() for Chart instances, not onDestroy()).

Common Cause: Uncleaned Chart Instances #

The most likely culprit here is that you're creating new Chart instances every time you update values without destroying the old ones. Each unused instance hangs around in memory, accumulating over time and causing that spike you're seeing in Activity Monitor.

How to Use destroy() Correctly #

Chart.js provides a destroy() method on every chart instance that cleans up all event listeners, DOM references, and memory used by that chart. Here's how to integrate it into your workflow:

1. Store your chart instance in a persistent variable (like a module-level or component-level variable) so you can reference it later.
2. Before creating a new instance or updating data, check if an old instance exists—if it does, call destroy() on it first.

Example code:

// Initialize a variable to hold your chart instance
let myChart = null;

function updateChartWithNewData(newDataset) {
  // Clean up the old chart if it exists
  if (myChart) {
    myChart.destroy();
    myChart = null; // Reset the variable to avoid stale references
  }

  // Create a new chart instance with the updated data
  const chartCtx = document.getElementById('myChartCanvas').getContext('2d');
  myChart = new Chart(chartCtx, {
    type: 'bar', // Or your chart type
    data: {
      labels: ['Label 1', 'Label 2'],
      datasets: [newDataset]
    },
    options: {
      // Your chart configuration
    }
  });
}

Other Potential Leak Points to Check #

Even with destroy(), there might be other things causing memory bloat:

• Lingering event listeners: If you added custom event listeners to the chart or its DOM elements (e.g., click handlers on chart bars), make sure to remove them before destroying the instance.
• Unreleased DOM references: If the canvas element your chart is bound to gets removed or replaced in the DOM without destroying the chart first, the instance will still hold a reference to the old element, preventing garbage collection.
• Stale data references: If your old data objects are being referenced elsewhere in your code (like in global arrays or other components), the garbage collector can't clean them up. Double-check that you're not keeping unnecessary references to old chart data.

How to Verify the Fix #

Use Firefox's built-in Developer Tools to confirm the leak is resolved:

1. Open the Memory panel.
2. Take a heap snapshot before updating the chart.
3. Update the chart a few times.
4. Take another heap snapshot and compare the two—you should no longer see accumulating Chart instances.

Final Check for Your Implementation #

Go through your full code and look for these red flags:

• Are you calling new Chart() every time you update values without checking for an existing instance?
• Did you forget to call destroy() when the component/container holding the chart is unmounted or hidden?
• Are there any external functions or libraries holding references to your chart data or instance?

内容的提问来源于stack exchange，提问作者Sam Lim