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.
This commit is contained in:
Josh Kelley 2020-12-10 09:25:00 -05:00 committed by GitHub
parent 649f815328
commit dc00ed08cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 2 deletions

View File

@ -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();
});
```

View File

@ -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;