@@ -20,7 +20,8 @@ import {
   enhanceReport,
   bindPopupHandlers,
   stashStatefulDom,
-  graftStatefulDom
+  graftStatefulDom,
+  destroyBubbleCharts
 } from '../lib/report-view';
 import { enhanceTables } from '../lib/table-enhancer';
 import { renderErrorPage, logError } from '../lib/error-handler';
@@ -176,6 +177,10 @@ export default function ReportView({
         if (cancelled) return;
 
         const payloadChanged = lastEnhancedPayloadRef.current !== payload;
+        // The replacement render throws the old canvases away with the
+        // markup: destroy their Chart.js instances first so none outlives
+        // its canvas (enhanceReport builds fresh charts for the new DOM).
+        if (payloadChanged) destroyBubbleCharts();
         // Stash live chart canvases and rendered graphs before the innerHTML
         // swap throws the old DOM away (no-op on first render — there is
         // nothing stateful in the loading placeholder).
 
@@ -420,20 +420,37 @@ const bubbleCharts = new Map();
 /**
  * Redraws every live bubble chart so legend text re-resolves against the
  * newly active theme. Entries whose canvas left the DOM (report re-rendered
- * or torn down) are pruned instead of redrawn.
+ * or torn down) are destroyed — releasing their Chart.js resources — and
+ * pruned instead of redrawn.
  *
  * @returns {void}
  */
 function redrawChartsForTheme() {
   for (const [canvas, chart] of bubbleCharts) {
     if (!canvas.isConnected) {
+      if (chart && typeof chart.destroy === 'function') chart.destroy();
       bubbleCharts.delete(canvas);
       continue;
     }
     if (chart && typeof chart.update === 'function') chart.update();
   }
 }
 
+/**
+ * Destroys every live bubble chart and clears the registry. The report
+ * component calls this before a payload change replaces the report markup
+ * (container.innerHTML), so no Chart.js instance outlives its removed
+ * canvas; enhanceReport then builds fresh charts for the new canvases.
+ *
+ * @returns {void}
+ */
+export function destroyBubbleCharts() {
+  for (const chart of bubbleCharts.values()) {
+    if (chart && typeof chart.destroy === 'function') chart.destroy();
+  }
+  bubbleCharts.clear();
+}
+
 /**
  * Binds one delegated listener redrawing charts on theme changes: the
  * rf-theme radios (components/theme-toggle.jsx) for explicit switches and
 
@@ -693,6 +693,53 @@ describe('enhanced report tables: stateful widgets survive interactions', () =>
     expect(document.getElementById('overlay').style.display).toBe('block');
     hideAllPopups();
   });
+
+  test('a payload change destroys the previous charts before the markup swap and re-creates them', async () => {
+    // Every Chart.js construction/teardown, in order, so the test can pin
+    // that the old instances are released before the replacement render
+    // builds fresh charts on the new canvases.
+    const events = [];
+    const instances = [];
+    window.Chart = function () {
+      const chart = {
+        destroyed: false,
+        update() {},
+        destroy() { chart.destroyed = true; events.push('destroy'); }
+      };
+      instances.push(chart);
+      events.push('create');
+      return chart;
+    };
+    markWidgetReady('chart');
+    respondJsonFor(sampleJson);
+    const utils = await renderReport();
+    const firstCanvas = utils.container.querySelector('canvas#chart_GOD');
+    const firstRenderCreates = instances.length;
+    expect(firstRenderCreates).toBeGreaterThan(0);
+
+    // Switching branches fetches a new payload: the replacement render must
+    // tear the old Chart.js instances down (they would otherwise outlive
+    // their removed canvases) and then re-create charts for the fresh DOM.
+    utils.rerender(_jsx(ReportView, {
+      username: 'junit-team',
+      repository: 'junit4',
+      branch: 'develop',
+      widgetSettleMs: 25
+    }));
+    // The rerender passes through loading/graft phases that reuse or drop
+    // the old canvas node, so wait on the destruction itself settling.
+    await waitFor(() => {
+      expect(events.filter(e => e === 'destroy').length).toBe(firstRenderCreates);
+    });
+    expect(utils.container.querySelector('canvas#chart_GOD')).not.toBe(firstCanvas);
+
+    expect(instances.slice(0, firstRenderCreates).every(c => c.destroyed)).toBe(true);
+    // All destroys precede every replacement construction.
+    const destroys = events.slice(firstRenderCreates, instances.length);
+    expect(destroys.every(e => e === 'destroy')).toBe(true);
+    // enhanceReport still builds charts for the replacement canvases.
+    expect(instances.length).toBe(2 * firstRenderCreates);
+  }, SLOW_TEST_MS);
 });
 
 async function hideAllPopups() {
 
@@ -12,6 +12,7 @@ import {
   enhanceReport,
   resolveLegendTextColor,
   bindThemeChartRedraw,
+  destroyBubbleCharts,
   statefulElementIds,
   stashStatefulDom,
   graftStatefulDom
@@ -263,6 +264,77 @@ describe('theme-change chart redraw', () => {
     expect(god.updates.length).toBeGreaterThan(godRedraws); // still live
     expect(brain.updates.length).toBe(brainRedraws); // stale entry pruned, not redrawn
   });
+
+  it('destroys the chart of a canvas that left the DOM before pruning it', () => {
+    installThemeRadios('system');
+    bindThemeChartRedraw();
+    document.body.innerHTML = `
+      <input type="radio" name="rf-theme" id="rf-theme-light">
+      <input type="radio" name="rf-theme" id="rf-theme-dark" checked>
+      <input type="radio" name="rf-theme" id="rf-theme-system">
+      <canvas id="chart_GOD"></canvas>`;
+    const chart = {
+      destroyed: false,
+      update() {},
+      destroy() { chart.destroyed = true; }
+    };
+    window.Chart = function () { return chart; };
+    initBubbleChart(document.getElementById('chart_GOD'), 'God Classes', { bubbles: [] });
+    expect(chart.destroyed).toBe(false);
+
+    // The re-render threw the canvas away: the next theme change must
+    // release the Chart.js instance, not merely drop the registry entry.
+    document.getElementById('chart_GOD').remove();
+    const radio = document.getElementById('rf-theme-light');
+    radio.checked = true;
+    radio.dispatchEvent(new window.Event('change', { bubbles: true }));
+
+    expect(chart.destroyed).toBe(true);
+  });
+});
+
+describe('destroyBubbleCharts', () => {
+  afterEach(() => { delete window.Chart; });
+
+  it('destroys every live chart and clears the registry', () => {
+    installThemeRadios('light');
+    const instances = [];
+    window.Chart = function () {
+      const chart = {
+        destroyed: false,
+        update() {},
+        destroy() { chart.destroyed = true; }
+      };
+      instances.push(chart);
+      return chart;
+    };
+    initBubbleChart(document.getElementById('chart_GOD'), 'God Classes', { bubbles: [] });
+    const second = document.createElement('canvas');
+    second.id = 'chart_BRAIN';
+    document.body.appendChild(second);
+    initBubbleChart(second, 'Brain Methods', { bubbles: [] });
+    expect(instances.length).toBe(2);
+
+    destroyBubbleCharts();
+    expect(instances.map(c => c.destroyed)).toEqual([true, true]);
+
+    // Registry cleared: a theme change must not touch the destroyed charts.
+    const updates = [];
+    instances.forEach(c => (c.update = () => updates.push('redraw')));
+    const dark = document.getElementById('rf-theme-dark');
+    dark.checked = true;
+    dark.dispatchEvent(new window.Event('change', { bubbles: true }));
+    expect(updates.length).toBe(0);
+  });
+
+  it('tolerates chart stubs without a destroy method', () => {
+    installThemeRadios('light');
+    window.Chart = function () {
+      return { update() {} }; // no destroy: must not throw
+    };
+    initBubbleChart(document.getElementById('chart_GOD'), 'God Classes', { bubbles: [] });
+    expect(() => destroyBubbleCharts()).not.toThrow();
+  });
 });
 
 describe('initDisharmonyCharts', () => {