From bb9089aa990a8e1dd228d47aa5b11b3500cdface Mon Sep 17 00:00:00 2001 From: Inverle Date: Tue, 9 Dec 2025 00:59:10 +0100 Subject: Fix chart resize regression due to chart.js v4 update (#8298) * Fix chart resize regression due to chart.js v4 update * Update to chart.js v4.5.1 + add .map file for easier debugging https://github.com/chartjs/Chart.js/releases/tag/v4.5.1 * Delete .map file --- p/scripts/statsWithChartjs.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'p/scripts/statsWithChartjs.js') diff --git a/p/scripts/statsWithChartjs.js b/p/scripts/statsWithChartjs.js index 3398ee89c..7282f7f9b 100644 --- a/p/scripts/statsWithChartjs.js +++ b/p/scripts/statsWithChartjs.js @@ -36,6 +36,36 @@ function initCharts() { /* eslint-enable no-new */ } + // Force resize after clicking enlarge button (needed since chart.js v4) + for (const id in Chart.instances) { + const instance = Chart.instances[id]; + const boxTitle = instance.canvas.parentElement.previousElementSibling; + const enlargeBtns = boxTitle.querySelectorAll('a.btn'); + + function forceResize() { + function waitHash() { + requestAnimationFrame(() => instance.resize()); + window.removeEventListener('hashchange', waitHash); + } + instance.resize(); // try early resize + window.addEventListener('hashchange', waitHash); + } + for (const btn of enlargeBtns) { + btn.addEventListener('click', forceResize); + } + } + + window.addEventListener('resize', () => { + for (const id in Chart.instances) { + const instance = Chart.instances[id]; + + // Workaround for a chart.js bug which makes the canvas blurry if + // page was loaded with very low zoom level and later zoomed in + instance.update(); + instance.resize(); + } + }); + if (window.console) { console.log('Chart.js finished'); } -- cgit v1.2.3