The Chart Is Clipped during Printing

Environment

Description

When I am printing the Chart using the browser Print option, the generated PDF is clipped and overflows the page.

Cause

The Chart element may overflow the page during printing if the component size is larger than the paper size.

Solution

1. Set the print dimensions of the Chart by using a Media Query and matchMedia method.

   Copy Code ```css
        @media print {
            kendo-chart {
                width: 200mm;
            }
        }
    ```
   
    ```ts
        private matchPrint: MediaQueryList = window.matchMedia('print');
    ```

2. Add listener to the MediaQueryList and before printing, call the resize method of the Chart.

   Copy Code ```ts
        public ngOnInit(): void {
            this.matchPrint.addEventListener('change', this.resizeChart);
        }
    ```

3. Remove the MediaQueryList listener with an ngOnDestroy hook.

   Copy Code ```ts
        public ngOnDestroy(): void {
            if (this.matchPrint) {
              this.matchPrint.removeEventListener('change', this.resizeChart);
              this.matchPrint = null;
            }
        }
    ```

Due to Bug 774398, Firefox does not support the suggested approach.

The following example shows the full implementation of the demonstrated approach.