From 2bbb96cd707e71dffd96010c37a389b7e0b4485d Mon Sep 17 00:00:00 2001 From: =?utf8?q?DrWarpMan=20=F0=9F=8C=80?= <36279265+DrWarpMan@users.noreply.github.com> Date: Mon, 20 Oct 2025 17:35:54 +0200 Subject: [PATCH] docs: Add note about flexbox/grid layout responsivity issue (#12134) * note added to docs for proper responsive sizing when the chart parent element is a child of a flex or grid container * revert style changes * improve docs * dev --------- Co-authored-by: DavidAshburn --- docs/configuration/responsive.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/configuration/responsive.md b/docs/configuration/responsive.md index ff2018f6f..867dcde14 100644 --- a/docs/configuration/responsive.md +++ b/docs/configuration/responsive.md @@ -41,6 +41,19 @@ chart.canvas.parentNode.style.width = '128px'; Note that in order for the above code to correctly resize the chart height, the [`maintainAspectRatio`](#configuration-options) option must also be set to `false`. +## Flexbox / Grid Layout + +To prevent overflow issues when using flexbox / grid layout, you must set the flex / grid child element to have a `min-width` of `0`. +See [issue 4156](https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128) for more details. + +```html +
+
+ +
+
+``` + ## Printing Resizable Charts CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, you need to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart. @@ -62,4 +75,4 @@ window.addEventListener('beforeprint', () => { window.addEventListener('afterprint', () => { myChart.resize(); }); -``` +``` \ No newline at end of file -- 2.47.3