mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
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:
parent
649f815328
commit
dc00ed08cb
@ -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();
|
||||
});
|
||||
```
|
||||
|
||||
2
types/core/index.d.ts
vendored
2
types/core/index.d.ts
vendored
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user