From: Josh Kelley <joshkel@gmail.com>
Date: Thu, 10 Dec 2020 14:25:00 +0000 (-0500)
Subject: Update docs on printing (#8149)
X-Git-Tag: v3.0.0-beta.8~72
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dc00ed08cb7753a8df61edda1e5c660c71f7ec57;p=thirdparty%2FChart.js.git

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 eab8bf963..0bd3dc7b2 100644
--- 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 9fe00f4c8..0359e31b0 100644
--- 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;