From 05c1ba3df548678af577d6e2aabfcf0c82640757 Mon Sep 17 00:00:00 2001 From: Jonathan Fulton Date: Sat, 31 Jan 2026 18:57:17 -0500 Subject: [PATCH] fix(dom): update canvas style on resize to allow chart to grow When the chart's container grows, the canvas style width/height were not being updated because they were already set (from initial render). This caused the chart to shrink correctly but not grow when the window was enlarged. This fix updates the canvas style width/height during resize when they differ from the current chart dimensions, allowing the chart to properly resize in both directions. Fixes #12177 --- src/helpers/helpers.dom.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/helpers/helpers.dom.ts b/src/helpers/helpers.dom.ts index b0c41eec0c0..fb085bbfcc9 100644 --- a/src/helpers/helpers.dom.ts +++ b/src/helpers/helpers.dom.ts @@ -222,9 +222,22 @@ export function retinaScale( // If no style has been set on the canvas, the render size is used as display size, // making the chart visually bigger, so let's enforce it to the "correct" values. // See https://github.com/chartjs/Chart.js/issues/3575 + // Also update styles when resizing to ensure the canvas grows with its container. + // See https://github.com/chartjs/Chart.js/issues/12177 if (canvas.style && (forceStyle || (!canvas.style.height && !canvas.style.width))) { canvas.style.height = `${chart.height}px`; canvas.style.width = `${chart.width}px`; + } else if (canvas.style) { + // Update styles on resize if they were previously set by Chart.js + // This ensures the canvas can grow when its container grows + const currentStyleHeight = parseFloat(canvas.style.height); + const currentStyleWidth = parseFloat(canvas.style.width); + if (!isNaN(currentStyleHeight) && currentStyleHeight !== chart.height) { + canvas.style.height = `${chart.height}px`; + } + if (!isNaN(currentStyleWidth) && currentStyleWidth !== chart.width) { + canvas.style.width = `${chart.width}px`; + } } const canvasHeight = Math.floor(deviceHeight);