Update docs on printing (#8149)

From what I can tell from testing locally, Chrome doesn't reliably trigger resize events for the final print layout, so using `.resize()` with no parameters doesn't generally work.

I'm not sure if there are circumstances in which the original docs' suggestion of using `.resize()` with no parameters can work; if the original text should be deleted, I can do so.

I also noticed that the TypeScript type definitions for `.resize()` mark the parameters as required, even though the implementation and docs don't require them.

diff --git a/docs/docs/general/responsive.md b/docs/docs/general/responsive.md
index eab8bf963296d918cabc625466dd2b2335e8f6df..0bd3dc7b2a6d48ed1f2995fac9669c07bf31c10a 100644 (file)
--- a/docs/docs/general/responsive.md
+++ b/docs/docs/general/responsive.md
@@ -41,7 +41,7 @@ Note that in order for the above code to correctly resize the chart height, the
 
 ## 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, one needs to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart.
+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.
 
 ```javascript
 function beforePrintHandler () {
@@ -50,3 +50,14 @@ function beforePrintHandler () {
     }
 }
 ```
+
+You may also find that, due to complexities in when the browser lays out the document for printing and when resize events are fired, Chart.js is unable to properly resize for the print layout. To work around this, you can pass an explicit size to `.resize()` then use an [onafterprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint) event to restore the automatic size when done.
+
+```javascript
+window.addEventListener('beforeprint', () => {
+       myChart.resize(600, 600);
+});
+window.addEventListener('afterprint', () => {
+       myChart.resize();
+});
+```

diff --git a/types/core/index.d.ts b/types/core/index.d.ts
index 9fe00f4c8ac2be72dbd17286753a38f9a1ebca79..0359e31b04fb63cd05801e12d06de63ba3c27701 100644 (file)
--- a/types/core/index.d.ts
+++ b/types/core/index.d.ts
@@ -197,7 +197,7 @@ export declare class Chart<
        clear(): this;
        stop(): this;
 
-       resize(width: number, height: number): void;
+       resize(width?: number, height?: number): void;
        ensureScalesHaveIDs(): void;
        buildOrUpdateScales(): void;
        buildOrUpdateControllers(): void;